Google Charts
Google Charts Introduction Getting Started Area Charts Bar Charts Bubble Charts Calendar Charts Candlestick Charts Column Charts Combination Chart Gauge Chart Geo Charts Histogram Charts Line Charts Maps Organization Chart Pie Charts Sankey Charts Scatter Charts Stepped Area Charts Table Chart Trendline Charts Wordtree Charts

Google Gauge Chart

Gauge charts are used to draw gauge based charts.


Basic Gauge Chart

The following example shows how to draw a basic gauge chart, using google charts API:


Example Explained

First add a <div> element with the id "chart-div" and set width and height:

<!DOCTYPE html> <html lang="en-US"> <body> <div id="chart-div" style="width:100%; height:280px;"></div> </body> </html>

Then add a reference to the Chart API:

<script src="https://www.gstatic.com/charts/loader.js"></script>

Finally add a JavaScript function:

// Load the gauge package and set a callback google.charts.load('current', {'packages':['gauge']}); google.charts.setOnLoadCallback(drawChart); // Callback that creates and populates a data table function drawChart() { // Create the data table var data = google.visualization.arrayToDataTable([ ['Label', 'Value'], ['Memory', 40], ['CPU', 32], ['Network', 75] ]); // Set chart options var options = { redFrom: 90, redTo: 100, yellowFrom:75, yellowTo: 90, minorTicks: 5 }; // Display the chart inside the <div> element with id="chart-div" var chart = new google.visualization.Gauge(document.getElementById('chart-div')); chart.draw(data, options); }


Animated Gauge Chart

Google charts can animate smoothly by redraw a chart after making a change in data or options:

  • Start with an already rendered chart
  • Modify the data table or options
  • Specify the transition behavior using the animation option
  • Call chart.draw() on your chart to transition to the new values

Here is a simple example which changes the values presented in a chart after every 2 seconds: