Visualization: Gauge

Gauge charts with a dial can be rendered in the browser using SVG or VML.
The chart is loaded using google.charts.load with the package name "gauge" and the class name is google.visualization.Gauge.
Data for the gauge chart can be provided in two formats: two columns (label and value) or any number of numeric columns (column label as gauge label).
Configuration options allow customization of animation, colors for ranges (green, red, yellow), size, tick marks, and value ranges (min/max).
The primary method is draw(data, options) to render the chart, and clearChart() removes it.
Gauge charts do not trigger any events.
All data processing and rendering occur within the browser, and no data is transmitted to external servers.

Overview

A gauge with a dial, rendered within the browser using SVG or VML.

Example

<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>

At the moment there's no way to specify the title of a gauge chart as you can with other Google Charts. In the example above, simple HTML is used to display the title.

Also, the animation.startup option available for many other Google Charts is not available for the Gauge Chart. If you'd like a startup animation, draw the chart initially with values set to zero, and then draw again with the value you'd like it to animate to.

Loading

The google.charts.load package name is "gauge".

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

The visualization's class name is google.visualization.Gauge.

  var visualization = new google.visualization.Gauge(container);

Data Format

Each numeric value is displayed as a gauge. Two alternative data formats are supported:

Two columns. The first column should be a string, and contain the gauge label. The second column should be a number, and contain the gauge value.
Any number of numeric columns. The label of each gauge is the column's label.

Configuration Options

Name
animation.duration	The duration of the animation, in milliseconds. For details, see the animation documentation. Type: number Default: 400
animation.easing	The easing function applied to the animation. The following options are available: 'linear' - Constant speed. 'in' - Ease in - Start slow and speed up. 'out' - Ease out - Start fast and slow down. 'inAndOut' - Ease in and out - Start slow, speed up, then slow down. Type: string Default: 'linear'
forceIFrame	Draws the chart inside an inline frame. (Note that on IE8, this option is ignored; all IE8 charts are drawn in i-frames.) Type: boolean Default: false
greenColor	The color to use for the green section, in HTML color notation. Type: string Default: '#109618'
greenFrom	The lowest value for a range marked by a green color. Type: number Default: none
greenTo	The highest value for a range marked by a green color. Type: number Default: none
height	Height of the chart in pixels. Type: number Default: Container's width
majorTicks	Labels for major tick marks. The number of labels define the number of major ticks in all gauges. The default is five major ticks, with the labels of the minimal and maximal gauge value. Type: Array of strings Default: none
max	The maximal value of a gauge. Type: number Default: 100
min	The minimal value of a gauge. Type: number Default: 0
minorTicks	The number of minor tick section in each major tick section. Type:number Default: 2
redColor	The color to use for the red section, in HTML color notation. Type: string Default: '#DC3912'
redFrom	The lowest value for a range marked by a red color. Type: number Default: none
redTo	The highest value for a range marked by a red color. Type: number Default: none
width	Width of the chart in pixels. Type: number Default: Container's width
yellowColor	The color to use for the yellow section, in HTML color notation. Type: string Default: '#FF9900'
yellowFrom	The lowest value for a range marked by a yellow color. Type: number Default: none
yellowTo	The highest value for a range marked by a yellow color. Type: number Default: none

Methods

Method

Method
`draw(data, options)`	Draws the chart. Return Type: none
`clearChart()`	Clears the chart, and releases all of its allocated resources. Return Type: none

draw(data, options)

Draws the chart.

Return Type: none

clearChart()

Clears the chart, and releases all of its allocated resources.

Return Type: none

Events

No triggered events.

Data Policy

All code and data are processed and rendered in the browser. No data is sent to any server.