My favorites | English | Sign in

Google Visualization API

Visualization: Gauge

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

Overview

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

By: Google

Example

<html>
  <head>
    <script type='text/javascript' src='http://www.google.com/jsapi'></script>
    <script type='text/javascript'>
      google.load('visualization', '1', {packages:['gauge']});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Label');
        data.addColumn('number', 'Value');
        data.addRows(3);
        data.setValue(0, 0, 'Memory');
        data.setValue(0, 1, 80);
        data.setValue(1, 0, 'CPU');
        data.setValue(1, 1, 55);
        data.setValue(2, 0, 'Network');
        data.setValue(2, 1, 68);

        var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
        var options = {width: 400, height: 120, redFrom: 90, redTo: 100,
            yellowFrom:75, yellowTo: 90, minorTicks: 5};
        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
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.
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.
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.

Events

No triggered events.

Data Policy

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