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", {
"theme": "none",
"type": "serial",
"autoMargins": false,
"marginLeft":8,
"marginRight":8,
"marginTop":10,
"marginBottom":26,
"pathToImages": "https://www.amcharts.com/lib/3/images/",
"dataProvider": response[0].data,
"valueAxes": [{
"id":"v1",
"axisAlpha": 0,
"inside": true,
labelFunction: function(value, valueText, valueAxis) {return Math.round(value / 1024/1024) + " Mb"}
}],
"graphs": [{
"useNegativeColorIfDown":true,
"balloonText": "[[category]]<br><b>value: [[value]]</b>",
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletBorderColor": "#FFFFFF",
"hideBulletsCount": 50,
"lineThickness": 2,
"lineColor": "#fdd400",
"negativeLineColor": "#67b7dc",
"valueField": "v"
}],
"chartScrollbar": {
},
"chartCursor": {
"valueLineEnabled":true,
"valueLineBalloonEnabled":true
},
"categoryField": "d",
"categoryAxis": {
"parseDates": true,
"axisAlpha": 0,
"minPeriod": "mm",
"minHorizontalGap":60
}
})
.fail(function(error) {console.log(error);});
chart.addListener("dataUpdated", zoomChart);
function zoomChart(){
if(chart.zoomToIndexes){
chart.zoomToIndexes(130, chartData.length - 1);
}
}
});