Antenna Handbook: Google Chart Tools

Google chart is a very powerful and easy-to-use tool for graphical visualization in a Web/html environment. One of the advantages of the Google Tools Chart is that the display can move/live according to the data in real time from your data output. There are many Chart / Graphics options that can be used to display your data, starting from pie charts, bar charts, histograms, maps charts, gauges, scatters, timelines and others. The following is an example display. Gauge Chart, displays a Graph Gauge for your CPU, Memory/Ram and Network performance. These program use Javascript application

You can modified this program for other application

<html>
  <head>
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script type="text/javascript">
      google.charts.load('current', {'packages':['gauge']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Memory', 80],
          ['CPU', 55],
          ['Network', 68]
        ]);

        var options = {
          width: 400, height: 120,
          redFrom: 90, redTo: 100,
          yellowFrom:75, yellowTo: 90,
          minorTicks: 5
        };

        var chart = new google.visualization.Gauge(document.getElementById('chart_div'));

        chart.draw(data, options);

        setInterval(function() {
          data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
          chart.draw(data, options);
        }, 13000);
        setInterval(function() {
          data.setValue(1, 1, 40 + Math.round(60 * Math.random()));
          chart.draw(data, options);
        }, 5000);
        setInterval(function() {
          data.setValue(2, 1, 60 + Math.round(20 * Math.random()));
          chart.draw(data, options);
        }, 26000);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 120px;"></div>
  </body>
</html>

  // create data object with default value
  let data = google.visualization.arrayToDataTable([
    ['Time', 'CPU Usage', 'RAM'],
    [0, 0, 0],
  ]);

  // create options object with titles, colors, etc.
  let options = {
    title: "CPU Usage",
    hAxis: {
      textPosition: 'none',
    },
    vAxis: {
      title: "Usage"
    }
  };

  // draw chart on load
  let chart = new google.visualization.LineChart(
    document.getElementById("chart_div")
  );
  chart.draw(data, options)

Antenna Handbook

Google Chart Tools

No comments:

Post a Comment