row chart useRightYAxis and examples

dc-js · Jun 4, 2015 · ba8bbc0 · ba8bbc0
1 parent 55f8b5c
commit ba8bbc0
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 4 deletions.
diff --git a/src/row-chart.js b/src/row-chart.js
@@ -53,6 +53,8 @@ dc.rowChart = function (parent, chartGroup) {
 
     var _rowData;
 
+    var _useRightYAxis = false;
+
     _chart.rowsCap = _chart.cap;
 
     function calculateAxisScale() {
@@ -61,8 +63,13 @@ dc.rowChart = function (parent, chartGroup) {
             if (extent[0] > 0) {
                 extent[0] = 0;
             }
-            _x = d3.scale.linear().domain(extent)
-                .range([0, _chart.effectiveWidth()]);
+
+            var domain = d3.scale.linear().domain(extent);
+            if (_useRightYAxis) {
+                _x = domain.range([_chart.effectiveWidth(), 0]);
+            } else {
+                _x = domain.range([0, _chart.effectiveWidth()]);
+            }
         }
         _xAxis.scale(_x);
     }
@@ -387,6 +394,19 @@ dc.rowChart = function (parent, chartGroup) {
         return _chart;
     };
 
+    /**
+     #### .useRightYAxis()
+     Gets or sets whether the chart should be drawn with a right axis instead of a left axis.
+     **/
+
+    _chart.useRightYAxis = function (_) {
+        if (!arguments.length) {
+            return _useRightYAxis;
+        }
+        _useRightYAxis = _;
+        return _chart;
+    };
+
     function isSelectedRow (d) {
         return _chart.hasFilter(_chart.cappedKeyAccessor(d));
     }

diff --git a/web/examples/index.html b/web/examples/index.html
@@ -30,13 +30,14 @@ <h2>Examples of using dc.js</h2>
 <tr>
   <tr>
     <td><a href="right-axis.html">right axis</a></td>
+    <td><a href="row.html">row</a></td>
     <td><a href="scatter-brushing.html">scatter brushing</a></td>
     <td><a href="scatter-series.html">scatter series</a></td>
     <td><a href="scatter.html">scatter</a></td>
-    <td><a href="series.html">series</a></td>
 <tr>
   <tr>
+    <td><a href="series.html">series</a></td>
     <td><a href="stacked-bar.html">stacked bar</a></td>
 <tr>
 </table>
-</div></body></html>
+</div></body></html>
diff --git a/web/examples/row.html b/web/examples/row.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>dc.js - Bar Chart Example</title>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" type="text/css" href="../css/dc.css"/>
+</head>
+<body>
+
+<div id="test"></div>
+<div id="test2"></div>
+
+<script type="text/javascript" src="../js/d3.js"></script>
+<script type="text/javascript" src="../js/crossfilter.js"></script>
+<script type="text/javascript" src="../js/dc.js"></script>
+<script type="text/javascript">
+
+var chart = dc.rowChart("#test");
+var chart2 = dc.rowChart("#test2");
+
+d3.csv("morley.csv", function(error, experiments) {
+
+  experiments.forEach(function(x) {
+    x.Speed = +x.Speed;
+  });
+
+  var ndx                 = crossfilter(experiments),
+      runDimension        = ndx.dimension(function(d) {return +d.Run;}),
+      speedSumGroup       = runDimension.group().reduceSum(function(d) {return d.Speed * d.Run / 1000;});
+
+  chart
+    .width(768)
+    .height(480)
+    .dimension(runDimension)
+    .group(speedSumGroup)
+    .cap(10);
+
+    chart.render();
+
+  chart2
+    .width(768)
+    .height(480)
+    .dimension(runDimension)
+    .group(speedSumGroup)
+    .useRightYAxis(true);
+
+    chart2.render();
+});
+
+</script>
+
+</body>
+</html>