multiBarHorizontalWithLegend.html

<!DOCTYPE html>
<meta charset="utf-8">

<link href="../src/d3.css" rel="stylesheet" type="text/css">

<style>

body {
  overflow-y:scroll;
}

text {
  font: 12px sans-serif;
}

#chart1 {
  height: 500px;
  margin: 10px;
  min-width: 100px;
  min-height: 100px;
/*
  Minimum height and width is a good idea to prevent negative SVG dimensions...
  For example width should be =< margin.left + margin.right + 1,
  of course 1 pixel for the entire chart would not be very useful, BUT should not have errors
*/
}

</style>
<body>

  <div id="chart1">
  </div>

<script src="../lib/d3.v2.js"></script>
<script src="../nv.d3.js"></script>
<script src="../src/tooltip.js"></script>
<script src="../src/models/legend.js"></script>
<script src="../src/models/axis.js"></script>
<script src="../src/models/multiBarHorizontal.js"></script>
<script src="../src/models/multiBarHorizontalWithLegend.js"></script>
<script src="stream_layers.js"></script>
<script>

var test_data = stream_layers(3,12,.1).map(function(data, i) {
  return {
    key: 'Stream' + i,
    values: data
  };
});


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),
      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({
  generate: function() {
    var container = d3.select(selector),
        width = function() { return parseInt(container.style('width')) },
        height = function() { return parseInt(container.style('height')) },
        svg = container.append('svg');

    chart
        .width(width)
        .height(height);

    chart.xAxis
        .tickFormat(xTickFormat);

    chart.yAxis
        .tickFormat(yTickFormat)
        .axisLabel(yAxisLabel);

    svg
        .attr('width', width())
        .attr('height', height())
        .datum(data)
      .transition().duration(duration).call(chart);

    return chart;
  },
  callback: function(chart) {
    var showTooltip = function showTooltip(e) {
      var offsetElement = document.getElementById(selector.substr(1)),
          left = e.pos[0] + offsetElement.offsetLeft,
          top = e.pos[1] + offsetElement.offsetTop,
          formatY = chart.yAxis.tickFormat(), //Assumes using same format as axis, can customize to show higher precision, etc.
          formatX = chart.xAxis.tickFormat();

      // uses the chart's getX and getY, you may customize if x position is not the same as the value you want
      //   ex. daily data without weekends, x is the index, while you want the date
      var content = '<h3>' + e.series.key + '</h3>' +
                    '<p>' +
                    formatX(chart.x()(e.point)) + ': ' + formatY(chart.y()(e.point)) +
                    //formatY(chart.y()(e.point)) + ' at ' + formatX(chart.x()(e.point)) +
                    '</p>';

      var tooltip = nv.tooltip.show([left, top], content, e.value < 0 ? 'e' : 'w');

      /*
      if (!arguments[1]) {
        tooltip.onmouseenter = function() { showTooltip(e, 1) }; //working on geting tooltips to stay if mouse hovers over them
        //tooltip.onmouseout = function() { console.log('mouseout'); };
        tooltip.onmouseout = nv.tooltip.cleanup;
      }
      */
    };

    chart.dispatch.on('tooltipShow', showTooltip);
    chart.dispatch.on('tooltipHide', nv.tooltip.cleanup);


    window.onresize= function() {
      // now that width and height are functions, should be automatic..of course you can always override them

      d3.select('#chart1 svg')
          .attr('width', chart.width()()) //need to set SVG dimensions, chart is not aware of the SVG component
          .attr('height', chart.height()())
        .transition().duration(duration)
          .call(chart);

/*
      d3.select('#chart1 svg')
          .attr('width', chart.width()()) //need to set SVG dimensions, chart is not aware of the SVG component
          .attr('height', chart.height()())
          .call(chart);
*/
    };
  }
});


function sinAndCos() {
  var sin = [],
      cos = [];

  for (var i = 0; i < 100; i++) {
    sin.push({x: i, y: Math.sin(i/10)});
    cos.push({x: i, y: .5 * Math.cos(i/10)});
  }

  return [
    {
      values: sin,
      key: "Sine Wave",
      color: "#ff7f0e"
    },
    {
      values: cos,
      key: "Cosine Wave",
      color: "#2ca02c"
    }
  ];
}


</script>