Skala wykresu Highchart z danymi JSON

Question

Jak wykreślić wykres Highchart z danymi JSON?

Pracuję nad wskaźnikiem highchart, udało mi się pokazać najnowsze dane z bazy danych. Kiedyś JavaScriptSerializer dla tego

kod jest ..

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

Kod dla JSON jest

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

    } 

Moje JSON wygląda

[1387204961992.4268,72]

dobrze Problem polega na tym, że t wskaźnik tarczy nie porusza się zgodnie z ostatnimi wartościami, które muszę odświeżyć stronę. Wiem, że tak się dzieje, ponieważ funkcja GetData jest wykonywana tylko jeden raz. Utknąłem tutaj.

Jak uzyskać ruch pokrętła zgodnie z ostatnimi aktualizacjami wartości w bazie danych?

Answer 1

Myślę, że istnieje błąd lub coś w visual studio 2012. Właśnie wklejam cały kod na nową stronę aspx, która działała. Nie zrobiłem nic więcej, tylko wkleiłem kod na innej stronie.

<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> 

Answer 2

Aby aktualizacja wykresu była możliwa, przeglądarka musi w jakiś sposób zażądać najnowszych danych z serwera. Można to zrobić na dwa sposoby:

1. Odświeżenie strony - cała strona jest pobierana ponownie, z najnowszymi danymi.
2. Prośba o Ajax. To sprawia, że ​​żądanie tylko danych, bez ponownego ładowania całej strony.

Zakładam, że chcesz zaktualizować wykres bez ponownego ładowania całej strony. Aby to zrobić, musisz dowiedzieć się o tworzeniu zapytań ajaxowych za pomocą jquery.

Witryna highcharts ma pewne zasoby, które mogą Ci pomóc (np. http://www.highcharts.com/docs/working-with-data/preprocessing-live-data). Musisz nauczyć się wywoływania ajax'a w javascriptach i używać zwróconych danych do aktualizacji swojego wykresu. Będziesz także musiał napisać część po stronie serwera, która zwraca dane ajax. Podany przykład jest w php, ale powinno być dość proste, aby zrobić coś podobnego w asp.net.

Answer 3

Staraj się umieścić tę część kodu

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) 

Wewnątrz wykresie zwrotnej, jak tutaj: http://www.highcharts.com/demo/gauge-speedometer

Jeśli otrzymasz jakieś błędy, proszę załączyć.