NVD3 is a very powerful java script library to render web based graphs. It automatically handles the scaling and plotting by itself. We just need to concern the data.

NVD3 just takes data and render the graph.

Data Format : NVD3 expect an array of data in the following format.

[
{
key : 'Data 1',
color : '#ff7f0e',
values: [{x:1454178600000,y:10},{x:1454265000000,y:11},{x:1454351400000,y:15},{x:1454437800000,y:10},{x:1454524200000,y:18},{x:1454610600000,y:25}]
},
{
key : 'Data 2',
color : '2ca02c',
values: [{x:1454610600000,y:10},{x:1454524200000,y:11},{x:1454437800000,y:15},{x:1454351400000,y:10},{x:1454265000000,y:18},{x:1454178600000,y:25}]
}
/*
I have defined data for two graphs here. You can define as many graph as you have.
*/
]

Chart initialization : Follow the following steps to create charts in your web application.

1. Add the script and its dependencies : NDV3 is an extension of d3.

<link rel="stylesheet" href="/resources/css/nvd3/nv.d3.min.css" type="text/css">
<script src="/resources/js/d3.min.js"
        type="text/javascript"></script>
<script src="/resources/js/nvd3/nv.d3.min.js"
        type="text/javascript"></script>
<script src="/resources/js/service/multipliService.js" type="text/javascript"></script>

2. Initialize chart API and provide data.

			
nv.addGraph(function() {
var chart = nv.models.lineChart()
           .margin({left: 100})  //Adjust chart margins to give the x-axis some breathing room.
           .useInteractiveGuideline(true)  //We want nice looking tooltips and a guideline!
           .duration(350)  //how fast do you want the lines to transition?
           .showLegend(true)       //Show the legend, allowing users to turn on/off line series.
           .showYAxis(true)        //Show the y-axis
           .showXAxis(true)        //Show the x-axis
           .interpolate("linear"); //step, basis, linear

	chart.xAxis     //Chart x-axis settings
	      .axisLabel('Time (date)')
	      .tickFormat(function(d) {
		    	  	return d3.time.format('%d %b')(new Date(d))
	      });				  
  chart.xDomain([new Date(1454178600000), new Date(1454610600000)]);
  chart.xScale(d3.time.scale());
  chart.yAxis     //Chart y-axis settings
      .axisLabel('Value (Rs)')
      .tickFormat(d3.format('.0f'));
  /* Done setting the chart up? Time to render it!*/
  var myData = graphdata;
  d3.select('#graph2')
	 .append('svg').attr('width',550).attr('height',400)//Select the  element you want to render the chart in.   
	 .datum(myData)         //Populate the  element with chart data...
	 .call(chart);          //Finally, render the chart!
//Update the chart when window resizes.
 nv.utils.windowResize(function() { chart.update() });
	 return chart;
 });

And here is the graph.

Thanks. Happy coding.