Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

167 lines (137 sloc) 4.663 kb
<!doctype>
<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>
Jump to Line
Something went wrong with that request. Please try again.