chartsgoogle-visualizationmaxgoogle-gauges

Gauge chart maximum value

Here is the code for simple Google gauge chart copied from Google code playground.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>
      Google Visualization API Sample
    </title>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['gauge']});
    </script>
    <script type="text/javascript">
      function drawVisualization() {
        // Create and populate the data table.
        var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Memory', 80],
          ['CPU', 55],
          ['Network', 68]
        ]);

        // Create and draw the visualization.
        new google.visualization.Gauge(document.getElementById('visualization')).
            draw(data);
      }


      google.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="visualization" style="width: 600px; height: 300px;"></div>
  </body>
</html>

How to change the maximum value for these gauges? When I given var options = { max: 500}; in options it set 500 for all three gauges. But Is it possible to give different maximums for different gauges.

Solution

  • Make 3 different gauge charts. You can use the same DataTable, but use only one row for each individual chart using a DataView. Currently there is no way to set the values of the gauges individually within the API. See this thread from 2011 in Google Groups that says the same thing.

    (Chances are this isn't a very high priority. If you want to do it more simply, you can use Control Wrappers to link all of them without separate DataViews)