score:3

Accepted answer

I think there is a bug or something in the visual studio 2012 . I just paste the entire code on the new aspx page it it got working. I have not done anything else I just pasted the code on another page.

<script type="text/javascript">


        $(function () {
            $('#container1').highcharts({

                chart: {
                    type: 'gauge',
                    alignTicks: false,
                    plotBackgroundColor: null,
                    plotBackgroundImage: null,
                    plotBorderWidth: 0,
                    plotShadow: false
                },

                title: {
                    text: 'Pressure Meter'
                },

                pane: {
                    startAngle: -150,
                    endAngle: 150
                },

                yAxis: [{
                    min: 0,
                    max: 1000,
                    lineColor: '#339',
                    tickColor: '#339',
                    minorTickColor: '#339',
                    offset: -25,
                    lineWidth: 2,
                    labels: {
                        distance: -20,
                        rotation: 'auto'
                    },
                    tickLength: 5,
                    minorTickLength: 5,
                    endOnTick: false
                }, {
                    min: 0,
                    max: 1000,
                    tickPosition: 'outside',
                    lineColor: '#933',
                    lineWidth: 2,
                    minorTickPosition: 'outside',
                    tickColor: '#933',
                    minorTickColor: '#933',
                    tickLength: 5,
                    minorTickLength: 5,
                    labels: {
                        distance: 12,
                        rotation: 'auto'
                    },
                    offset: -20,
                    endOnTick: false
                }],

                series: [{
                    name: 'Pressure',
                    data: [80],
                    dataLabels: {
                        formatter: function () {
                            var psi = this.y,
                                bar = Math.round(psi / 14.50);
                            return '<span style="color:#339">' + psi + ' psi</span><br/>' +
                                '<span style="color:#933">' + bar + ' bar</span>';
                        },
                        backgroundColor: {
                            linearGradient: {
                                x1: 0,
                                y1: 0,
                                x2: 0,
                                y2: 1
                            },
                            stops: [
                                [0, '#DDD'],
                                [1, '#FFF']
                            ]
                        }
                    },
                    tooltip: {
                        valueSuffix: ' psi'
                    }
                }]

            },
        // Add some life
        function (chart) {
            setInterval(function () {

                $.getJSON("S12.aspx", function (data, textStatus) {

                    $.each(data, function (index, wind) {
                        var point = chart.series[0].points[0],
                        newVal = wind;
                        point.update(newVal);
                    });

                });
            }, 3000);
        });
        });


    </script>

score:2

In order for the chart to update, the browser somehow needs to request the latest data from the server. There are two ways it can do this:

  1. A page refresh - the whole page is fetched again, with the latest data.
  2. An Ajax request. This makes a request for just the data, without re-loading the entire page.

I presume you would like to update the chart without reloading the entire page. In order do to this, you need to find out about making ajax requests using jquery.

The highcharts site has some resources which will help you (e.g. http://www.highcharts.com/docs/working-with-data/preprocessing-live-data). You need to learn how to make an ajax call in javascript, and use the returned data to update your chart. You will also need to write the server side part which returns the ajax data. The example given is in php, but it should be fairly straight forward to do something similar in asp.net.

score:3

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.


Related Query

More Query from same tag