netdata as google chart datasource provider

An example of a Google Area Chart using netdata as source.

by Costa Tsaousis

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
       <div id="chart_div" style="width: 100%; height: 500px;"></div>

JavaScript

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

      function drawChart() {
        var query = new google.visualization.Query('https://london.my-netdata.io/api/v1/data?chart=system.cpu&after=-60&format=datasource&options=nonzero', {sendMethod: 'auto'});
        
        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        
        var options = {
          title: 'This is the netdata global public Registry, System CPU',
          isStacked: 'absolute',
          vAxis: {minValue: 100}
        };

				setInterval(function() {
          query.send(function(data) {
          	chart.draw(data.getDataTable(), options);
            });
        }, 1000);
      }