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
Post a Comment