rickshaw
Version:
Rickshaw is a JavaScript toolkit for creating interactive time series graphs, developed at [Shutterstock](http://www.shutterstock.com)
167 lines (137 loc) • 4.66 kB
HTML
<head>
<link type="text/css" rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
<link type="text/css" rel="stylesheet" href="../src/css/graph.css">
<link type="text/css" rel="stylesheet" href="../src/css/detail.css">
<link type="text/css" rel="stylesheet" href="../src/css/legend.css">
<link type="text/css" rel="stylesheet" href="css/extensions.css">
<script src="../vendor/d3.v2.js"></script>
<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="../src/js/Rickshaw.js"></script>
<script src="../src/js/Rickshaw.Class.js"></script>
<script src="../src/js/Rickshaw.Graph.js"></script>
<script src="../src/js/Rickshaw.Graph.Renderer.js"></script>
<script src="../src/js/Rickshaw.Graph.Renderer.Stack.js"></script>
<script src="../src/js/Rickshaw.Graph.Renderer.Line.js"></script>
<script src="../src/js/Rickshaw.Graph.RangeSlider.js"></script>
<script src="../src/js/Rickshaw.Graph.HoverDetail.js"></script>
<script src="../src/js/Rickshaw.Graph.Annotate.js"></script>
<script src="../src/js/Rickshaw.Graph.Legend.js"></script>
<script src="../src/js/Rickshaw.Graph.Axis.Time.js"></script>
<script src="../src/js/Rickshaw.Graph.Behavior.Series.Toggle.js"></script>
<script src="../src/js/Rickshaw.Graph.Behavior.Series.Order.js"></script>
<script src="../src/js/Rickshaw.Graph.Behavior.Series.Highlight.js"></script>
<script src="../src/js/Rickshaw.Graph.Smoother.js"></script>
<script src="../src/js/Rickshaw.Graph.Unstacker.js"></script>
<script src="../src/js/Rickshaw.Fixtures.Time.js"></script>
<script src="../src/js/Rickshaw.Fixtures.RandomData.js"></script>
<script src="../src/js/Rickshaw.Fixtures.Color.js"></script>
<script src="../src/js/Rickshaw.Color.Palette.js"></script>
<script src="../src/js/Rickshaw.Series.js"></script>
</head>
<body>
<div id="content">
<div id="side_panel">
<h1>Random Data in the Future</h1>
<section><div id="legend"></div></section>
<section>
<form id="offset_form">
<input type="radio" name="offset" id="stack" value="zero" checked>
<label for="stack">stack</label>
<input type="radio" name="offset" id="percent" value="expand">
<label for="percent">percent</label>
<input type="radio" name="offset" id="stream" value="silhouette">
<label for="stream">stream</label>
<input type="radio" name="offset" id="lines" value="lines">
<label for="lines">lines</label>
</form>
</section>
<section>
<h6>Smoothing</h6>
<div id="smoother"></div>
</section>
<section></section>
</div>
<div id="chart_container">
<div id="chart"></div>
<div id="timeline"></div>
<div id="slider"></div>
</div>
</div>
<script>
// instantiate our graph!
var graph = new Rickshaw.Graph( {
element: document.getElementById("chart"),
width: 900,
height: 500,
interpolation: 'step-after',
series: new Rickshaw.Series([{ name: 'This' }])
} );
var slider = new Rickshaw.Graph.RangeSlider( {
graph: graph,
element: $('#slider')
} );
var hoverDetail = new Rickshaw.Graph.HoverDetail( {
graph: graph
} );
var annotator = new Rickshaw.Graph.Annotate( {
graph: graph,
element: document.getElementById('timeline')
} );
var legend = new Rickshaw.Graph.Legend( {
graph: graph,
element: document.getElementById('legend')
} );
var shelving = new Rickshaw.Graph.Behavior.Series.Toggle( {
graph: graph,
legend: legend
} );
// a little monkey punching
legend.shelving = shelving;
graph.series.legend = legend;
var order = new Rickshaw.Graph.Behavior.Series.Order( {
graph: graph,
legend: legend
} );
var highlighter = new Rickshaw.Graph.Behavior.Series.Highlight( {
graph: graph,
legend: legend
} );
var axes = new Rickshaw.Graph.Axis.Time( {
graph: graph
} );
axes.render();
var smoother = new Rickshaw.Graph.Smoother( {
graph: graph,
element: $('#smoother')
} );
var offset_form = document.getElementById('offset_form');
offset_form.addEventListener("change", function(e) {
var offsetMode = e.target.value;
if (offsetMode == 'lines') {
graph.setRenderer('line');
graph.offset = 'zero';
} else {
graph.setRenderer('stack');
graph.offset = offsetMode;
}
graph.update();
}, false );
// add some data every so often
var tv = 1000;
graph.series.setTimeInterval(tv);
setInterval( function() {
var data = { This: 3 };
var randInt = Math.floor(Math.random()*100);
if (randInt > 10) {
data.That = randInt;
}
if (randInt > 15) {
data.TheOtherThing = randInt;
}
graph.series.addData(data);
graph.update();
}, tv );
</script>
</body>