Rickshaw - Speaker Deck

Slide 1

Slide 1 text

3JDLTIBXͰ࡞Δ ϦΞϧλΠϜՄࢹԽΞϓϦ @bad_at_math 14೥3݄2೔೔༵೔

Slide 2

Slide 2 text

Rickshawͱ͸ 14೥3݄2೔೔༵೔

Slide 3

Slide 3 text

Rickshawͱ͸ w࣌ܥྻσʔλʹϑΥʔΧεͨ͠ɺEKT Λར༻ͨ͠+BWB4DSJQUͷπʔϧΩοτ 14೥3݄2೔೔༵೔

Slide 4

Slide 4 text

14೥3݄2೔೔༵೔

Slide 5

Slide 5 text

14೥3݄2೔೔༵೔

Slide 6

Slide 6 text

௒؆୯ var g = new Rickshaw.Graph(); graph.render(); 14೥3݄2೔೔༵೔

Slide 7

Slide 7 text

௒؆୯ var g = new Rickshaw.Graph(); graph.render(); Koredake desu K oredake desu 14೥3݄2೔೔༵೔

Slide 8

Slide 8 text

௒؆୯ EKTͱ͸ͳΜͩͬͨͷ͔ 14೥3݄2೔೔༵೔

Slide 9

Slide 9 text

ॳظԽ • element : Ͳ͜΁ग़ྗ͢Δ͔ • width : ෯ • height : ߴ͞ • series : σʔλ഑ྻ 14೥3݄2೔೔༵೔

Slide 10

Slide 10 text

ॳظԽmore • series : ෳ਺ͷάϥϑσʔλͷ഑ྻ • { color : “blue”, data: [σʔλ഑ྻ] } 14೥3݄2೔೔༵೔

Slide 11

Slide 11 text

ॳظԽmore

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(); 14೥3݄2೔೔༵೔

Slide 12

Slide 12 text

ॳظԽmore

Slide 13

Slide 13 text

ॳظԽ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೔೔༵೔

Slide 14

Slide 14 text

DEMO 14೥3݄2೔೔༵೔

Slide 15

Slide 15 text

͜Ε͚ͩ

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 } } ); divͰλʔήοτࢦఆ Πϯελϯε࡞੒ 14೥3݄2೔೔༵೔

Slide 16

Slide 16 text

DEMOิ଍ WebSocket Data Emitter Browser (Rickshaw) Data Metrics 14೥3݄2೔೔༵೔

Slide 17

Slide 17 text

·ͱΊ Rickshaw࢖͏ͱ ࣌ܥྻσʔλΛ ؆୯ՄࢹԽ㽈 14೥3݄2೔೔༵೔