实时HighChart不显示数据

Question

I am trying the code of highstocks which is given below

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

and displaying it in to the container

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

The code behind is

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

Here I have created a JSON and I am transferring it to the javascript for highchart.

The problem I am having is that it is showing only one point. The values which are also updated in the database it is not updating in the chart.

What is wrong with it?

Answer 1

In your code I can see this:

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

I guess, that chartData variable is where you have stored new point? At least you expect to have there. However your variable chartData is assigned in HTML once, after page is loaded from server. That you will update value on server, doesn't mean value get updated on client side.

I advice to use AJAX calls, for example: http://www.highcharts.com/studies/live-server.htm (see sources for code example).