javascript - How-to Dynamic update a chart via socket.io and slide chart view as a sliding window? -
could me figure out missing on showing last x samples in chart, please?
looking @ this example , this thread, developing simple page receives samples server via socket.io , plots last 10 samples. however, not working , struggling figure out missing.
the server.js simple samples generator:
var app = require('express')(); var http = require('http').server(app); var io = require('socket.io')(http); app.get('/', function (req, res) { res.sendfile('index.html'); }); // on connection event. io.on('connection', function (socket) { console.log('a user connected'); socket.on('disconnect', function () { console.log('user disconnected'); // todo (how-to) release connection (?) }); var max = 100; // scale samples 0 100. // generate random samples. setinterval(function () { var x = (new date()).gettime(), // current time y = math.floor((math.random() * max) + 1); socket.emit('chart_data', { x: x, y: y }); console.info("emitted: [" + x + "," + y + "]"); }, 2000); //update every sec. }); http.listen(3000, function () { console.log('listening on *:3000'); }); the html file include such script handle plot:
$(function() { highcharts.setoptions({ global: { useutc: false } }); // instantiate chart object plots samples. var graph = new highcharts.chart('graph_container', { chart: { type: 'spline', animation: highcharts.svg, // don't animate in old ie marginright: 10, events: { load: function () { // set updating of chart on each sample var series = this.series[0]; socket.on('chart_data', function (sample) { //add chart data series series.addpoint([sample.x, sample.y], true, false); }); } } }, title: { text: 'live random data' }, xaxis: { type: 'datetime', tickpixelinterval: 150 }, yaxis: { title: { text: 'value' }, plotlines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { formatter: function () { return '<b>' + this.series.name + '</b><br/>' + highcharts.dateformat('%h:%m:%s', this.x) + '<br/>' + highcharts.numberformat(this.y, 2); } }, legend: { enabled: false }, exporting: { enabled: false }, series: [{ name: 'random data', data: (function () { // generate array of random data var data = [], time = 0, i; socket.on('chart_data', function (sample) { //add chart data series time = sample.x; (i = -19; <= 0; += 2) { data.push({ x: time + }); } }); return data; }()) }] }); }); i brand new node.js, believe mistake pushing samples without y in "data.push". however, plot working, without "sliding window" of last x samples (e.g. 10).
does have suggestion let "sliding window" work, please?
you should emit 2 events - 1 data initialisation e.g. sample of 10 points, , second - point fetching in time interval.
you should not initialise data in way in line series.data = (function () ... instead move initialisation on load event , use series.setdata.
your series should this:
series: [{ name: 'random data', data: [] }] and load event this:
events: { load: function () { var series = this.series[0]; var socket = io.connect('http://localhost:3000'); socket.on('chart_data_init', function (sample) { series.setdata(sample.data); }); socket.on('chart_data', function (sample) { //add chart data series series.addpoint([sample.x, sample.y], true, false); }); } } then modify server file, need add chart_data_init emission initialised data
var initdata = (function () { var data = [], = 0, time = new date().gettime() - 2000 * 10; (; < 10; i++) { data.push({ x: time + * 2000, y: math.floor((math.random() * max) + 1) }); } return data; })(); socket.emit('chart_data_init', { data: initdata }); you have have data sorted in ascending order - otherwise highcharts not render data correctly.
files
index.html
<html> <head> <script src="http://localhost:3000/socket.io/socket.io.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script> </head> <body> <div id="graph_container" style="min-width: 400px; height: 400px; margin: 0 auto"></div> <script> // instantiate chart object plots samples. console.log var graph = new highcharts.chart('graph_container', { chart: { type: 'spline', animation: highcharts.svg, // don't animate in old ie marginright: 10, events: { load: function () { // set updating of chart on each sample var series = this.series[0]; var socket = io.connect('http://localhost:3000'); socket.on('chart_data_init', function (sample) { series.setdata(sample.data); }); socket.on('chart_data', function (sample) { //add chart data series series.addpoint([sample.x, sample.y], true, false); }); } } }, title: { text: 'live random data' }, xaxis: { type: 'datetime', tickpixelinterval: 150 }, yaxis: { title: { text: 'value' }, plotlines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { formatter: function () { return '<b>' + this.series.name + '</b><br/>' + highcharts.dateformat('%h:%m:%s', this.x) + '<br/>' + highcharts.numberformat(this.y, 2); } }, legend: { enabled: false }, exporting: { enabled: false }, series: [{ name: 'random data', data: [] }] }); </script> </body> </html> server.js
var app = require('express')(); var http = require('http').server(app); var io = require('socket.io')(http); app.get('/', function(req, res){ res.sendfile('index.html'); }); io.sockets.on('connection', function (socket) { console.log('a user connected'); socket.on('disconnect', function () { console.log('user disconnected'); // todo (how-to) release connection (?) }); var max = 100; // scale samples 0 100. var initdata = (function () { var data = [], = 0, time = new date().gettime() - 2000 * 10; (; < 10; i++) { data.push({ x: time + * 2000, y: math.floor((math.random() * max) + 1) }); } return data; })(); socket.emit('chart_data_init', { data: initdata }); // generate random samples. setinterval(function () { var x = (new date()).gettime(), // current time y = math.floor((math.random() * max) + 1); socket.emit('chart_data', { x: x, y: y }); console.info("emitted: [" + x + "," + y + "]"); }, 2000); //update every sec. }); http.listen(3000, function(){ console.log('listening on *:3000'); //jalankan server di port 3000 }); 
Comments
Post a Comment