json - streaming multiple series to highcharts -



json - streaming multiple series to highcharts -

i'm using websockets stream valid json highcharts.js. goal chart few lines simultaneously on same graph. json, control, contains info 4-16 series (called parsers) i'd overlay highcharts. illustration of json:

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

i can single line graph, combined single series. i'd dynamically adjust series based on number of parsers i'm monitoring. if json contains info 3 parsers, posted above, i'd see 3 lines automatically update every second.

as can see, can 1 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 info = 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 realtime updates' }, xaxis: { type: 'date' }, series: [{ name: 'series', data: [] }] }); });

can help me multiple series dynamically display in highcharts.js?

the general thought should each series set it's id. cna series way: chart.get(id). if have series, add together point series, if not, create new one, this: http://jsfiddle.net/9fkjc/8/

var self = this; info = [{ "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 exists series.addpoint(item, redrawval, series.data.length > 25); } else { // new series self.addseries({ data: [item], id: item.name }); } });

json dynamic highcharts series

Comments

Popular posts from this blog

php - Android app custom user registration and login with cookie using facebook sdk -

django - Access session in user model .save() -

php - .htaccess Multiple Rewrite Rules / Prioritizing -