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: "nurswgvml007",
metric: "cpu_busy",
aggregate: {
types: ["LAST", "MIN", "MAX"],
period: {count: 1, unit: "HOUR"}
}
}
];
var client = axibase.atsdClient("https://axibase.com");
client.series.queries(postData)
.then(function(response) {
var min = [];
var max = [];
var last = [];
for (var i = 0; i < response.length; ++i) {
if (response[i].aggregate.type === "MAX") {
max = response[i].data;
} else if (response[i].aggregate.type === "MIN") {
min = response[i].data;
} else if (response[i].aggregate.type === "LAST") {
last = response[i].data;
}
}
var rows = [];
for (var i = 1; i < last.length; ++i) {
var open = last[i-1].v;
rows.push({
date: last[i].d,
low: min[i].v,
open: open,
close: last[i].v,
high: max[i].v});
}
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "none",
"pathToImages": "https://www.amcharts.com/lib/3/images/",
"valueAxes": [{
title: "Cpu busy, %",
"position": "left"
}],
"graphs": [{
"id": "g1",
"proCandlesticks":true,
"balloonText": "Open:<b>[[open]]</b><br>Low:<b>[[low]]</b><br>High:<b>[[high]]</b><br>Close:<b>[[close]]</b><br>",
"closeField": "close",
"fillColors": "#7f8da9",
"highField": "high",
"lineColor": "#7f8da9",
"lineAlpha": 1,
"lowField": "low",
"fillAlphas": 0.9,
"negativeFillColors": "#db4c3c",
"negativeLineColor": "#db4c3c",
"openField": "open",
"title": "Price:",
...