streaming multiple series to highcharts - json

Question

I'm using websockets to stream valid JSON to highcharts.js. My goal is to chart a few lines simultaneously on the same graph. The JSON, which I control, contains data 4-16 series (called parsers) that I'd like overlay with highcharts. Example of JSON:
[
{
"y": 91,
"x": 1403640998,
"name": "parser1"
},
{
"y": 184,
"x": 1403640998,
"name": "parser2"
},
{
"y": 26,
"x": 1403640998,
"name": "parser3"
}
]
I can get a single line to graph, but they get combined into a single series. I'd like to dynamically adjust the series based on the number of parsers I'm monitoring. If my JSON contains information for 3 parsers, like I posted above, I'd like to see 3 lines automatically update every second.
As you can see, I can only get 1 to show.
My 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: []
}]
});
});
Can someone help me get multiple series to dynamically display in highcharts.js?

Answer 1

The general idea should be that for each series you set it's id. Then you cna get that series this way: chart.get(id). So if you have series, then add point to that series, if not, then create new one, just like this: 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
});
}
});