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

reactive to mouse pos

Browse source
This commit is contained in:
Yann Esposito (Yogsototh) 2014-12-22 12:26:05 +01:00
parent b40a327621
commit 6d07db291e
2 changed files with 28 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
Test.elm
View file

@ -1,15 +1,22 @@
import Graphics.Element (Element,container, middle,widthOf,heightOf) import Graphics.Element (Element,container, middle,widthOf,heightOf)
import Signal import Signal
import Mouse import Mouse
import Time (fps) import Window
import Time (fps,timestamp,Time)
import Html (..) import Html (..)
import Html.Attributes (..)
htmlToElement w h el = container w h middle (toElement w h el) htmlToElement w h el = container w h middle (toElement w h el)
main : Signal Element main : Signal Element
main = Signal.map view (Signal.foldp (+) 0 (fps 10)) main = Signal.map2 view Window.dimensions
(Signal.foldp (+) 0 (fps 10))
view t = htmlToElement 100 100 <| text ("coucou " ++ toString t) view dim t = htmlToElement ((fst dim) - 50) ((snd dim) - 50) <|
div [class "chart"] [text ("Loading... " ++ toString t)]
port xpos : Signal Int port xpos : Signal Int
port xpos = Signal.map fst Mouse.position port xpos = Signal.map fst Mouse.position
port point : Signal (Time,(Int,Int))
port point = timestamp Mouse.position

40
index.html
View file

@ -11,21 +11,9 @@
<!-- link rel="stylesheet" href="style.css" --> <!-- link rel="stylesheet" href="style.css" -->
</head> </head>
<body> <body></body>
<h1>TEST</h1>
<p>This is a test.</p>
<div id="container">Loading...</div>
<div id="first"></div>
<div id="second"></div>
</body>
<script> <script>
var div1 = document.getElementById('first'); var genPoint = function(v){return {x:(new Date()).getTime(),y:v};};
var div2 = document.getElementById('second');
var runningElmModule1 = Elm.embed(Elm.Main,div1);
var runningElmModule2 = Elm.embed(Elm.Main,div2);
var genPoint = function(v){ return { x: (new Date()).getTime(), y: v};
}
var genPoints = function(n) { var serie = []; var genPoints = function(n) { var serie = [];
var time = (new Date()).getTime(); var time = (new Date()).getTime();
var i; var i;
@ -37,9 +25,14 @@
var initDatas = genPoints(20); var initDatas = genPoints(20);
var updateSerie = function(){ var updateSerie = function(){
var series=this.series[0]; var series=this.series;
runningElmModule1.ports.xpos.subscribe(function(x){ runningElmModule1.ports.point.subscribe(function(newpoint){
series.addPoint(genPoint(x),true,true); }); 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 = { var conf = {
@ -53,14 +46,17 @@
events: {load: updateSerie}, events: {load: updateSerie},
}, },
series: [{ series: [{
name: 'Reactive Data', name: 'Reactive X Mouse',
data: initDatas data: initDatas
}] },{
name: 'Reactive Y Mouse',
data: initDatas
}]
}; };
$(function () { var runningElmModule1 = Elm.fullscreen(Elm.Main);
$('#container').highcharts(conf);
}); $(function () { $('.chart').highcharts(conf); });
</script> </script>
</html> </html>