потоковая передача нескольких серий в highcharts

Question

Я использую websockets для передачи действительного JSON на highcharts.js. Моя цель - наметить несколько строк одновременно на одном и том же графике. Контроллер JSON, который я контролирую, содержит данные 4-16 серии (называемые парсерами), которые я бы хотел наложить с помощью высоких диаграмм. Пример JSON:

[ 
    { 
     "y": 91, 
     "x": 1403640998, 
     "name": "parser1" 
    }, 
    { 
     "y": 184, 
     "x": 1403640998, 
     "name": "parser2" 
    }, 
    { 
     "y": 26, 
     "x": 1403640998, 
     "name": "parser3" 
    } 
] 

Я могу получить одну строку на график, но они объединяются в одну серию. Я бы хотел динамически настроить серию на основе количества парсеров, которые я контролирую. Если мой JSON содержит информацию для 3 парсеров, как я уже писал выше, я бы хотел, чтобы 3 строки автоматически обновлялись каждую секунду.

Как вы можете видеть, я могу получить только 1, чтобы показать.

Мой HTML

<script type="text/javascript"> 
$(function() { 
    $('#container').highcharts({ 
     chart: { 
      type: 'spline', 
      events: { 
       load: function() { 
        var $message = $('#message'); 
        var connection = new WebSocket('ws://x.x.x.x:8888/ws'); 
        var self = this; 

        connection.onmessage = function(event) { 
         var data = JSON.parse(event.data); 
         var series = self.series[0]; 
         var redrawVal = true; 
         var shiftVal = false; 
         if (series.data && series.data.length > 25) {shiftVal = true;} 

         var newseries = { 
          name: '', 
          x: 0, 
          y: 0 
         }; 


         $.each(data, function(i,item){ 
          newseries.name = item.name; 
          newseries.x = item.x; 
          newseries.y = item.y; 

          console.log(newseries) 
          series.addPoint(newseries, redrawVal, shiftVal); 

         }); 

        }; 
       } 
      } 
     }, 
     title: { 
      text: 'Using WebSockets for realtime updates' 
     }, 
     xAxis: { 
      type: 'date' 
     }, 
     series: [{ 
      name: 'series', 
     data: [] 
     }] 

    }); 
}); 

Может кто-то помочь мне получить несколько серий динамически отображать в highcharts.js?

Answer 1

Общая идея должна заключаться в том, что для каждой серии вы устанавливаете ее id. Тогда вы получите эту серию так: chart.get(id). Так что если у вас есть ряд, а затем добавить пункт к этой серии, если нет, то создать новый, так же, как это: http://jsfiddle.net/9FkJc/8/

  var self = this; 
      data = [{ 
       "y": 91, 
        "x": 1403640998, 
        "name": "parser1" 
      }, { 
       "y": 184, 
        "x": 1403640998, 
        "name": "parser2" 
      }, { 
       "y": 26, 
        "x": 1403640998, 
        "name": "parser3" 
      }]; 

      var series = self.series[0]; 
      var redrawVal = true; 

      $.each(data, function (i, item) { 
       var series = self.get(item.name); 
       if (series) { // series already exists 
        series.addPoint(item, redrawVal, series.data.length > 25); 
       } else { // new series 
        self.addSeries({ 
         data: [item], 
         id: item.name 
        }); 
       } 
      });