Take the 2-minute tour ×

Before I proceed to what i plan to do, I would like first to know if it is possible for Google Gauges images of gauges be changed according to what I want... I mean the display/image of the gauge in the api shall be manipulated/set by my code. Is that possible? I'm still googling about it and found none so far so I thought of asking here.

i appreciate any help. Thank you.

below is a sample code i got from google api website

    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
      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);
    <div id='chart_div'></div>
share|improve this question

1 Answer 1

It sounds like you're trying to change the values of the gauges (ie, where the needles are pointing) dynamically, and that's exactly what the gauge is able to do.

First, you need to decide how many gauges you want. You define them when you make the table of data which you feed to the gauge:

var data = google.visualization.arrayToDataTable([
   ['Label', 'Value'],
   ['Gauge1', 80],
   ['#2', 55],
   ['Third One', 68]

It's important to realize that this makes a "DataTable" object, which is a little like a spreadsheet. It's three rows and two columns (the first array "['Label', 'Value']" define the names of the columns). Each row contains the label and value for the first gauge (it's going to be labeled "Gauge1" and it's going to start off with a value of 80), and the next row is the label and value for the second gauge, etc.

If you ever want to change the value of a gauge, you need to change the numbers in the "data" object (with .setValue(row, column, value) and then tell the gauge to redraw. For example,

data.setValue(0, 1, 30);

This will set row-0, column-1 to be 30. Row-0 corresponds to the first gauge. Column-1 corresponds to its value (we don't want to update its label... that would be column-0). So, to update the values on all three gauges, we'd use something like:

data.setValue(0, 1, 30); // Set "Gauge1" to 30
data.setValue(1, 1, 45); // Set "#2" to 45
data.setValue(2, 1, 12); // Set "Third One" to 12
chart.draw(data, options);

I always just make the data object global and then I can just change the values, although I guess you could re-generate the data object completely, each time with arrayToDataTable().

share|improve this answer

Your Answer


