Visualization: Gauge

  1. Overview
  2. Example
  3. Loading
  4. Data Format
  5. Configuration Options
  6. Methods
  7. Events
  8. Data Policy

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:

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