score:0

Accepted answer

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>

score:2

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.


Related Query

More Query from same tag