Version 2

    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.

     

     

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