Добавление рядов динамических данных к диаграммам High

×212414 ×123754

Я вызываю PageMethod в файле codebehind.aspx.cs, который возвращает мне массив строк [] в коде javascript на странице aspx. Проблема заключается в том, что массив строк возвращает время (значение оси X), данные/имя (Y Значение оси), Тип (Определяет тип диаграммы (Сплайн или Столбец)) из ВЕБ-СЛУЖБЫ. Я использую эти данные для динамического добавления серий на диаграмму. Используя функцию chart.AddSeries(), но я не могу этого сделать.

Может ли кто-нибудь помочь мне, как это сделать, и после этого я хочу добавить очки в конкретную серию.

Обратите внимание, что я буду отображать типы {Spline и Column} на одной и той же диаграмме.

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

javascript dynamic updates highcharts spline
person MANi.    schedule 21.05.2012    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Это то, что я сделал, и работает как шарм. Кстати, поскольку вы упомянули страницу aspx, почему бы вам просто не купить библиотеку dot net highcharts? Это делает жизнь намного проще, если вы фанат сети!

Сначала я создаю диаграмму с 5 элементами, а затем использую «итерированную» сериализованную строку JSON для передачи данных на сторону клиента. Обход элементов дает мне динамическую живую диаграмму!

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

Вы можете добавить столько серий, сколько захотите; вы можете использовать цикл, если это необходимо, и тот же код, который я добавил в качестве функции, можно использовать для создания диаграммы полностью в Javascript.

person AT_    schedule 21.05.2012