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",
"pathToImages": "https://www.amcharts.com/lib/3/images/",
"dataProvider": response[0].data,
"valueAxes": [{
"axisAlpha": 0,
"guides": [{
"fillAlpha": 0.1,
"fillColor": "#000000",
"inside": true,
"lineAlpha": 0,
"toValue": 20,
"value": 10
}],
labelFunction: function(value, valueText, valueAxis) {return Math.round(value / 1024/1024) + " Mb"},
"position": "left",
"showFirstLabel": false,
"showLastLabel": false,
"tickLength": 0
}],
"graphs": [{
"balloonText": "[[category]]<br><b><span style='font-size:14px;'>value:[[value]]</span></b>",
"bullet": "round",
"dashLength": 3,
"valueField": "v"
}],
"trendLines": [{
"finalDate": response[0].data[Math.ceil(response[0].data.length / 3)].d,
"finalValue": response[0].data[Math.ceil(response[0].data.length / 3)].v,
"initialDate": response[0].data[0].d,
"initialValue": response[0].data[0].v,
"lineColor": "#CC0000"
}, {
"finalDate": response[0].data[Math.ceil(response[0].data.length - 1)].d,
"finalValue": response[0].data[Math.ceil(response[0].data.length-1)].v,
"initialDate":...