example of ordinal single selection

e.g. for #996
dc-js · Aug 25, 2015 · b82ec10 · b82ec10
1 parent 45721db
commit b82ec10
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 4 deletions.
diff --git a/web/examples/bar-single-select.html b/web/examples/bar-single-select.html
@@ -0,0 +1,55 @@
+<!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>
+
+<p>Frequently asked question: how to enable single-select on an ordinal chart?</p>
+
+<div id="test">
+  <a class="reset" style="display: none" href="javascript:chart.filter(null).redrawGroup()">reset</a>
+</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.barChart("#test");
+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)
+    .x(d3.scale.ordinal())
+    .xUnits(dc.units.ordinal)
+    .brushOn(true)
+    .yAxisLabel("This is the Y Axis!")
+    .dimension(runDimension)
+    .group(speedSumGroup)
+    .on('pretransition', function(chart) {
+        chart.selectAll("rect.bar").on("click", function (d) {
+            console.log('click');
+            chart.filter(null)
+                .filter(d.data.key)
+                .redrawGroup();
+        });
+    });
+    chart.render();
+});
+
+</script>
+
+</body>
+</html>
diff --git a/web/examples/index.html b/web/examples/index.html
@@ -10,32 +10,33 @@ <h2>Examples of using dc.js</h2>
   <tr>
     <td><a href="area.html">area</a></td>
     <td><a href="bar-extra-line.html">bar extra line</a></td>
+    <td><a href="bar-single-select.html">bar single select</a></td>
     <td><a href="bar.html">bar</a></td>
     <td><a href="box-plot-time.html">box plot time</a></td>
-    <td><a href="box-plot.html">box plot</a></td>
 <tr>
   <tr>
+    <td><a href="box-plot.html">box plot</a></td>
     <td><a href="composite.html">composite</a></td>
     <td><a href="cust.html">cust</a></td>
     <td><a href="heat.html">heat</a></td>
     <td><a href="heatmap-filtering.html">heatmap filtering</a></td>
-    <td><a href="line.html">line</a></td>
 <tr>
   <tr>
+    <td><a href="line.html">line</a></td>
     <td><a href="multi-focus.html">multi focus</a></td>
     <td><a href="multi-scatter.html">multi scatter</a></td>
     <td><a href="number.html">number</a></td>
     <td><a href="ord.html">ord</a></td>
-    <td><a href="pie.html">pie</a></td>
 <tr>
   <tr>
+    <td><a href="pie.html">pie</a></td>
     <td><a href="right-axis.html">right axis</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>
     <td><a href="table-on-aggregated-data.html">table on aggregated data</a></td>
 <tr>