47 lines
1.4 KiB
JavaScript
47 lines
1.4 KiB
JavaScript
|
// JS Code
|
||
|
|
|
||
|
|
// The function
|
||
|
|
var updateSerie = function(){
|
||
|
|
var series=this.series;
|
||
|
|
runningElmModule1.ports.point.subscribe(function(newpoint){
|
||
|
|
console.log(newpoint);
|
||
|
|
var p0 = [newpoint[0],newpoint[1][0]];
|
||
|
|
var p1 = [newpoint[0],newpoint[1][1]];
|
||
|
|
series[0].addPoint(p0,true,true);
|
||
|
|
series[1].addPoint(p1,true,true);
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
// generate n+1 points from n seconds in the past to now
|
||
|
|
var genPoints = function(n) { var serie = [];
|
||
|
|
var time = (new Date()).getTime();
|
||
|
|
var i;
|
||
|
|
for (i = -1 * n; i<=0; i++) {
|
||
|
|
serie.push({x: time + i*1000, y: Math.random()});
|
||
|
|
}
|
||
|
|
return serie;
|
||
|
|
}
|
||
|
|
|
||
|
|
var initDatas = genPoints(20);
|
||
|
|
|
||
|
|
// highchart configuration
|
||
|
|
var conf = {
|
||
|
|
title: {text: 'Reactive data'},
|
||
|
|
xAxis: {type: 'datetime'},
|
||
|
|
yAxis: {text: 'value'},
|
||
|
|
legend: {enabled: false},
|
||
|
|
exporting: {enabled: false},
|
||
|
|
chart: {type: 'spline', events: {load: updateSerie}},
|
||
|
|
series: [
|
||
|
|
{name: 'Reactive X Mouse', data: initDatas},
|
||
|
|
{name: 'Reactive Y Mouse', data: initDatas}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
|
||
|
|
// load the elm renderer
|
||
|
|
// The elm renderer create a div of class "chart"
|
||
|
|
var runningElmModule1 = Elm.fullscreen(Elm.Main);
|
||
|
|
// load the highchart in all class chart
|
||
|
|
$(function(){$('.chart').highcharts(conf);});
|
||
|
|
|