JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://axibase.com/atsd/atsdClient.bundle.js"></script>
<div id="chart_div"></div>
JavaScript
google.charts.load('visualization', {
'packages': ['gauge']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var startTime = Date.now() - 60 * 60 * 1000,
endTime = Date.now();
var postData = [{
startTime: startTime,
endTime: endTime,
entity: "NURSWGVML007",
metric: "disk_used_percent",
tags: {
mount_point: ["/"]
}
}];
var client = axibase.atsdClient("https://axibase.com");
client.series.queries(postData)
.then(function(response) {
var diskSpaceUsed = response[0].data[response[0].data.length - 1].v || 0;
var data = google.visualization.arrayToDataTable([
["Label", "Value"],
["Space Used", +diskSpaceUsed.toPrecision(3)]
]);
var options = {
redFrom: 90,
redTo: 100,
yellowFrom: 75,
yellowTo: 90,
minorTicks: 5,
width: 240
};
var chart = new google.visualization.Gauge(document.getElementById("chart_div"));
chart.draw(data, options);
})
.fail(function(error) {
console.log(error);
});
}