better organized code
This commit is contained in:
parent
6d07db291e
commit
619645e8e0
2 changed files with 49 additions and 52 deletions
55
index.html
55
index.html
|
@ -5,58 +5,9 @@
|
||||||
<title>Elm Highcharts</title>
|
<title>Elm Highcharts</title>
|
||||||
<script src="elm.js"></script>
|
<script src="elm.js"></script>
|
||||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.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/highcharts.js"></script>
|
||||||
<script src="http://code.highcharts.com/modules/exporting.js"></script>
|
<!-- link rel="stylesheet" href="style.css" -->
|
||||||
|
|
||||||
|
|
||||||
<!-- link rel="stylesheet" href="style.css" -->
|
|
||||||
</head>
|
</head>
|
||||||
<body></body>
|
<body></body>
|
||||||
<script>
|
<script src="test.js"></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>
|
|
||||||
</html>
|
</html>
|
||||||
|
|
46
test.js
Normal file
46
test.js
Normal 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);});
|
||||||
|
|
Loading…
Reference in a new issue