Published on: 22 February, 2016

Learn how to create multiple bar charts with multiple line charts in NVD3

Posted by andy | 1982 views 1 likes 0 favourites 1 comments
Tumblr Digg Google Plus

In this tutorial you will learn how easily you can create multiple bar charts with multiple line charts in NVD3. The combination of those charts are usually useful when you try to compare multiple datasets that have a really big gap values. As you know if you put them together into the same graph, you will hardly notice the small values.

To start with, we will need to add the following css styles, html text contains the svg object, javascript and css files.

<style>
.tooltip
{
	padding:2px 5px;
	vertical-align:bottom;
}

.tooltip span
{
	font-weight:bold;
}
</style>

<div id="chart">
	<svg style="min-height:500px;"></svg>
</div>

<script src="d3.v3.min.js" charset="utf-8"></script>
<script src="nv.d3.min.js"></script>
<link href="nv.d3.min.css" rel="stylesheet"/>

<script>
	function buildGraph(){
		//this will hold of our main data consists of multiple chart data
		var data = [];
		
		//variables to hold monthly month
		var monthList = ['Jan 2015','Feb 2015','Mar 2015','Apr 2015','May 2014','Jun 2015','Jul 2015','Aug 2015', 'Sep 2015', 'Oct 2015', 'Nov 2015', 'Dec 2015'];
		var monthlyIncome = [12022.44, 9872.34, 8506.92, 13405.20, 10090.32, 8902.33, 11002.78, 10398.22, 9876.32, 10510.23, 8876.44, 9872.39];
		var monthlyExpense = [7500.25, 6590.23, 8200.32, 5600.34, 6701.34, 7100.67, 7402.34, 7800.23, 5908.66, 6701.23, 8100.34, 7234.56];
		var transportExpense = [240.33, 150.34, 110.32, 178.95, 188.24, 160.39, 220.13, 189.34, 190.33, 201.56, 201.43, 220.15];
		var foodExpense = [502.89, 629.33, 710.22, 442.50, 320.66, 350.84, 400.10, 420.89, 501.43, 380.99, 450.39, 370.22];
		var electricityExpense = [120.99, 221.32, 85.89, 110.22, 91.44, 87.60, 102.33, 132.87, 96.44, 105.50, 87.33, 76.30];
		
		//Array to hold each individual coordinate x and y values
		var monthlyIncomeValues = [];
		var monthlyExpenseValues = [];
		var transportExpenseValues = [];
		var foodExpenseValues = [];
		var electricityExpenseValues = [];
		
		//Looping the data and fetch into array
		for(var i = 0; i < monthList.length; i++){
			var xyIncome = {x: i, y: monthlyIncome[i]};
			monthlyIncomeValues.push(xyIncome);
			
			var xyExpense = {x: i, y: monthlyExpense[i]};
			monthlyExpenseValues.push(xyExpense);
			
			var xyTransport = {x: i, y: transportExpense[i]};
			transportExpenseValues.push(xyTransport);
			
			var xyFood = {x: i, y: foodExpense[i]};
			foodExpenseValues.push(xyFood);
			
			var xyElectricity = {x: i, y: electricityExpense[i]};
			electricityExpenseValues.push(xyElectricity);
		}
		
		//Those will be the two bar charts
		var dataIncome = { key: "Income", values: monthlyIncomeValues, type: "bar", yAxis: 1, color: 'red' }
        var dataExpense = { key: "Expenses", values: monthlyExpenseValues, type: "bar", yAxis: 1, color: 'blue' }
		
		//Those will be the three line charts
        var dataTransport = { key: "Transport Expense", values: transportExpenseValues, type: "line", yAxis: 2, color: 'green' }
        var dataFood = { key: "Food Expense", values: foodExpenseValues, type: "line", yAxis: 2, color: 'gray' }
        var dataElectricity = { key: "Electricity Expense", values: electricityExpenseValues, type: "line", yAxis: 2, color: 'orange' }
		
		//Insert the values array into data variable
        data.push(dataIncome);
        data.push(dataExpense);
        data.push(dataTransport);
        data.push(dataFood);
        data.push(dataElectricity);
		
		//build the graph
		nv.addGraph(function () {
			//build as multichart graphs and set the margin right and left to 100px.
			var chart = nv.models.multiChart()
					    .margin({left: 100, right: 100})
			
			//customize the tool tip
			chart.tooltip.contentGenerator(function (key, x, y, e, graph) {
				return "<div class='tooltip'><span>Month:</span> " + monthList[key.index] + "</div>" + "<div class='tooltip'><span>Value:</span> " + key.series[0].value + "</div><div class='tooltip'><span>Legend:</span> <div style='background:" + key.series[0].color + ";display:inline-block;height:15px;width:15px;'>&#160;</div></div>";
			});
		
			//Overwrite the x axis label and replace it with the month name
			chart.xAxis.tickFormat(function (d) { return monthList[d] });
			
			//get the chart svg object and fecth the data to build the chart
			d3.select('#chart svg')
				.datum(data)
				.transition().duration(500).call(chart);
			return chart;
		});
	}
	
	//call the function to build the graph.
	buildGraph();
</script>

Just want to let you know that the actual chart engine is done via D3.js script, while the NVD3.js acts as a wrapper extension that use this library. This chart has a great built in filters that you do not need to code anything. You can try by clicking the legend of the charts and it will automatically perform an interactive chart rebuilt.

With the sample data, we will manually feed the data using javascript. It will be about about monthly income and expenses. There will be 2 bar charts and 3 line charts.

You will also learn from the code on how to perform a custom tool tip.

The reason why we need to overwrite the x axis because when using line chart, we have to set the x and y cordinates using numbers only. Therefore we overwrite the label by replacing them with the month name.

Download File

Comments
Charlie
Commented on: 30 Jun, 2016 10:08:32 AM
Hi, Awsome tutorial! . I just have one question. by default the "legend" field in the tooltip shows the color of the key.
Legend:
 
Whats the code to show the name of the key? Thanks!
Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.