Click here to see your recently viewed pages and most viewed pages.
Hide

Visualization: Gauge

Overview

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

Example

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["gauge"]});
      google.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.load package name is "gauge".

  google.load('visualization', '1', {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:

  1. 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.
  2. Any number of numeric columns. The label of each gauge is the column's label.

Configuration Options

Name Type Default Description
animation.duration number 400 The duration of the animation, in milliseconds. For details, see the animation documentation.
animation.easing string 'linear' 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.
forceIFrame boolean false Draws the chart inside an inline frame. (Note that on IE8, this option is ignored; all IE8 charts are drawn in i-frames.)
greenColor string '#109618' The color to use for the green section, in HTML color notation.
greenFrom number none The lowest value for a range marked by a green color.
greenTo number none The highest value for a range marked by a green color.
height number Container's width Height of the chart in pixels.
majorTicks Array of strings none 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.
max number 100 The maximal value of a gauge.
min number 0 The minimal value of a gauge.
minorTicks number 2 The number of minor tick section in each major tick section.
redColor string '#DC3912' The color to use for the red section, in HTML color notation.
redFrom number none The lowest value for a range marked by a red color.
redTo number none The highest value for a range marked by a red color.
width number Container's width Width of the chart in pixels.
yellowColor string '#FF9900' The color to use for the yellow section, in HTML color notation.
yellowFrom number none The lowest value for a range marked by a yellow color.
yellowTo number none The highest value for a range marked by a yellow color.

Methods

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

Events

No triggered events.

Data Policy

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