yogsototh/elm-highchart
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

better organized code

Browse source
This commit is contained in:
Yann Esposito (Yogsototh) 2014-12-22 12:37:29 +01:00
parent 6d07db291e
commit 619645e8e0
2 changed files with 49 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
index.html
View file

@ -6,57 +6,8 @@
<script src="elm.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<!-- link rel="stylesheet" href="style.css" -->
</head>
<body></body>
<script>
var genPoint = function(v){return {x:(new Date()).getTime(),y:v};};
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);
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);
});
};
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
}]
};
var runningElmModule1 = Elm.fullscreen(Elm.Main);
$(function () { $('.chart').highcharts(conf); });
</script>
<script src="test.js"></script>
</html>

46
test.js Normal file
View file

@ -0,0 +1,46 @@
// 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);});