How to dynamically update a Google Gauge

I have been trying to dynamically update a Google Gauge but despite looking at several other questions I cannot get it to work.

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.

Can anyone point out where I am going wrong?

<!doctype html>
<html lang="en">
<head>
    <title></title>
    <meta charset="utf-8">

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>  
    <script type='text/javascript' src='http://www.google.com/jsapi'></script>
    <script type='text/javascript' src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

    <script type='text/javascript'>
            google.load('visualization', '1', {packages:['gauge']});
            google.setOnLoadCallback(drawChart);
    </script>

    <script type='text/javascript'>
        function recordValue() {

            var val = document.getElementById("amount").value;

            setValue(val);

            return true;

        }
    </script>

</head>

<body>

    <div id='chart_div'></div>
    <p>
        <label for="amount">Slider value:</label>
        <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />
    </p>
    <div id="slider-range-max"></div>
    <div class="go"><a href="#" class="button" onClick="javascript:return recordValue();">Go</a></div>

  <script>
  $(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" ) );
  });
  </script>

<script type="text/javascript">

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);   
}

</script>


</body>
</html>

Solution

I got multiple errors debugging this page in Visual Studio 2012 but did solve the first problem (after ripping out the slider which will not fire up for some reason).

Basically you are updating column 0 with a string which is used for the gauge display.

You need to update column 1, with a numeric value:

function setValue(val){
    data.setValue(0, 1, parseInt(val));
    chart.draw(data, options);
}

If you are also after a fix for the slider too, please have another go first with this fix.