A port of one of the rickshaw examples to wheelbarrow.
xxxxxxxxxx
<link type="text/css" rel="stylesheet" href="https://code.shutterstock.com/rickshaw/rickshaw.min.css">
<script src="_ArrayLikeIsArray.js"></script>
<script src="https://d3js.org/d3.v2.min.js" charset="utf-8"></script>
<script src="https://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>
Modified http://d3js.org/d3.v2.min.js to a secure url
Modified http://code.shutterstock.com/rickshaw/rickshaw.min.js to a secure url
https://d3js.org/d3.v2.min.js
https://code.shutterstock.com/rickshaw/rickshaw.min.js