Create a Gauge Chart with Google Charts

Use a gauge when you want to show one or more values against a fixed scale. This example creates Memory, CPU and Network gauges and lets you select a new CPU value.

Interactive gauge example

CPU: 55 / 100

Copyable gauge example

Save the following as an HTML file and open it with an internet connection. The gauge package is required; corechart alone will not create a gauge.

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" role="img" aria-label="Gauge values for Memory, CPU and Network"></div>
<script>
google.charts.load('current', {packages: ['gauge']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
  const data = google.visualization.arrayToDataTable([
    ['Label', 'Value'],
    ['Memory', 80],
    ['CPU', 55],
    ['Network', 68]
  ]);
  const options = {width: Math.min(420, Math.max(260, window.innerWidth - 40)), height: 150, min: 0, max: 100,
    redFrom: 90, redTo: 100, yellowFrom: 75, yellowTo: 90, minorTicks: 5};
  const chart = new google.visualization.Gauge(document.getElementById('chart_div'));
  chart.draw(data, options);
}
</script>

The first row declares the column names and types. Subsequent rows supply label/value pairs. The yellowFrom and redFrom options define threshold ranges on the gauge.

Updating a gauge after it loads

Changing the value with setValue() updates the data table, but the chart must be drawn again to make the change visible. The interactive example above keeps its chart and data available to the radio-button handler.

// Call this from a radio-button change event after the chart has loaded.
// data and chart must be accessible to this handler.
function updateGauge(value) {
  data.setValue(1, 1, value); // second data row (CPU), numeric value
  chart.draw(data, options); // changing data alone does not redraw a chart
}

For charts using PHP/MySQL data, generate only the trusted numeric values server-side and safely serialize values into JavaScript with json_encode(); see the database chart example. This interactive demonstration uses a browser-only sample and does not require a database.

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: