title: How to dynamically update a Google Gauge
body: <p>I have been trying to dynamically update a Google Gauge but despite looking at several other questions I cannot get it to work. </p>
  
  <p>The code is below but what I need to able to do is set the slider to a value and then press the go link. This should update the gauge. All I can get to work is the change of the text.</p>
  
  <p>Can anyone point out where I am going wrong?</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;meta charset="utf-8"&gt;
  
      &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /&gt;
  
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;  
      &lt;script type='text/javascript' src='http://www.google.com/jsapi'&gt;&lt;/script&gt;
      &lt;script type='text/javascript' src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"&gt;&lt;/script&gt;
  
      &lt;script type='text/javascript'&gt;
              google.load('visualization', '1', {packages:['gauge']});
              google.setOnLoadCallback(drawChart);
      &lt;/script&gt;
  
      &lt;script type='text/javascript'&gt;
          function recordValue() {
  
              var val = document.getElementById("amount").value;
  
              setValue(val);
  
              return true;
  
          }
      &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;div id='chart_div'&gt;&lt;/div&gt;
      &lt;p&gt;
          &lt;label for="amount"&gt;Slider value:&lt;/label&gt;
          &lt;input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" /&gt;
      &lt;/p&gt;
      &lt;div id="slider-range-max"&gt;&lt;/div&gt;
      &lt;div class="go"&gt;&lt;a href="#" class="button" onClick="javascript:return recordValue();"&gt;Go&lt;/a&gt;&lt;/div&gt;
  
    &lt;script&gt;
    $(function() {
      $( "#slider-range-max" ).slider({
        range: "max",
        min: 1,
        max: 100,
        value: 50,
        slide: function( event, ui ) {
          $( "#amount" ).val( ui.value );
        }
      });
      $( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
    });
    &lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  
  google.load('visualization', '1', {packages: ['gauge']});
  google.setOnLoadCallback(drawChart);
  
  var data;
  var chart;
  var options;
  
  function drawChart() {
      data = new google.visualization.DataTable();
      data.addColumn('string', 'Gauge');
      data.addColumn('number', 'Value');
      data.addRows([
  
          ['Value', 20]
  
      ]);
  
      options= {
              animation: {
                  duration: 2000
              },
              height: 300,
              width: 300,
              greenFrom: 40,
              greenTo: 100,
              yellowFrom: 20,
              yellowTo: 40,
              redFrom: 0,
              redTo: 20,
              max: 100
          };
  
      // make a temporary view to draw the chart in a blank state
      var view = new google.visualization.DataView(data);
      view.setColumns([0, {
          // create a calculated column that contains all zero's
          type: 'number',
          calc: function () {
              return 0;
          }
      }]);
  
      chart = new google.visualization.ChartWrapper({
          chartType: 'Gauge',
          containerId: 'chart_div',
          dataTable: view,
          options: {
              animation: {
                  duration: 2000
              },
              height: 300,
              width: 300,
              greenFrom: 40,
              greenTo: 100,
              yellowFrom: 20,
              yellowTo: 40,
              redFrom: 0,
              redTo: 20,
              max: 100
              }    });
  
      var runOnce = google.visualization.events.addListener(chart, 'ready', function () {
          google.visualization.events.removeListener(runOnce);
          // use the real data to redraw
          chart.setDataTable(data);
  
          chart.draw();
      });
  
      chart.draw();
  }
  
  function setValue(val){
     data.setValue(0, 0, "['Value', val]");
     chart.draw(data, options);   
  }
  
  &lt;/script&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>