JSFiddle - React, Tailwind, and code Playground

by Niko Sams

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://code.shutterstock.com/rickshaw/src/css/graph.css">
<link rel="stylesheet" href="http://code.shutterstock.com/rickshaw/src/css/detail.css">
<link rel="stylesheet" href="http://code.shutterstock.com/rickshaw/examples/css/extensions.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js"></script>
<script src="http://code.shutterstock.com/rickshaw/vendor/d3.v2.js"></script>
<script src="http://code.shutterstock.com/rickshaw/rickshaw.min.js"></script>
<div id="chart">
</div>
<div id="preview">
</div>

JavaScript

var seriesData = [ [], [] ];
var random = new Rickshaw.Fixtures.RandomData(50);

for (var i = 0; i < 75; i++) {
    random.addData(seriesData);
}

var graph = new Rickshaw.Graph( {
    element: document.getElementById('chart'),
    renderer: 'line',
    width: 400,
    height: 300,
    offset: 'value',
    series: [
        {
            name: 'foo',
            data: seriesData.shift(),
            color: 'rgba(255, 0, 0, 0.4)'
        }, {
            name: 'bar',
            data: seriesData.shift(),
            color: 'rgba(255, 127, 0, 0.4)'
        }
    ]
} );

var slider = new Rickshaw.Graph.RangeSlider.Preview({
    graph: graph,
    element: document.getElementById('preview')
});

var detail = new Rickshaw.Graph.HoverDetail({
    graph: graph
});

graph.render();