Rickshaw Charts - Area

by mickeyvip

HTML

<script src="http://code.shutterstock.com/rickshaw/vendor/d3.layout.min.js"></script>
<link rel="stylesheet" href="http://code.shutterstock.com/rickshaw/rickshaw.min.css">
<script src="http://code.shutterstock.com/rickshaw/rickshaw.js"></script>
<script src="https://raw.github.com/timrwood/moment/2.0.0/min/moment.min.js"></script>
<div id="chart_container">
    <div id="y_axis"></div>
    <div id="chart"></div>
    <div id="legend_container">
        <div id="smoother" title="Smoothing"></div>
        <div id="legend"></div>
    </div>
    <div id="slider"></div>
</div>

CSS

#chart_container {
    position: relative;
    font-family: Arial;
}
#chart {
    position: relative;
    left: 60px;
}

#y_axis {
    position: absolute;
    width: 60px;
    top: 0;
    bottom: 0;
}

.rickshaw_graph .detail .x_label { display: none }
.rickshaw_graph .detail .item { line-height: 1.4; padding: 0.5em }
.detail_swatch { float: right; display: inline-block; width: 10px; height: 10px; margin: 0 4px 0 0 }
.rickshaw_graph .detail .date { color: #a0a0a0 }

.rickshaw_graph .x_tick .title {
    bottom: -15px;
}

JavaScript

var graph = new Rickshaw.Graph({
    element: document.querySelector("#chart"),
    width: 500,
    height: 200,
    stroke: true,
    series: [{
        color: 'steelblue',
        name: 'Used',
        data: [{
            "x": 1367143941,
            "y": 12140847.407407
        }, {
            "x": 1367147541,
            "y": 26460160
        }, {
            "x": 1367151141,
            "y": 26460160
        }, {
            "x": 1367154741,
            "y": null
        }, {
            "x": 1367158341,
            "y": 26460160
        }, {
            "x": 1367161941,
            "y": 26460160
        }, {
            "x": 1367165541,
            "y": 26460160
        }, {
            "x": 1367169141,
            "y": 26460160
        }, {
            "x": 1367172741,
            "y": 26460160
        }, {
            "x": 1367176341,
            "y": 26460160
        }, {
            "x": 1367179941,
            "y": 26460160
        }, {
            "x": 1367183541,
            "y": 26460160
        }, {
            "x": 1367187141,
            "y": 26460160
        }, {
            "x": 1367190741,
            "y": 26460160
        }, {
            "x": 1367194341,
            "y": 26460160
        }, {
            "x": 1367197941,
            "y": 26460160
        }, {
            "x": 1367201541,
            "y": 26460160
        }, {
            "x": 1367205141,
            "y": 26460160
        }, {
            "x": 1367208741,
            "y": 26460160
        }, {
            "x": 1367212341,
            "y": 26460160
        }, {
            "x": 1367215941,
            "y": 26460160
        }, {
            "x": 1367219541,
            "y": 46460160
        }, {
            "x": 1367223141,
            "y": 26460160
        }, {
            "x": 1367226741,
            "y": 26460160
        }, {
            "x": 1367230341,
            "y": 26460160
        }, {
            "x": 1367233941,
            "y": 36460160
        }, {
           ...