Google Charts

Visualization: Gauge

Overview

One or more gauges are rendered within the browser using SVG or VML.

By: Google

Example

Code it yourself on the Visualization Playground

<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);
      }
    </script>
  </head>
  <body>
    <div id='chart_div'></div>
  </body>
</html>

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.

Authentication required

You need to be signed in with Google+ to do that.

Signing you in...

Google Developers needs your permission to do that.