JSFiddle - React, Tailwind, and code Playground
HTML
curl -s -X GET 'https://api.newrelic.com/v2/applications/150760282/metrics/data.json' \
-H 'X-Api-Key:8ce87f257ae220a0330f7a0ee43073f2f1581e84887a94e' \
-G -d 'names[]=WebTransactionTotalTime&values[]=average_response_time&from=2018-08-17T04:56:00+00:00&to=2018-08-17T05:21:00+00:00&summarize=false&raw=false'
JavaScript
var chart;
$(function () {
chart = function () {
$('#container').highcharts({
data: {
table: document.getElementById('datatable')
},
chart: {
type: 'line'
},
title: {
text: 'Data extracted from a HTML table in the page'
},
yAxis: {
title: {
text: 'Units'
}
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' + this.point.y + ' ' + this.point.name.toLowerCase();
}
}
});
};
chart();
$('#reader').click(function () {
var loop, i;
for (loop = 0; loop < 5; loop++) {
for (i = 0; i < 30; i++) {
window['Value' + (i + 1)] = {
value: Math.random() * 30
}
}
$('#refresh').append("<tr><td>" + loop + 1 + "</td><td>" + Value1.value + "</td>" + "<td>" + Value2.value + "</td>" + "<td>" + Value3.value + "</td>" + "<td>" + Value4.value + "</td>" + "<td>" + Value5.value + "</td>" + "<td>" + Value6.value + "</td>" + "<td>" + Value7.value + "</td>" + "<td>" + Value8.value + "</td>" + "<td>" + Value9.value + "</td>" + "<td>" + Value10.value + "</td>" + "<td>" + Value11.value + "</td>" + "<td>" + Value12.value + "</td>" + "<td>" + Value13.value + "</td>" + "<td>" + Value14.value + "</td>" + "<td>" + Value15.value + "</td>" + "<td>" + Value16.value + "</td>" + "<td>" + Value17.value + "</td>" + "<td>" + Value18.value + "</td>" + "<td>" + Value19.value + "</td>" + "<td>" + Value20.value + "</td>" + "<td>" + Value21.value + "</td>" + "<td>" + Value22.value + "</td>" + "<td>" + Value23.value + "</td>" + "<td>" + Value24.value + "</td>" + "<td>" + Value25.value + "</td>" + "<td>" + Value26.value + "</td>" + "<td>" + Value27.value + "</td>" + "<td>" +...