JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://axibase.com/atsd/atsdClient.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
<canvas id="myChart" width="800" height="400"></canvas>
JavaScript
$(document).ready(function() {
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) {
return response;
})
.then(function(series) {
var data = {
labels: [],
datasets: [{
label: "series",
backgroundColor: 'rgba(54, 162, 235, 0.6)',
data: []
}]
};
for (var i = 0; i < series[0].data.length; ++i) {
data.labels[i] = (new Date(series[0].data[i].d)).toLocaleString();
data.datasets[0].data[i] = series[0].data[i].v / 1024 / 1024;
}
var ctx = document.getElementById("myChart").getContext("2d");
var barConfig = {
type: 'bar',
data: data,
options: {
title: {
display: true,
text: 'ATSD jvm memory used, Mb'
}
}
};
var myLineChart = new Chart(ctx, barConfig);
})
.fail(function(error) {
console.log(error);
});
});