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 Signal
import Mouse
import Time (fps)
import Window
import Time (fps,timestamp,Time)
import Html (..)
import Html.Attributes (..)
htmlToElement w h el = container w h middle (toElement w h el)
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.map fst Mouse.position
port point : Signal (Time,(Int,Int))
port point = timestamp Mouse.position

38
index.html
View file

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