NVD3 graph template

index.html

#chart
	svg.chart

NVD3 graph template.markdown

NVD3 graph template

template code pen with d3.js and nv.d3.js

A Pen by zardozcs on CodePen.

License.

script.js

/* source: http://nvd3.org/examples/line.html */
var MARGIN = 75,
	TRANSITION = 1300,
	PALETTE = [];
//	PALETTE = ['red', 'green', 'blue'];
	//PALETTE = ['#ff7f0e', '#2ca02c', '#7777ff'];

/*These lines are all chart setup.  Pick and choose which chart features you want to utilize. */
nv.addGraph(function() {
	var chart = nv.models.lineChart()
		.margin({
			left: MARGIN
		}) //Adjust chart margins to give the x-axis some breathing room.
		.useInteractiveGuideline(true) //We want nice looking tooltips and a guideline!
		.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
		.color(d3.scale.category10().range())
		//.transitionDuration(350)  
		//how fast do you want the lines to transition?
		.duration(TRANSITION)
	;

	chart.xAxis //Chart x-axis settings
		.axisLabel('Time (ms)')
		.tickFormat(d3.format(',r'));

	chart.yAxis //Chart y-axis settings
		.axisLabel('Voltage (v)')
		.tickFormat(d3.format('.02f'));

	/* Done setting the chart up? Time to render it!*/
	var myData = sinAndCos(); //You need data...
	console.log(myData);

	d3.select('#chart svg') //Select the <svg> element you want to render the chart in.   
		.datum(myData) //Populate the <svg> element with chart data...
		.transition().duration(TRANSITION)
		.call(chart); //Finally, render the chart!

	//Update the chart when window resizes.
	nv.utils.windowResize(function() {
		chart.update()
	});
	return chart;
});
/**************************************
 * Simple test data generator
 */
function sinAndCos() {
	var sin = [],
		sin2 = [],
		cos = [];

	//Data is represented as an array of {x,y} pairs.
	for (var i = 0; i < 100; i++) {
		sin.push({
			x: i,
			y: Math.sin(i / 10)
		});
		sin2.push({
			x: i,
			y: Math.sin(i / 10) * 0.25 + 0.5
		});
		cos.push({
			x: i,
			y: .5 * Math.cos(i / 10)
		});
	}

	//Line chart data should be sent as an array of series objects.
	return [{
		values: sin, //values - represents the array of {x,y} data points
		key: 'Sine Wave', //key  - the name of the series.
		color: PALETTE[0], //color - optional: choose your own line color.
		area: false
	}, {
		values: cos,
		key: 'Cosine Wave',
		color: PALETTE[1],
		area: false
	}, {
		values: sin2,
		key: 'Another sine wave',
		color: PALETTE[2],
		area: true //area - set to true if you want this line to turn into a filled area chart.
	}];
};

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="//cdn.rawgit.com/novus/nvd3/v1.8.1/build/nv.d3.js"></script>

style.css

* {
	background: black;
	color: orange;
	font-family: ProFontWindows, Consolas, Courier, Monospace, Fixed, Serif; 
	font-size: 24px; 
	font-weight: 1000;
}
svg.chart {
	width: 100%;
	min-height: 768px;
	
	text {
		stroke: transparent;
		stroke-width: 0;
		fill: cyan;
	}
}

styles

<link href="https://cdn.rawgit.com/novus/nvd3/v1.8.1/build/nv.d3.css" rel="stylesheet" />