deprecated/multiBarHorizontalWithLegend.html - nvd3 - Git at Google

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