tsio_highchart_hist_rt_v.0.1.js

// tsio App proerties Advanced/External JavaScript Libraries Add
// http://code.highcharts.com/highcharts.js

// JSON payload for real time
// sending a len = 1 adds single point to chart series
// v always an array
{ "lng": 1, "sn": "ENO-Temp-Test", "v": [ 1456330983567, 17.7 ] }
// creates a new sereries as lng >1
{ "lng": 10, "sn": "ENO-Temp-Test", "v": [ { "value": 19, "jts": 1456057196556}, { "value": 19.1, "jts": 1456058242342}..]} 
// lng calc coudl be done client side 

/* Template HTML
<div id="container" style="width: 100%; margin:0 10px 0 -5px;" legend="office temps"></div>
*/

// Temaplte JS
Template[name].onRendered(function(){

	var chart = new Highcharts.Chart({
		chart: {
			marginRight: 20,
			renderTo: 'container',
			defaultSeriesType: 'spline',
		},
		title: {
			text: 'chart'
		},
		 xAxis: {
			type: 'datetime',
			dateTimeLabelFormats: {
				hour: '%H'
			},
			startOnTick: false,
			endOnTick: false,
			gridLineWidth: 1.5,
			gridLineColor: '#C0C0C0',
			tickInterval: 1 * 3600 * 1000,
			showLastLabel: true,
		},
		yAxis: {
			minPadding: 0.2,
			maxPadding: 0.2,
			title: {
				text: 'Value',
				margin: 12
			}
		},
		tooltip: {
			crosshairs: [true],
			formatter: function() {
				return this.series.name +' '+  Highcharts.numberFormat(this.y, 1) +'</b><br/>'+ Highcharts.dateFormat('%a %d %b %H:%M:%S', this.x) +'<br/>';
			}			
		},
		series: [{
			name: '',
			data: []
		}]
	});	
		
	Tracker.autorun(function(){
		msg = getFeed("chartStream");
		_lng = parseInt(msg.lng,10);
		console.log('cs:'+msg.sn+' lng:'+_lng);
	
		if(_lng===1){
		    var series = chart.series[0],
			shift = series.data.length > 20;						 // shift if the series is longer than 20
			chart.series[0].addPoint(eval(msg.v), true, shift); 	// add the point
			console.log('point:'+eval(msg.v)+' p:'+msg.v);
		}
		if(_lng>1){
			//var chart = $('#container').highcharts();
			//chart.series[0].name=sn;
			$(chart.legend.allItems[0].legendItem.element.childNodes).text(msg.sn);
			chart.series[0].name=msg.sn;
            chart.series[0].setData(msg.v);
		}
	});
	//chart Title
	var ldg =  	$('#container').attr('legend');
	chart.setTitle({text:  ldg});
});