JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://axibase.com/atsd/atsdClient.bundle.js"></script>
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv"></div>
CSS
#chartdiv {
width: 100%;
height: 500px;
}
JavaScript
var startTime = Date.now() - 24 * 3600 * 1000,
endTime = Date.now();
var postData = [{
startTime: startTime,
endTime: endTime,
entity: "atsd",
metric: "jvm_memory_used",
tags: {
host: ["NURSWGVML007"]
},
aggregate: {
types: ["AVG"],
period: {
count: 1,
unit: "HOUR"
}
}
}];
var client = axibase.atsdClient("https://axibase.com");
client.series.queries(postData)
.then(function(response) {
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "none",
"pathToImages": "https://www.amcharts.com/lib/3/images/",
"dataProvider": response[0].data,
"valueAxes": [{
"position": "left",
"title": "Memory used, Mb",
labelFunction: function(value, valueText, valueAxis) {
return Math.round(value / 1024 / 1024);
}
}],
"graphs": [{
"fillAlphas": 0.4,
"valueField": "v"
}],
"chartScrollbar": {},
"chartCursor": {
"categoryBalloonDateFormat": "JJ:NN, DD MMMM",
"cursorPosition": "mouse"
},
"categoryField": "d",
"categoryAxis": {
"minPeriod": "mm",
"parseDates": true
}
}).fail(function(error) {
console.log(error);
});
});