JSFiddle - React, Tailwind, and code Playground

by Amir Danish

HTML

<div id="cpu-graph" title="" style="background-color: #000; height: 250px; width: 100%; margin-right:0px;position: relative; padding-left:15%;"></div>

JavaScript

google.charts.load('current', {
  'packages': ['gauge']
});
google.charts.setOnLoadCallback(drawCPUChart);
google.load("visualization", "1", {
  "callback": drawChart
});


const cpuvalue =[8] ;

function drawCPUChart() {

  /* start graph for CPU usage */
  var CpuData = google.visualization.arrayToDataTable([
    ['Label', 'Value'],
    ['CPU', 2],
  ]);

  var CpuOptions = {
    width: '100%',
    height: '100%',
    greenFrom: 0,
    greenTo: 75,
    redFrom: 90,
    redTo: 100,
    yellowFrom: 75,
    yellowTo: 90,
    minorTicks: 5,
    chartArea: {
      backgroundColor: {
        fill: '#000000',
        fillOpacity: 3.1
      },
    },
    backgroundColor: {
      fill: '#000000',
      fillOpacity: 2.8
    }
  };

  /* add the percentage symbol(%,?) here */
  var cpuformatter = new google.visualization.NumberFormat({
    suffix: " %",
    pattern: '#'
  });
  cpuformatter.format(CpuData, 1);


  var CPUChart = new google.visualization.Gauge(document.getElementById('cpu-graph'));
  CPUChart.draw(CpuData, CpuOptions);
  /* End graph for CPU usage */

  setInterval(function() {
    CPUChart.draw(CpuData, CpuOptions);
  }, 13000);
}