JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://axibase.com/atsd/atsdClient.bundle.js"></script>
<div id="chart_div"></div>
JavaScript
google.charts.load('visualization', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var startTime = Date.now() - 1 * 3600 * 1000,
endTime = Date.now();
var postData = [{
startTime: startTime,
endTime: endTime,
entity: "atsd",
metric: "jvm_memory_used",
tags: {
host: ["NURSWGVML007"]
}
}];
var client = axibase.atsdClient("https://axibase.com");
client.series.queries(postData)
.then(function(response) {
var data = new google.visualization.DataTable();
data.addColumn("datetime");
data.addColumn("number");
data.addRows(response[0].data.map(function(el) {
return [new Date(el.d), {
v: el.v / 1024 / 1024,
f: (el.v / 1024 / 1024).toFixed(0) + " Mb"
}]
}));
var options = {
title: "nurswgvml007",
legend: "left",
hAxis: {
title: "Date"
},
vAxis: {
title: "JVM memory used, Mb"
},
width: 800,
height: 400
};
var chart = new google.visualization.ColumnChart(document.getElementById("chart_div"));
chart.draw(data, options);
})
.fail(function(error) {
console.log(error);
});
}