Plot Highchart Gauge with JSON Data

Question

How do I plot highchart Gauge with JSON Data?

I am working on highchart gauge, I got succes in showing the latest data from the database. I used JavaScriptSerializer for that

The code is..

  <script type="text/javascript">
    $(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'gauge',
            plotBackgroundColor: null,
            plotBackgroundImage: null,
            plotBorderWidth: 0,
            plotShadow: false
        }, 
//Other char parameter comes here
}


   function (chart) {
            setInterval(function () {

                $.getJSON("S14.aspx", function (data, textStatus) {
                    console.log(data);
                    $.each(data, function (index, wind) {
                        var point = chart.series[0].points[0],
                        newVal = wind;
                        point.update(newVal);
                    });

                });
            }, 3000);
        });

The code for JSON is

public string chartData1
    {
        get;
        set;

    }
    protected void Page_Load(object sender, EventArgs e)
    {
        List<double> _data = new List<double>();
        GetData();
        foreach (DataRow row in dt.Rows)
        {

            _data.Add((double)Convert.ToDouble(row["S11"]));

        }
        JavaScriptSerializer jss = new JavaScriptSerializer();
        chartData1 = jss.Serialize(_data);

    }

My JSON looks like

[1387204961992.4268,72]

Well the problem is that the dial of gauge is not moving according to the last values i need to refresh the page for that. I know this is happening because the GetData function is being executed only one time. I am stuck here.

How do I get the dial move according to the last values updates in the database?

Answer 1

Try to place this part of code

setInterval(function() {
    $(function() {
    $.getJSON('S12.aspx', function(data) {
        $.each(data, function(val) {
        if (val !== null)
        {
        var point = chart.series[0].points[0];
            point.update(val);
        }
        });
    });
    })
},2000)

Inside callback chart, like here: http://www.highcharts.com/demo/gauge-speedometer

If you receive any errors,please attach.