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