<!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>