cancel
Showing results for 
Search instead for 
Did you mean: 
Create Post

google charts using AnnotatedTimeLine - CPUMEM and ResponseTime/PacketLoss

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.

pastedImage_1.png

<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>

Labels (1)
Comments

cscoengineer​ This looks great! Thank you very much for sharing.

Version history
Revision #:
1 of 1
Last update:
‎09-06-2019 10:36 AM
Updated by: