167 lines
4.6 KiB
HTML
167 lines
4.6 KiB
HTML
<!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.v3.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>
|