Rickshaw

Rickshawの紹介

Transcript

1. 3JDLTIBXͰ࡞Δ ϦΞϧλΠϜՄࢹԽΞϓϦ @bad_at_math 14೥3݄2೔೔༵೔
2. Rickshawͱ͸ 14೥3݄2೔೔༵೔
3. Rickshawͱ͸ w࣌ܥྻσʔλʹϑΥʔΧεͨ͠ɺEKT Λར༻ͨ͠+BWB4DSJQUͷπʔϧΩοτ 14೥3݄2೔೔༵೔
4. 14೥3݄2೔೔༵೔
5. 14೥3݄2೔೔༵೔
6. ௒؆୯ var g = new Rickshaw.Graph(); graph.render(); 14೥3݄2೔೔༵೔
7. ௒؆୯ var g = new Rickshaw.Graph(); graph.render(); Koredake desu K oredake desu 14೥3݄2೔೔༵೔
8. ௒؆୯ EKTͱ͸ͳΜͩͬͨͷ͔ 14೥3݄2೔೔༵೔
9. ॳظԽ • element : Ͳ͜΁ग़ྗ͢Δ͔ • width : ෯ • height : ߴ͞ • series : σʔλ഑ྻ 14೥3݄2೔೔༵೔
10. ॳظԽmore • series : ෳ਺ͷάϥϑσʔλͷ഑ྻ • { color : “blue”, data: [σʔλ഑ྻ] } 14೥3݄2೔೔༵೔
11. ॳظԽmore <!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="bower_components/rickshaw/src/css/graph.css"> <script src="./bower_components/d3/d3.min.js"></script> <script src="./bower_components/rickshaw/rickshaw.min.js"></script> <title></title> </head> <body> <div id="chart"></div> <script> var graph = new Rickshaw.Graph( { element: document.querySelector("#chart"), width: 300, height: 200, series: [{ color: 'steelblue', data: [ { x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 38 }, { x: 3, y: 30 }, { x: 4, y: 32 } ] }] }); graph.render(); </script> </body> </html> 14೥3݄2೔೔༵೔
12. ॳظԽmore <!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="bower_components/rickshaw/src/css/graph.css"> <script src="./bower_components/d3/d3.min.js"></script> <script src="./bower_components/rickshaw/rickshaw.min.js"></script> <title></title> </head> <body> <div id="chart"></div> <script> var graph = new Rickshaw.Graph( { element: document.querySelector("#chart"), width: 300, height: 200, series: [{ color: 'steelblue', data: [ { x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 38 }, { x: 3, y: 30 }, { x: 4, y: 32 } ] }] }); graph.render(); </script> </body> </html> divͰλʔήοτࢦఆ άϥϑඳը Rickshaw.GraphͷΠϯελϯεԽ 14೥3݄2೔೔༵೔
13. ॳظԽmore colorͰ৭ࢦఆ σʔλ഑ྻ series: [{ color: 'steelblue', data: [ { x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 38 }, { x: 3, y: 30 }, { x: 4, y: 32 } ] }] 14೥3݄2೔೔༵೔
14. DEMO 14೥3݄2೔೔༵೔
15. ͜Ε͚ͩ <!doctype html> <html> <head> <link type="text/css" rel="stylesheet" href="bower_components/rickshaw/src/css/graph.css"> <link type="text/css" rel="stylesheet" href="bower_components/rickshaw/examples/css/lines.css"> <script src="bower_components/d3/d3.min.js"></script> <script src="bower_components/socket.io-client/dist/socket.io.min.js"></script> <script src="bower_components/rickshaw/rickshaw.min.js"></script> </head> <body> <div id="chart_container"> <div id="chart"></div> </div> <script> var socketioGraph = new Rickshaw.Graph.Socketio( { element: document.getElementById("chart"), width: 900, height: 500, renderer: 'line', dataURL: "http://localhost:8000", onData: function(d) { Rickshaw.Series.zeroFill(d); return d } } ); </script> </body> </html> divͰλʔήοτࢦఆ Πϯελϯε࡞੒ 14೥3݄2೔೔༵೔
16. DEMOิ଍ WebSocket Data Emitter Browser (Rickshaw) Data Metrics 14೥3݄2೔೔༵೔
17. ·ͱΊ Rickshaw࢖͏ͱ ࣌ܥྻσʔλΛ ؆୯ՄࢹԽ㽈 14೥3݄2೔೔༵೔