Live Update multiple charts single web page

[saturno]

Hello all,

With help of Lawrence and several related questions about this topic, I have a working example web page with a single chart that is updated through websockets.
This chart plots 4 variables (temperature, humidity, dewpoint and battery) of one wireless sensor and it is working as expected for one chart.
As I have four sensors in different places, I would like to show their readings in the same webpage. At this moment all sensors have the same capabilities so the chart template/options I already have should be the same for the remaining.
My problem is that I can't seem to figure how can I extend what I have to show all readings from different sensors without repeating the code from the first one to all sensors.
Since they are equal, this should be straight forward to draw equal charts in different containers.

The webpage receives a message form a websocket with the timestamp and the four readings I need:

Code: Select all

{ "id": "sens15", "v": [ 1418132839258, 18.9, 55.5, 9.8, 4.876 ] }

I already identify the sensor it came from with:

Code: Select all

if(sID == "sens03"){chartAddPoint(msg.v);}

Then the {chartAddPoint(msg.v) goes like this:

Code: Select all

function chartAddPoint(point) {
		var series = chart.series[0],
		shift = series.data.length > 20;
		var values = eval(point);
		chart.series[0].addPoint([values[0], values[1]], false, shift);
                ....
		chart.redraw();
	}

And

Code: Select all

$(function() {
		chart = new Highcharts.Chart({
			chart: {
				renderTo: 'container',
				defaultSeriesType: 'spline',
			},
			title: {
				text: 'sensor' // should identify the sensor
			},
			xAxis: {
				type: 'datetime',
				tickPixelInterval: 150,
				maxZoom: 20 * 1000
			},
			yAxis: {
				minPadding: 0.2,
				maxPadding: 0.2,
				title: {
					text: 'Valor',
					margin: 80
				}
			},
			series: [{
				name: 'Temp.',
				data: []
			}, {
				name: 'Hum',
				data: []
			}, {
				name: 'DewP.',
				data: []
			},  {
				name: 'Bat.',
				data: []
			}]
		});	
	});

Since the data from all sensors is the same I should be able to reuse almost everything but the container.
I would like to do this with code reuse in mind and extensibility in mind since now there are only four sensors, but their number can grow to 15/20 at least.

Can anyone give me some pointers?
Thank you very much.

[KacperMadej]

You can copy object that is used as options for chart to render more the same charts.
Example: http://jsfiddle.net/tbpzwd2a/

Additionally you can read more about setting options in General Documentation: http://www.highcharts.com/docs/getting- ... et-options

[saturno]

Hi Kacper,

With you JSFIDDLE suggestion I can actually see four containers. Unfortunately I can't push any data into none of them...
The function I use to add new data points as they arrive via websockets is:

Code: Select all

function chartAddPoint(point) {
	var series = chart.series[0],
	shift = series.data.length > 20;
	var values = eval(point);
	chart.series[0].addPoint([values[0], values[1]], false, shift);
	chart.series[1].addPoint([values[0], values[2]], false, shift);
	chart.series[2].addPoint([values[0], values[3]], false, shift);
	chart.series[3].addPoint([values[0], values[4]], false, shift);
	chart.redraw();
}

Since every sensor reads a different location, different data should be pushed into different chart.
Should I repeat the above function for every single chart or there is any better solution? I mean: Considering you example, how can I push new data into a specific chart? (i.e.: data from sensor 3 into chart nr. 3)

Thank you for your help

[KacperMadej]

You can push data the same as in case of one chart. You could call function for every chart.
Example: http://jsfiddle.net/tbpzwd2a/1/

[saturno]

Hi Kacper,

Now I got it thanks.
I needed to do some changes since my function chartAddPoint(point) isn't inside the $(function () but now all charts are correctly updated.
One last question if you don't mind: I need to apply each chart a different title.
I already removed title reference inside the shared chart definition and tried to set it below when extending their definition but no avail.
Below is the only way (which is completely wrong) I managed to set the chart title for the first chart. Unfortunately only the first chart appears with the new title (the other three don't show ). Also even the first chart is not updated when data is updated.
Can you please take a look to see what am I doing wrong??

Code: Select all

optionsArray[0] = $.extend({}, options);
$('#container1').highcharts({title:{text: 'My custom title'}}, options);
chart1 = $('#container1').highcharts();

Thank you.

[KacperMadej]

Since you are using $.extend you can just extend base options.
Example: http://jsfiddle.net/tbpzwd2a/6/

[saturno]

Hello Kacper,

Thank you for your suggestion once more.
My intention was to define a name or ID to every chart based on a property from the message received i.e.: name or ID of the sensor that emitted the data. (Their real naming isn't even sequential )
In the message I receive via WebSockets with data, I can extract a sub string the correctly identifies the sensor. Can I pass it to create the chart title?

Thank you very much.

[KacperMadej]

Yes, you can - just like in my previous example I've added i variable to title text.

[saturno]

Hi Kacper,

Yes, that did the trick
I've extended my previous code from you example and all my charts are now updated individually with individual titles.
Thank you for all your help. I still have a lot to learn...

With best regards

[miguel007]

Hi Saturn. I am currently doing a free time job in which I am developing a system to monitor temperature in real time. Could you guide me?

[mateusz.b]

Hi miguel007,

Welcome to our forum. If you need any assistance with creating charts for your system or if you want to ask any Highcharts related questions, feel free to contact us anytime.

Regards!