다중 시리즈를 하이 차트로 스트리밍

Question

webboard를 사용하여 유효한 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 
        }); 
       } 
      });