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;'> </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.