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

Google Charts for CPU and MEM

Using How-To: Insert Google Charts (Pie Chart) within Custom HTML by wluther as a reference, I was able to use it to shrink the CPU and MEM for a node.  This can be expanded to other metrics, such as components and node availability.

pastedImage_3.png

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<div>

<script>

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

               console.table(response);

             google.charts.load('current', {'packages':['corechart']});

             google.charts.setOnLoadCallback(drawChart);

            var i;

             function drawChart() {

             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.LineChart( document.getElementById('chart_div'));

             chart.draw(dataCPUMEM,options);

          }

}

})

</script>

</div>

  <div id="chart_div"></div>

Labels (1)
Comments

Hi there,

I've also been working with some of these google chart integrations off of wluther​'s post, could you talk about how to arranged the SWQL query component in a way Google was happy with?

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

This seems like a long way to make a timestamp!

In general I'm somewhat unclear about how to properly call historic data in SWQL so any pointers would be useful

This is a nice idea. I wonder what patrick.hubbard​ thinks about the possibility of someone going full google charts for a solarwinds view page?

Version history
Revision #:
1 of 1
Last update:
‎08-15-2019 03:30 PM
Updated by: