histogram - supported one dimensional array input data, updated demo

mwasiluk · Aug 30, 2016 · 01c15a0 · 01c15a0
1 parent a9e4145
commit 01c15a0
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 22 deletions.
diff --git a/dist/odc-d3.js b/dist/odc-d3.js
diff --git a/dist/odc-d3.min.js b/dist/odc-d3.min.js
diff --git a/dist/odc-d3.min.js.map b/dist/odc-d3.min.js.map
diff --git a/examples/histogram/demo.js b/examples/histogram/demo.js
@@ -3,10 +3,10 @@ var confFlowers = {
         key: 'petal length',
         label: 'petal length'
     },
-    groups:{
-        key: 'species',
-        label: "species"
-    }
+    // groups:{
+    //     key: 'species',
+    //     label: "species"
+    // }
 
 };
 // conf = new  ODCD3.ScatterPlotConfig();
@@ -27,11 +27,23 @@ var dataArray = [
     [5,4, 2]
 
 ];
-var plot;
+var plot, plot2;
 var conf = confFlowers;
 
+
+
+
+var values = d3.range(1000).map(d3.random.bates(20));
+plot = new ODCD3.Histogram("#plot", values, {
+    x:{
+        ticks: 14
+    }
+});
+
 d3.csv("../data/flowers.csv", function(error, data) {
     console.log(data);
-    plot = new ODCD3.Histogram("#plot", data, conf);
+    plot2 = new ODCD3.Histogram("#plot2", data, conf);
+
+});
+
 
-});
diff --git a/examples/histogram/index.html b/examples/histogram/index.html
@@ -8,7 +8,9 @@
 <body>
 <h1>Histogram demo</h1>
 
-<div id="plot" style=" max-width: 600px;"></div>
+<div id="plot" style=" max-width: 600px;margin-bottom: 40px"></div>
+<div id="plot2" style=" max-width: 600px;margin-bottom: 40px"></div>
+
 
 <script src="../../bower_components/d3/d3.min.js" charset="utf-8"></script>
 <script src="../../dist/odc-d3.js" charset="utf-8"></script>

diff --git a/src/histogram.js b/src/histogram.js
@@ -14,9 +14,9 @@ export class HistogramConfig extends ChartConfig{
     x={// X axis config
         label: '', // axis label
         key: 0,
-        value: (d, key) => d[key], // x value accessor
+        value: (d, key) => Utils.isNumber(d) ? d : d[key], // x value accessor
         scale: "linear",
-        ticks: undefined
+        ticks: undefined,
     };
     y={// Y axis config
         label: '', // axis label,
@@ -116,10 +116,6 @@ export class Histogram extends Chart{
 
         y.axis = d3.svg.axis().scale(y.scale).orient(conf.orient);
 
-        if(this.config.guides){
-            y.axis.tickSize(-plot.width);
-        }
-
         var data = this.data;
         plot.y.scale.domain([0, d3.max(plot.histogramBins, d=>d.y)]);
     };