Живая HighChart не отображающие данные

Question

Я пытаюсь код highstocks, который приводится ниже

<script type="text/javascript"> 


$(function() { 

       Highcharts.setOptions({ 
        global: { 
         useUTC: false 
        } 
       }); 

       // Create the chart 
       $('#container').highcharts('StockChart', { 
        chart: { 
         events: { 
          load: function() { 

           // set up the updating of the chart each second 
           var series = this.series[0]; 
           setInterval(function() { 
            var x = (new Date()).getTime(), // current time 
            y = <%=chartData%> 
            series.addPoint([x, y], true, true); 
           }, 1000); 
          } 
         } 
        }, 

        rangeSelector: { 
         buttons: [{ 
          count: 1, 
          type: 'minute', 
          text: '1M' 
         }, { 
          count: 5, 
          type: 'minute', 
          text: '5M' 
         }, { 
          type: 'all', 
          text: 'All' 
         }], 
         inputEnabled: false, 
         selected: 0 
        }, 

        title: { 
         text: 'Sensor Data' 
        }, 

        exporting: { 
         enabled: false 
        }, 

        series: [{ 
         name: 'Sensor Value', 
         data: (function() { 
          //generate an array of random data 
          var data = [], time = (new Date()).getTime(), i; 

          for (i = -999; i <= 0; i++) { 
           data.push([ 
            time + i * 1000, 
            <%= chartData%> 
           ]); 
          } 
          return data; 
         })() 
        }] 
       }); 

      }); 
     </script> 

и отображение его к контейнеру

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto; width: 733px;"></div> 

код за это

public string chartData 
    { 
     get; 
     set; 

    } 
    protected void Page_Load(object sender, EventArgs e) 
    { 
     GetData(); 
     List<int> _data = new List<int>(); 
     foreach (DataRow row in dt.Rows) 
     { 
      _data.Add((int)row["Id"]); 
     } 
     JavaScriptSerializer jss = new JavaScriptSerializer(); 
     chartData = jss.Serialize(_data); //this make your list in jSON format like [88,99,10] 
     Response.Write(chartData); 
    } 
    private void GetData() 
    { 
     StringBuilder str = new StringBuilder(); 
     SqlConnection con = new SqlConnection("Data Source=INBDQ2WK2LBCD2S\\SQLEXPRESS;Initial Catalog=MCAS;Integrated Security=SSPI"); 
     SqlDataAdapter adp = new SqlDataAdapter("select top 1 Id from Monitoring order by Id desc ", con); 
     adp.Fill(dt); 
    } 

Здесь я создал JSON, и я переношу его в javascript для highchart.

Проблема, которую я испытываю, заключается в том, что она показывает только одну точку. Значения, которые также обновляются в базе данных, не обновляются в диаграмме.

Что не так?

Answer 1

В своем коде я вижу это:

setInterval(function() { 
    var x = (new Date()).getTime(), // current time 
      y = <%=chartData%>; 
    series.addPoint([x, y], true, true); 
}, 1000); 

Я думаю, что chartData переменная, где вы сохранили новую точку? По крайней мере, вы ожидаете там. Однако ваша переменная chartData назначается в HTML один раз, после загрузки страницы с сервера. То, что вы будете обновлять значение на сервере, не означает, что значение будет обновляться на стороне клиента.

Я советую использовать вызовы AJAX, например: http://www.highcharts.com/studies/live-server.htm (см. Источники для примера кода).