JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://axibase.com/atsd/atsdClient.bundle.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<div id="container1" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
JavaScript
$(function() {
// Give the points a 3D feel by adding a radial gradient
Highcharts.getOptions().colors = $.map(Highcharts.getOptions().colors, function(color) {
return {
radialGradient: {
cx: 0.4,
cy: 0.3,
r: 0.5
},
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.2).get('rgb')]
]
};
});
var startTime = Date.now() - 7 * 24 * 3600 * 1000,
endTime = Date.now();
var postData = [{
startTime: startTime,
endTime: endTime,
entity: "nurswgvml006",
metric: "nmon.cpu_total.busy%",
type: "HISTORY",
aggregate: {
types: ["AVG"],
period: {
count: 1,
unit: "HOUR"
}
}
}, {
startTime: startTime,
endTime: endTime,
entity: "nurswgvml006",
metric: "nmon.disk_%busy",
tags: {
id: ["sdb1"]
},
type: "HISTORY",
aggregate: {
types: ["AVG"],
period: {
count: 1,
unit: "HOUR"
}
}
}, {
startTime: startTime,
endTime: endTime,
entity: "nurswgvml006",
metric: "nmon.memory_mb.memused%",
type: "HISTORY",
aggregate: {
types: ["AVG"],
period: {
count: 1,
unit: "HOUR"
}
}
}, {
startTime: startTime,
endTime: endTime,
entity: "nurswgvml007",
metric: "nmon.cpu_total.busy%",
type: "HISTORY",
aggregate: {
...