Live multiple series with highchart

问题:

I am trying to display 10 series simultaneously on highcharts. With the following code.

function requestData() {
    $.ajax({
        url: 'Default3.aspx',
        dataType: 'json',
        error: function (point) {
            var series = chart.series[10],

                shift = series.data.length > 50; // shift if the series is longer than 20


            chart.series[0].addPoint([0, 1], true, true);
            chart.series[1].addPoint([0, 2], true, true);
            chart.series[2].addPoint([0, 3], true, true);
            chart.series[3].addPoint([0, 4], true, true);
            chart.series[4].addPoint([0, 5], true, true);
            chart.series[5].addPoint([0, 6], true, true);
            chart.series[6].addPoint([0, 7], true, true);
            chart.series[7].addPoint([0, 8], true, true);
            chart.series[8].addPoint([0, 9], true, true);
            chart.series[9].addPoint([0, 10], true, true);


            // call it again after one second
            setTimeout(requestData, 5000);
        },
        success: function (point) {
            var series = chart.series[10],
                shift = series.data.length > 50; // shift if the series is longer than 20

            // add the point
           // chart.series[0].addPoint(eval(point), true, shift);
            chart.series[0].addPoint([0, 1], true, true);
            chart.series[1].addPoint([0, 2], true, true);
            chart.series[2].addPoint([0, 3], true, true);
            chart.series[3].addPoint([0, 4], true, true);
            chart.series[4].addPoint([0, 5], true, true);
            chart.series[5].addPoint([0, 6], true, true);
            chart.series[6].addPoint([0, 7], true, true);
            chart.series[7].addPoint([0, 8], true, true);
            chart.series[8].addPoint([0, 9], true, true);
            chart.series[9].addPoint([0, 10], true, true);


            // call it again after one second
            setTimeout(requestData, 5000);
        },
        cache: false
    });
}

$(document).ready(function () {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            defaultSeriesType: 'line',
            events: {
                load: requestData
            }
        },
        title: {
            text: 'Sensor Data Vs. Time'
        },
        xAxis: {
            type: 'datetime',
            tickPixelInterval: 150,
            maxZoom: 20 * 1000
        },
        yAxis: {
            minPadding: 0.2,
            maxPadding: 0.2,
            title: {
                text: 'Value',
                margin: 80
            }
        },

        series: [{

            data: []
        },{
            data: []
        }, {
            data: []
        }, {
            data: []
        }, {
            data: []
        }, {
            data: []
        }, {
            data: []
        }, {
            data: []
        }, {
            data: []
        }, {
            data: []

        }]

    });
});

Legends of the series is coming on the chart but it is not displaying the data.

回答1:

I advice replace this:

 chart.series[0].addPoint([0, 1], true, true);
 //other points as first
 chart.series[9].addPoint([0, 10], true, true);

with

 chart.series[0].addPoint([0, 1], false, true);
 //other points as first
 chart.series[9].addPoint([0, 10], true, true);

Points cannot be added to the empty chart, dynamically, but you can set null value on data like here http://jsfiddle.net/g2tka/1/ or use addSeries.

回答2:

I did some modification on trial and error basis and got it working, Actually i have to use eval function which I was not using previously. Here is the answer

JavaScript

function requestData() {
    $.ajax({
        url: 'Default3.aspx',
        dataType: 'json',
        error: function (point) {
            var series = chart.series[0],

                shift = series.data.length > 50; // shift if the series is longer than 20


            var values = eval(point);
            chart.series[0].addPoint([values[0], values[1]], true, shift);
            chart.series[1].addPoint([values[0], values[2]], true, shift);
            chart.series[2].addPoint([values[0], values[3]], true, shift);
            chart.series[3].addPoint([values[0], values[4]], true, shift);
            chart.series[4].addPoint([values[0], values[5]], true, shift);
            chart.series[5].addPoint([values[0], values[6]], true, shift);
            chart.series[6].addPoint([values[0], values[7]], true, shift);
            chart.series[7].addPoint([values[0], values[8]], true, shift);
            chart.series[8].addPoint([values[0], values[9]], true, shift);
            chart.series[9].addPoint([values[0], values[10]], true, shift);

            // call it again after defined seconds
            setTimeout(requestData, 5000);
        },
        success: function (point) {
            var series = chart.series[0],
                shift = series.data.length > 50; // shift if the series is longer than 20

            // add the point
           // chart.series[0].addPoint(eval(point), true, shift);
            var values = eval(point);
            chart.series[0].addPoint([values[0], values[1]], true, shift);
            chart.series[1].addPoint([values[0], values[2]], true, shift);
            chart.series[2].addPoint([values[0], values[3]], true, shift);
            chart.series[3].addPoint([values[0], values[4]], true, shift);
            chart.series[4].addPoint([values[0], values[5]], true, shift);
            chart.series[5].addPoint([values[0], values[6]], true, shift);
            chart.series[6].addPoint([values[0], values[7]], true, shift);
            chart.series[7].addPoint([values[0], values[8]], true, shift);
            chart.series[8].addPoint([values[0], values[9]], true, shift);
            chart.series[9].addPoint([values[0], values[10]], true, shift);


            // call it again after defined seconds
            setTimeout(requestData, 5000);
        },
        cache: false
    });
}

$(document).ready(function () {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            defaultSeriesType: 'spline',
            events: {
                load: requestData
            }
        },
        title: {
            text: 'Sensor Data Vs. Time'
        },
        xAxis: {
            type: 'datetime',
            tickPixelInterval: 150,
            maxZoom: 20 * 1000
        },
        yAxis: {
            minPadding: 0.2,
            maxPadding: 0.2,
            title: {
                text: 'Value',
                margin: 80
            }
        },

        series: [{
           name: 'Pressure 1 (PSI)',
            data: []
        }, {
            name: 'Flow 1 (GPM)',
            data: []
        }, {
            name:'Temperature 1 (C)',
            data: []
        }, {
            name: 'Speed 1 (RPM)',
            data: []
        }, {
            name: 'Power 1 (kW)',
            data: []
        }, {
            name:'Pressure 2 (PSI)',
            data: []
        }, {
            name:'Flow 2 (GPM)',
            data: []
        }, {
            name:'Temperature 2 (C)',
            data: []
        }, {
            name: 'Speed 2 (RPM)',
            data: []
        }, {
            name: 'Power 2 (kW)',
            data: []

        }]

    });
});

Server Side Code (C#)

public partial class Default3 : System.Web.UI.Page
{



    public DataTable dt = new DataTable();
    public string DATA;
    List<string> hidXCategories11 = new List<string>();

    public string chartData
    {
        get;
        set;

    }
    protected void Page_Load(object sender, EventArgs e)
    {


        GetData();
        var epoch = new DateTime(1970, 1, 1, 0, 0, 0, DateTimeKind.Utc);
        var timeDiff = DateTime.Now - new DateTime(1970, 1, 1);
        var totaltime = timeDiff.TotalMilliseconds;
        List<double> _data = new List<double>();
        foreach (DataRow row in dt.Rows)
        {
            _data.Add(totaltime);
            _data.Add((double)Convert.ToDouble(row["S11"]));
            _data.Add((double)Convert.ToDouble(row["S12"]));
            _data.Add((double)Convert.ToDouble(row["S13"]));
            _data.Add((double)Convert.ToDouble(row["S14"]));
            _data.Add((double)Convert.ToDouble(row["S15"]));
            _data.Add((double)Convert.ToDouble(row["S21"]));
            _data.Add((double)Convert.ToDouble(row["S22"]));
            _data.Add((double)Convert.ToDouble(row["S23"]));
            _data.Add((double)Convert.ToDouble(row["S24"]));
            _data.Add((double)Convert.ToDouble(row["S25"]));
        }

        JavaScriptSerializer jss = new JavaScriptSerializer();
        chartData = jss.Serialize(_data);
        Response.Write(chartData);

    }


        private void GetData()
        {
            StringBuilder str = new StringBuilder();
            SqlConnection con = new SqlConnection("Data Source=localhost\\SQLEXPRESS;Initial Catalog=MyData;Integrated Security=SSPI");
            SqlDataAdapter adp = new SqlDataAdapter("select top 1 * from MyTable order by Id desc ", con);

            adp.Fill(dt);


        }

    }

HTML (.aspx) Code

<script src="JavaScript/highcharts.js"></script>
<script src="JavaScript/exporting.js"></script>

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