Adding Dynamic Data Series to High charts

×212414 ×123754

I am calling a PageMethod in codebehind.aspx.cs file which returns me a string array[] in the javascript code in the aspx page the problem at hand is that string array returns Time(X axis-Value),Data/Name(Y axis Value),Type(Defines the type of chart (Spline or Column)) from a WEB SERVICE. I am using that data to add series dynamically to the chart. Using the function chart.AddSeries() but I am unable to do so.

Can anyone please guide me how to do that and upon doing that I want to add points to the particular Series.

Please Note that I would be displaying to types{Spline and Column} on the same chart.

<script type="text/javascript">


     alert("Bingo");


     $(function () {
         $(document).ready(function () {

             Highcharts.setOptions({

                 global: {

                     useUTC: false

                 }

             });



             var chart;

             chart = new Highcharts.Chart({

                 chart: {

                     renderTo: 'ltrChart',

                     type: 'spline',

                     marginRight: 10,

                     events: {

                         load: function () {


                             PageMethods.GetSingleValue(function (result) {

                                 var Name = new Array();
                                 var Type = new Array();
                                 var Data = new Array();
                                 var Time = new Array();

                                 var Ser = chart.series;

                                 for (var i = 0; i < 6; i++) {
                                     Type[i] = result[i].split('-')[0];
                                     Name[i] = result[i].split('-')[1];
                                     Data[i] = result[i].split('-')[2];
                                     Time[i] = result[i].split('-')[3];

   chart.addSeries({ name :Name[i], data : [ [Time[i], Data[i]] ] }, true, true);




                                     /* Test Method To ensure data Fetching */
                                     // alert(Type[i] + Name[i] + Data[i] + Time[i]);
                                     // alert(result[i]);


                                 }

                             })



                             //console.log(typeof PageMethods.GetSingleValue);
                             // PageMethods.GetSingleValue();
                             setInterval("PageMethods.GetSingleValue()", 5000);







                         }

                     }

                 },

                 title: {

                     text: 'Live random data'

                 },

                 xAxis: {

                 //type: 'datetime',

                 //tickPixelInterval: 150

             },

             yAxis: {

                 title: {

                     text: 'Value'

                 },

                 plotLines: [{

                     value: 0,

                     width: 1,

                     color: '#808080'

                 }]

             },

             tooltip: {

                 formatter: function () {

                     return '<b>' + this.series.name + '</b><br/>' +

                        Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +

                        Highcharts.numberFormat(this.y, 2);

                 }

             },

             legend: {

                 enabled: false

             },

             exporting: {

                 enabled: false

             },

             series: [{

                 name: 'Test Data',

                 data: [[10, 50], [15, 55]]

             }]

         });

     });

 });  
   </script>

Answers:

Answer

This is what I've done and works like a charm. On a side-note, since you mentioned aspx page, why don't you just buy the dot net highcharts library? It makes life a lot easier if you're a dot net fan!

I am initially creating a chart with 5 elements, and then using the "iterated" JSON serialized string to pass data to client-side. Traversing the elements gives me a dynamic live chart!

Highcharts chart = new Highcharts("livechart")
        .InitChart(new Chart
        {
            Events = new ChartEvents { Load = "ChartEventsLoad" }
        })
        .SetSeries(initialSeries)
        .SetXAxis(new XAxis { Categories = lsst.ToArray() })
        .AddJavascripVariable("iterated", iterateData.ToString())
        .AddJavascripVariable("index", "5")
        .AddJavascripFunction("ChartEventsLoad",
        @"// set up the updating of the chart each 5 seconds
        var result = iterated;
        var theseries = eval(result); // De-serializing the JSON object
        var loopseries = function() {
        var sseries = livechart.series[0]
           ,shift = sseries.data.length > 5; // shift if the series is longer than 5;
        sseries.addPoint(theseries[0].data[index], true, shift);
        var sseries1 = livechart.series[1]
        sseries1.addPoint(theseries[1].data[index], true, shift);
        index++; };
        setInterval(loopseries, 5000);")

You can add as many series as you like; you can use a loop if needed and the same code I've added as a function can be used to create the chart completely in Javascript.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.