Permalink
Browse files

refactor Minimap and rename to Rickshaw.Graph.RangeSlider.Preview; cl…

…oses #273
  • Loading branch information...
1 parent 4b52c47 commit 6ddfd18eb008a693e5186dfe2bbb3bd8d6ef139b @dchester dchester committed Nov 30, 2013
View
@@ -36,8 +36,8 @@ JS_FILES=\
src/js/Rickshaw.Graph.HoverDetail.js\
src/js/Rickshaw.Graph.JSONP.js\
src/js/Rickshaw.Graph.Legend.js\
- src/js/Rickshaw.Graph.Minimap.js\
src/js/Rickshaw.Graph.RangeSlider.js\
+ src/js/Rickshaw.Graph.RangeSlider.Preview.js\
src/js/Rickshaw.Graph.Renderer.js\
src/js/Rickshaw.Graph.Renderer.Line.js\
src/js/Rickshaw.Graph.Renderer.Stack.js\
View
@@ -100,9 +100,9 @@ Once you have a basic graph, extensions let you add functionality. See the [ove
* __Rickshaw.Graph.RangeSlider__ - dynamically zoom on the x-axis with a slider
-* __Rickshaw.Graph.Axis.Time__ - add an x-axis and grid lines with time labels
+* __Rickshaw.Graph.RangeSlider.Preview__ - control pan and zoom via graphical preview of entire data set
-* __Rickshaw.Graph.Minimap__ - control pan and zoom via minimap of entire data set
+* __Rickshaw.Graph.Axis.Time__ - add an x-axis and grid lines with time labels
* __Rickshaw.Graph.Axis.X__ - add an x-axis and grid lines with arbitrary labels
@@ -10,7 +10,7 @@ div, span, p, td {
#chart path {
-webkit-transition: opacity 0.2s linear;
}
-#minimap {
+#preview {
margin-top: 10px;
}
#legend {
View
@@ -1,10 +1,10 @@
-<!doctype>
+<!doctype html>
<head>
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.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">
+ <link type="text/css" rel="stylesheet" href="css/extensions.css?v=2">
<script src="../vendor/d3.v3.js"></script>
@@ -20,8 +20,9 @@
<script src="../src/js/Rickshaw.Graph.Renderer.Line.js"></script>
<script src="../src/js/Rickshaw.Graph.Renderer.Bar.js"></script>
<script src="../src/js/Rickshaw.Graph.Renderer.ScatterPlot.js"></script>
+ <script src="../src/js/Rickshaw.Graph.Renderer.Stack.js"></script>
<script src="../src/js/Rickshaw.Graph.RangeSlider.js"></script>
- <script src="../src/js/Rickshaw.Graph.Minimap.js"></script>
+ <script src="../src/js/Rickshaw.Graph.RangeSlider.Preview.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>
@@ -30,7 +31,6 @@
<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.Time.Local.js"></script>
<script src="../src/js/Rickshaw.Fixtures.Number.js"></script>
@@ -104,7 +104,7 @@ <h6>Smoothing</h6>
<div id="chart_container">
<div id="chart"></div>
<div id="timeline"></div>
- <div id="minimap"></div>
+ <div id="preview"></div>
</div>
</div>
@@ -126,7 +126,7 @@ <h6>Smoothing</h6>
var graph = new Rickshaw.Graph( {
element: document.getElementById("chart"),
- width: 800,
+ width: 900,
height: 500,
renderer: 'area',
stroke: true,
@@ -166,9 +166,9 @@ <h6>Smoothing</h6>
graph.render();
-var minimap = new Rickshaw.Graph.Minimap( {
+var preview = new Rickshaw.Graph.RangeSlider.Preview( {
graph: graph,
- element: document.getElementById('minimap')
+ element: document.getElementById('preview'),
} );
var hoverDetail = new Rickshaw.Graph.HoverDetail( {
@@ -262,6 +262,14 @@ <h6>Smoothing</h6>
addAnnotation(true);
setTimeout( function() { setInterval( addAnnotation, 6000 ) }, 6000 );
+var previewXAxis = new Rickshaw.Graph.Axis.Time({
+ graph: preview.previews[0],
+ timeFixture: new Rickshaw.Fixtures.Time.Local(),
+ ticksTreatment: ticksTreatment
+});
+
+previewXAxis.render();
+
</script>
</body>
Oops, something went wrong.

0 comments on commit 6ddfd18

Please sign in to comment.