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

working highchart example

Browse source
This commit is contained in:
Yann Esposito (Yogsototh) 2014-12-21 20:46:28 +01:00
parent 85e707ee1a
commit f6cf852deb
2 changed files with 62 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
Test.elm
View file

@ -1,5 +1,6 @@
import Graphics.Element (Element,container, middle,widthOf,heightOf)
import Signal
import Mouse
import Time (fps)
import Html (..)
@ -9,3 +10,6 @@ main : Signal Element
main = Signal.map view (Signal.foldp (+) 0 (fps 10))
view t = htmlToElement 100 100 <| text ("coucou " ++ toString t)
port xpos : Signal Int
port xpos = Signal.map fst Mouse.position

67
index.html
View file

@ -4,18 +4,67 @@
<meta charset="utf-8">
<title>Elm Highcharts</title>
<script src="elm.js"></script>
<link rel="stylesheet" href="style.css">
<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>
<h1>TEST</h1>
<p>This is a test.</p>
<div id="first"></div>
<div id="second"></div>
<h1>TEST</h1>
<p>This is a test.</p>
<div id="container">Loading...</div>
<div id="first"></div>
<div id="second"></div>
</body>
<script>
var div1 = document.getElementById('first');
var div2 = document.getElementById('second');
var runningElmModule1 = Elm.embed(Elm.Main,div1);
var runningElmModule2 = Elm.embed(Elm.Main,div2);
var div1 = document.getElementById('first');
var div2 = document.getElementById('second');
var runningElmModule1 = Elm.embed(Elm.Main,div1);
var runningElmModule2 = Elm.embed(Elm.Main,div2);
var position = 0;
var setpos = function(x) { console.log(x); position = x; }
runningElmModule1.ports.xpos.subscribe(setpos);
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 conf = {
title: {text: 'Reactive data'},
xAxis: {type: 'datetime'},
yAxis: {text: 'value'},
legend: {enabled: false},
exporting: {enabled: false},
chart: {
type: 'spline',
events: {load: function(){
var series = this.series[0];
setInterval(function(){
series.addPoint(genPoint(position),true,true);
},1000);}
},
},
series: [{
name: 'Reactive Data',
data: initDatas
}]
};
$(function () {
$('#container').highcharts(conf);
});
</script>
</html>