Working on improving the horizontal multibar, added new pos/neg example

examples/multiBarHorizontalWithLegend.html

@@ -48,13 +48,110 @@ var test_data = stream_layers(3,12,.1).map(function(data, i) {
   };
 });
 
-var selector = '#chart1',
-    chart = nv.models.multiBarHorizontalWithLegend(),
-    data = test_data,
-    xTickFormat = d3.format(',r'),
-    yTickFormat = d3.format(',.2f'),
-    xAxisLabel = null,
-    yAxisLabel = null,
+
+
+long_short_data = [ 
+  {
+    key: 'Short',
+    color: '#d62728',
+    values: [
+      { 
+        "label" : "Information Technology" ,
+        "y" : -1.8746444827653
+      } , 
+      { 
+        "label" : "Consumer Discretionary" ,
+        "y" : -8.0961543492239
+      } , 
+      { 
+        "label" : "Health Care" ,
+        "y" : -0.57072943117674
+      } , 
+      { 
+        "label" : "Consumer Staples" ,
+        "y" : -2.4174010336624
+      } , 
+      {
+        "label" : "Financials" ,
+        "y" : -0.72009071426284
+      } , 
+      { 
+        "label" : "Industrials" ,
+        "y" : -0.77154485523777
+      } , 
+      { 
+        "label" : "Energy" ,
+        "y" : -0.90152097798131
+      } , 
+      {
+        "label" : "Materials" , 
+        "y" : -0.91445417330854
+      } , 
+      { 
+        "label" : "Telecommunication Services" , 
+        "y" : -0.055746319141851
+      }
+    ]
+  },
+  {
+    key: 'Long',
+    color: '#1f77b4',
+    values: [
+      { 
+        "label" : "Information Technology" ,
+        "y" : 25.307646510375
+      } , 
+      { 
+        "label" : "Consumer Discretionary" ,
+        "y" : 16.756779544553
+      } , 
+      { 
+        "label" : "Health Care" ,
+        "y" : 18.451534877007
+      } , 
+      { 
+        "label" : "Consumer Staples" ,
+        "y" : 8.6142352811805
+      } , 
+      {
+        "label" : "Financials" ,
+        "y" : 7.8082472075876
+      } , 
+      { 
+        "label" : "Industrials" ,
+        "y" : 5.259101026956
+      } , 
+      { 
+        "label" : "Energy" ,
+        "y" : 0.30947953487127
+      } , 
+      { 
+        "label" : "Materials" ,
+        "y" : 0
+      } , 
+      { 
+        "label" : "Telecommunication Services" ,
+        "y" : 0 
+      }
+    ]
+  }
+];
+
+
+
+  var selector = '#chart1',
+  chart = nv.models.multiBarHorizontalWithLegend()
+            .x(function(d) { return d.label })
+            .margin({top: 30, right: 20, bottom: 50, left: 160})
+            .showControls(false)
+            .forceY([0]),
+      data = long_short_data,
+      //data = test_data,
+      xTickFormat = function(d) { return d },
+      //xTickFormat = d3.format(',r'),
+      yTickFormat = d3.format(',.2f'),
+      xAxisLabel = null,
+      yAxisLabel = null,
     duration = 500;
 
 nv.addGraph({

examples/multiBarWithLegend.html

@@ -41,7 +41,7 @@ text {
 <script src="stream_layers.js"></script>
 <script>
 
-var test_data = stream_layers(3,64,.1).map(function(data, i) {
+var test_data = stream_layers(3,Math.random()*200,.1).map(function(data, i) {
   return {
     key: 'Stream' + i,
     values: data

src/models/multiBarHorizontal.js

@@ -66,13 +66,13 @@ nv.models.multiBarHorizontal = function() {
       x   .domain(d3.merge(seriesData).map(function(d) { return d.x }))
           .rangeBands([0, availableHeight], .1);
 
-      y   .domain(yDomain || [0,d3.max(d3.merge(seriesData).map(function(d) { return d.y + (stacked ? d.y0 : 0) }).concat(forceY))])
+      y   .domain(yDomain || d3.extent(d3.merge(seriesData).map(function(d) { return d.y + (stacked ? d.y0 : 0) }).concat(forceY)))
           .range([0, availableWidth]);
 
 
 
-      var wrap = d3.select(this).selectAll('g.d3multibar').data([data]);
-      var wrapEnter = wrap.enter().append('g').attr('class', 'nvd3 multibar');
+      var wrap = d3.select(this).selectAll('g.wrap.multibar').data([data]);
+      var wrapEnter = wrap.enter().append('g').attr('class', 'wrap nvd3 multibar');
       var defsEnter = wrapEnter.append('defs');
       var gEnter = wrapEnter.append('g');
 

src/models/multiBarHorizontalWithLegend.js

@@ -3,7 +3,8 @@ nv.models.multiBarHorizontalWithLegend = function() {
   var margin = {top: 30, right: 20, bottom: 50, left: 60},
       width = function() { return 960 },
       height = function() { return 500 },
-      color = d3.scale.category20().range();
+      color = d3.scale.category20().range(),
+      showControls = true;
 
   //var x = d3.scale.linear(),
   var x = d3.scale.ordinal(),
@@ -92,11 +93,13 @@ nv.models.multiBarHorizontalWithLegend = function() {
           .attr('transform', 'translate(' + (availableWidth / 2) + ',' + (-margin.top) +')')
           .call(legend);
 
-      controls.width(180).color(['#444', '#444', '#444']);
-      g.select('.controlsWrap')
-          .datum(controlsData)
-          .attr('transform', 'translate(0,' + (-margin.top) +')')
-          .call(controls);
+      if (showControls) {
+        controls.width(180).color(['#444', '#444', '#444']);
+        g.select('.controlsWrap')
+            .datum(controlsData)
+            .attr('transform', 'translate(0,' + (-margin.top) +')')
+            .call(controls);
+      }
 
 
       var linesWrap = g.select('.linesWrap')
@@ -220,6 +223,12 @@ nv.models.multiBarHorizontalWithLegend = function() {
     return chart;
   };
 
+  chart.showControls = function(_) {
+    if (!arguments.length) return showControls;
+    showControls = _;
+    return chart;
+  };
+
 
   return chart;
 }