I have posted a CPU and MEM chart using google charts Google Charts for CPU and MEM
This time I used AnnotatedTimeLine and it looks really good. Informative yet - taking up minimal footprint. It also uses the zoom feature. I'm loading just data from today, but you can load it a weeks worth of data then set the initial zoom.
Combining Response Time and Packet Loss was tricky because this required dual-y charts. I have done dual-Y, but we loose the zoom functionality. The zoom buttons are not editable - they are either on or off and are controlled by the options (which I have not used).
Annotated Timeline | Charts | Google Developers
This will go in the 'Node Details' view.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div>
<script>
console.log('*****START*');
var swqlCPUMEM="select concat(month(tolocal(n.CPULoadHistory.DateTime)),'/',day(tolocal(n.CPULoadHistory.DateTime)),'/',year(tolocal(n.CPULoadHistory.DateTime)),' ',hour(tolocal(n.CPULoadHistory.DateTime)),':',minute(tolocal(n.CPULoadHistory.DateTime)),':',second(tolocal(n.CPULoadHistory.DateTime))) as [ss],n.CPULoadHistory.AvgLoad as [cpu], round(n.CPULoadHistory.AvgPercentMemoryUsed,0) as [mem] from Orion.nodes n where n.nodeid=${nodeid} and daydiff(tolocal(n.CPULoadHistory.DateTime),GETDATE())=0 order by n.CPULoadHistory.DateTime"
var paramsCPUMEM = JSON.stringify({
query: swqlCPUMEM,
parameters: {
}
});
$.ajax({
type: 'POST',
url: '/Orion/Services/Information.asmx/QueryWithParameters',
data: paramsCPUMEM,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
google.charts.load('current', {'packages':['annotatedtimeline']});
google.charts.setOnLoadCallback(drawChartCPUMEM);
var i;
function drawChartCPUMEM() {
var dataCPUMEM = new google.visualization.DataTable();
dataCPUMEM.addColumn('datetime', 'Date');
dataCPUMEM.addColumn( 'number', 'CPU');
dataCPUMEM.addColumn( 'number', 'MEM');
for (var i = 0; i < response.d.Rows.length; i++){
var row = [new Date(response.d.Rows[i][0]), response.d.Rows[i][1], response.d.Rows[i][2] ];
dataCPUMEM.addRow(row);
}
var options = {
width: 400,
height: 100,
chartArea: {left: 30, top:5, width: '60%', height: '75%'},
legend: { textStyle: { fontSize: 12}},
vAxis: { gridlines: { count: 4 } , maxValue: 100}
};
var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('CPUMEM'));
chart.draw(dataCPUMEM);
}
}
})
</script>
</div>
<div id="CPUMEM"></div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div>
<script>
console.log('*****START*');
var swqlRTLOSS="select concat(month(tolocal(n.ResponseTimeHistory.DateTime)),'/',day(tolocal(n.ResponseTimeHistory.DateTime)),'/',year(tolocal(n.ResponseTimeHistory.DateTime)),' ',hour(tolocal(n.ResponseTimeHistory.DateTime)),':',minute(tolocal(n.ResponseTimeHistory.DateTime)),':',second(tolocal(n.ResponseTimeHistory.DateTime))) as [ss],n.ResponseTimeHistory.AvgResponseTime as [RT], case when (n.ResponseTimeHistory.PercentLoss=100) then (select case when max(n.ResponseTimeHistory.AvgResponseTime)=0 then 1 else max(n.ResponseTimeHistory.AvgResponseTime) end as [d] from Orion.nodes n where n.nodeid=${nodeid} and daydiff(tolocal(n.ResponseTimeHistory.DateTime),GETDATE())=0) else 0 end as [loss] from Orion.nodes n where n.nodeid=${nodeid} and daydiff(tolocal(n.ResponseTimeHistory.DateTime),GETDATE())=0 group by n.ResponseTimeHistory.AvgResponseTime, n.ResponseTimeHistory.PercentLoss, n.ResponseTimeHistory.DateTime order by n.ResponseTimeHistory.DateTime"
var paramsRTLOSS = JSON.stringify({
query: swqlRTLOSS,
parameters: {}
});
$.ajax({
type: 'POST',
url: '/Orion/Services/Information.asmx/QueryWithParameters',
data: paramsRTLOSS,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
console.table(response);
google.charts.load('current', {'packages':['annotatedtimeline']});
google.charts.setOnLoadCallback(drawChartRTLOSS);
var i;
function drawChartRTLOSS() {
var dataRTLOSS = new google.visualization.DataTable();
dataRTLOSS.addColumn('datetime', 'Time');
dataRTLOSS.addColumn( 'number', 'RespTime');
dataRTLOSS.addColumn( 'number', 'Loss');
for (var i = 0; i < response.d.Rows.length; i++){
var row = [new Date(response.d.Rows[i][0]), response.d.Rows[i][1], response.d.Rows[i][2] ];
dataRTLOSS.addRow(row);
}
var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('RTLOSS'));
chart.draw(dataRTLOSS);
}
}
})
</script>
</div>
<div id="RTLOSS"></div>