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>
<script src="https://www.amcharts.com/lib/3/themes/none.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",
"marginLeft": 20,
"pathToImages": "https://www.amcharts.com/lib/3/images/",
"dataProvider": response[0].data,
"valueAxes": [{
"axisAlpha": 0,
"inside": true,
"position": "left",
labelFunction: function(value, valueText, valueAxis) {
return Math.round(value / 1024 / 1024) + " Mb"
},
"ignoreAxisWidth": true
}],
"graphs": [{
"balloonText": "[[category]]<br><b><span style='font-size:14px;'>[[value]]</span></b>",
"bullet": "round",
"bulletSize": 6,
"lineColor": "#d1655d",
"lineThickness": 2,
negativeBase: 130000000,
"negativeLineColor": "#637bb6",
"type": "smoothedLine",
"valueField": "v"
}],
"chartScrollbar": {},
"chartCursor": {
"categoryBalloonDateFormat": "YYYY",
"cursorAlpha": 0,
"cursorPosition": "mouse"
},
"categoryField": "d",
"categoryAxis": {
"minPeriod": "mm",
...