A port of one of the rickshaw examples to wheelbarrow.
<!doctype>
<link type="text/css" rel="stylesheet" href="//code.shutterstock.com/rickshaw/rickshaw.min.css">
<script src="_ArrayLikeIsArray.js"></script>
<script src="//d3js.org/d3.v2.min.js" charset="utf-8"></script>
<script src="//code.shutterstock.com/rickshaw/rickshaw.min.js"></script>
<style>
body {
font-family: "Helvetica Neue", Helvetica, sans-serif;
background:#272822;
color:#f0f0f0;
}
svg {
fill:#f0f0f0;
stroke:#f0f0f0;
}
#chart_container .rickshaw_graph .x_tick {
border-left: 1px dotted rgba(240, 240, 240, 0.2);
}
#chart_container .rickshaw_graph .y_ticks .tick,
#chart_container .rickshaw_graph .x_ticks_d3 .tick {
stroke: rgba(0.94, 0.94, 0.94, 0.16);
}
#chart_container .rickshaw_graph .y_grid .tick,
#chart_container .rickshaw_graph .x_grid_d3 .tick {
stroke: rgba(0.94, 0.94, 0.94, 0.20);
}
#chart_container {
display: inline-block;
font-family: Arial, Helvetica, sans-serif;
}
#chart {
float: left;
}
#legend {
float: left;
margin-left: 15px;
}
#offset_form {
float: left;
margin: 2em 0 0 15px;
font-size: 13px;
}
#y_axis {
float: left;
width: 40px;
}
</style>
<div id="chart_container">
<div id="y_axis"></div>
<div id="chart"></div>
<div id="legend"></div>
<form id="offset_form" class="toggler">
<input type="radio" name="offset" id="lines" value="lines" checked>
<label class="lines" for="lines">lines</label><br>
<input type="radio" name="offset" id="stack" value="zero">
<label class="stack" for="stack">stack</label>
</form>
</div>
<script src="wheelbarrow.js"></script>
/**
* Provides ArrayLike support for for libraries that verify an object
* is an Array via either Object.prototype.toString or Array.isArray.
*
* For more information: https://github.com/dribnet/ArrayLike.js
*/
// this method patches (or implements) Array.isArray
// and stores the original function so it can be restored
(function(ar) {
var isArray = ar.isArray;
// toString is only used if Array.isArray does not exist
var toString = Object.prototype.toString;
// ar["$originalIsArray"] = isArray;
ar.isArray = function(obj) {
var that = this;
if(obj && obj.__ArrayLike) {
return true;
}
else if (isArray) {
return isArray.call(that, obj);
}
else {
// fallback - polyfill the Array.isArray method
return toString.call(obj) === "[object Array]";
}
}
// also install isArrayLike, but here it matches isArray
ar.isArrayLike = ar.isArray;
})(Array);
// this method patches Object.prototype.toString
// and stores the original function so it can be restored
(function(op) {
var toString = op.toString;
// op["$originalToString"] = toString;
op.toString = function(args) {
var that = this;
if(that && that.__ArrayLike) {
return '[object Array]';
}
else {
return toString.call(that);
}
}
})(Object.prototype);
(ns wheelbarrow.tutorial.example07
(:require [mrhyde.core :as mrhyde]
[mrhyde.extend-js]))
(mrhyde/bootstrap)
(def Rickshaw (this-as ct (:Rickshaw ct)))
(def document js/document)
(def palette (Rickshaw.Color.Palette.))
(def graph (Rickshaw.Graph. {
:element (-> document (.querySelector "#chart"))
:width 780
:height 500
:renderer "line"
:series [
{ :name "Northeast"
:data [ { :x -1893456000 :y 25868573 } { :x -1577923200 :y 29662053 } { :x -1262304000 :y 34427091 } { :x -946771200 :y 35976777 } { :x -631152000 :y 39477986 } { :x -315619200 :y 44677819 } { :x 0 :y 49040703 } { :x 315532800 :y 49135283 } { :x 631152000 :y 50809229 } { :x 946684800 :y 53594378 } { :x 1262304000 :y 55317240 } ]
:color (-> palette .color)
}
{ :name "Midwest"
:data [ { :x -1893456000 :y 29888542 } { :x -1577923200 :y 34019792 } { :x -1262304000 :y 38594100 } { :x -946771200 :y 40143332 } { :x -631152000 :y 44460762 } { :x -315619200 :y 51619139 } { :x 0 :y 56571663 } { :x 315532800 :y 58865670 } { :x 631152000 :y 59668632 } { :x 946684800 :y 64392776 } { :x 1262304000 :y 66927001 } ]
:color (-> palette .color)
}
{ :name "South"
:data [ { :x -1893456000 :y 29389330 } { :x -1577923200 :y 33125803 } { :x -1262304000 :y 37857633 } { :x -946771200 :y 41665901 } { :x -631152000 :y 47197088 } { :x -315619200 :y 54973113 } { :x 0 :y 62795367 } { :x 315532800 :y 75372362 } { :x 631152000 :y 85445930 } { :x 946684800 :y 100236820 } { :x 1262304000 :y 114555744 } ]
:color (-> palette .color)
}
{ :name "West"
:data [ { :x -1893456000 :y 7082086 } { :x -1577923200 :y 9213920 } { :x -1262304000 :y 12323836 } { :x -946771200 :y 14379119 } { :x -631152000 :y 20189962 } { :x -315619200 :y 28053104 } { :x 0 :y 34804193 } { :x 315532800 :y 43172490 } { :x 631152000 :y 52786082 } { :x 946684800 :y 63197932 } { :x 1262304000 :y 71945553 } ]
:color (-> palette .color)
}]}))
(def x_axis
(Rickshaw.Graph.Axis.Time. { :graph graph }))
(def y_axis
(Rickshaw.Graph.Axis.Y. {
:graph graph
:orientation "left"
:tickFormat (get-in Rickshaw [:Fixtures :Number :formatKMBT])
:element (-> document (.getElementById "y_axis"))}))
(def legend
(Rickshaw.Graph.Legend. {
:element (-> document (.querySelector "#legend"))
:graph graph}))
(def offsetForm
(-> document (.getElementById "offset_form")))
(-> offsetForm (.addEventListener "change" (fn [e]
(let [offsetMode (get-in e [:target :value])]
(if (= offsetMode "lines")
(do
(-> graph (.setRenderer "line"))
(assoc! graph :offset "zero"))
; else
(do
(-> graph (.setRenderer "stack"))
(assoc! graph :offset offsetMode))))
(-> graph (.render))) false))
(-> graph .render)