kirantemojo/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
	<title>Dsnap - Charts</title>
	<style>
	#xaxis .domain {
		fill:none;
		stroke:#000;
	}
	#xaxis text, #yaxis text {
		font-size: 12px;
	}
	#xaxis_chartOne .domain{
		display:none;
	}
	</style>
</head>
<body>
    <div id='wrapper'></div>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script>
		(function linearGraph()
		{
			var lostdata = [78, 67, 88, 78, 67,88,78,67,88,78,67,88,67];
			var wondata = [22, 33, 12, 22, 33,12,22,33,12,22,33,12,33];
			var width = 1000;
			var height = 450;
			var categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep','Oct','Nov','Dec','Jan'];
			var colors = ['#0000b4','#BFEF61'];
			return chart(lostdata,wondata,width,height,categories,colors);
		})();
		function chart(lostdata,wondata,width,height,categories,colors)
		{
			var grid = d3.range(11).map(function(i){
				return {'x1':0,'y1':0,'x2':width,'y2':0};
			});

			var xscale = d3.scale.linear()
							.domain([0,12])
							.range([0,width]);

			var yscale = d3.scale.linear()
							.domain([100,0])
							.range([height,0]);

			var colorScale = d3.scale.quantize()
							.domain([0,categories.length])
							.range(colors);

			var canvas = d3.select('#wrapper')
							.append('svg')
							.attr({'width':1000,'height':550});

			var grids = canvas.append('g')
							  .attr('id','grid_chartOne')
							  .attr('transform','translate(50,20)')
							  .selectAll('line')
							  .data(grid)
							  .enter()
							  .append('line')
							  .attr({'x1':function(d){ return d.x1; },
									 'y1':function(d,i){ return yscale(i*10); },
									 'x2':function(d){ return d.x2; },
									 'y2':function(d,i){ return yscale(i*10); },
								})
							  .style({'stroke':'#adadad','stroke-width':'1px'});

			var	xAxis = d3.svg.axis();
				xAxis
					.orient('bottom')
					.scale(xscale)
					.tickFormat(function(d,i){ return categories[i]; })
					.tickValues(d3.range(21));

			var	yAxis = d3.svg.axis();
				yAxis
					.orient('left')
					.scale(yscale)
					.tickSize(2)
					.tickFormat(function(d,i){ console.log(d); return (i*10)+"%"; })
					.tickValues([0,10,20,30,40,50,60,70,80,90,100].reverse());

			var y_xis = canvas.append('g')
							  .attr("transform", "translate(50,20)")
							  .attr('id','yaxis_chartOne')
							  .call(yAxis);

			var x_xis = canvas.append('g')
							  .attr("transform", "translate(72,465)")
							  .attr('id','xaxis_chartOne')
							  .call(xAxis);

			var wonchart = canvas.append('g')
					.attr("transform", "translate(60,20)")
					.attr('id','wonbars')
					.selectAll('rect')
					.data(lostdata)
					.enter()
					.append('rect')
					.attr('height',function(d){ return 0; })
					.attr({'x':function(d,i){ return xscale(i); },
						   'y':function(d){ return yscale(d); } })
					.style('fill',function(d,i){ return colors[0]; })
					.attr('width',function(d){ return 30; });

			var wonpercent = canvas.append('g')
								.attr("transform", "translate(60,40)")
								.attr('id','wonperc')
								.selectAll('text')
								.data(lostdata)
								.enter()
								.append('text')
								.text(function(d){return d+"%";})
								.attr('x',function(d,i){ return xscale(i); })
								.attr('y',function(d,i){ return yscale(d)+10; });

			var losschart = canvas.append('g')
								.attr("transform", "translate(60,20)")
								.attr('id','lossbars')
								.selectAll('rect')
								.data(lostdata)
								.enter()
								.append('rect')
								.attr("height", function(d) {return 0; })
								.attr({'x':function(d,i){ return xscale(i); },
									'y':function(d){ return 0; } })
								.style('fill',function(d,i){ return colors[1]; })
								.attr('width',function(d){ return 30; });

			var losspercent = canvas.append('g')
								.attr("transform", "translate(60,40)")
								.attr('id','lossperc')
								.selectAll('text')
								.data(lostdata)
								.enter()
								.append('text')
								.text(function(d){return d+"%";})
								.attr('x',function(d,i){ return xscale(i); })
								.attr('y',function(d,i){ return yscale(d)-30; });

			var bars = canvas.append('g')
								.attr('transform','translate(50,500)')
								.selectAll('rect')
								.data(['Loss','Win'])
								.enter()
								.append('rect')
								.attr({'width':50,'height':15,'x':function(d,i){ return i*60; },'y':0})
								.style('fill',function(d,i){ return colors[i]; });

			var barstext = canvas.append('g')
								.attr('transform','translate(60,500)')
								.selectAll('text')
								.data(['Loss','Win'])
								.enter()
								.append('text')
								.text(function(d){ return d; })
								.attr({'x':function(d,i){ return i*50; },'y':32});

			d3.select("svg").selectAll("#wonbars rect")
						    .data(wondata)
						    .transition()
						    .duration(1000)
						    .attr("height", function(d) {return yscale(d); });

			d3.select("svg").selectAll("#lossbars rect")
				    .data(lostdata)
				    .transition()
				    .duration(1000)
				    .attr("height", function(d) {return yscale(d); });

		}
	</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Dsnap - Charts</title>
	<style>
	#xaxis .domain {
	fill:none;
	stroke:#000;
	}
	#xaxis text, #yaxis text {
	font-size: 12px;
	}
	#xaxis_chartOne .domain{
	display:none;
	}
	</style>
	</head>
	<body>
	<div id='wrapper'></div>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script>
	(function linearGraph()
	{
	var lostdata = [78, 67, 88, 78, 67,88,78,67,88,78,67,88,67];
	var wondata = [22, 33, 12, 22, 33,12,22,33,12,22,33,12,33];
	var width = 1000;
	var height = 450;
	var categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep','Oct','Nov','Dec','Jan'];
	var colors = ['#0000b4','#BFEF61'];
	return chart(lostdata,wondata,width,height,categories,colors);
	})();
	function chart(lostdata,wondata,width,height,categories,colors)
	{
	var grid = d3.range(11).map(function(i){
	return {'x1':0,'y1':0,'x2':width,'y2':0};
	});

	var xscale = d3.scale.linear()
	.domain([0,12])
	.range([0,width]);

	var yscale = d3.scale.linear()
	.domain([100,0])
	.range([height,0]);

	var colorScale = d3.scale.quantize()
	.domain([0,categories.length])
	.range(colors);

	var canvas = d3.select('#wrapper')
	.append('svg')
	.attr({'width':1000,'height':550});

	var grids = canvas.append('g')
	.attr('id','grid_chartOne')
	.attr('transform','translate(50,20)')
	.selectAll('line')
	.data(grid)
	.enter()
	.append('line')
	.attr({'x1':function(d){ return d.x1; },
	'y1':function(d,i){ return yscale(i*10); },
	'x2':function(d){ return d.x2; },
	'y2':function(d,i){ return yscale(i*10); },
	})
	.style({'stroke':'#adadad','stroke-width':'1px'});

	var xAxis = d3.svg.axis();
	xAxis
	.orient('bottom')
	.scale(xscale)
	.tickFormat(function(d,i){ return categories[i]; })
	.tickValues(d3.range(21));

	var yAxis = d3.svg.axis();
	yAxis
	.orient('left')
	.scale(yscale)
	.tickSize(2)
	.tickFormat(function(d,i){ console.log(d); return (i*10)+"%"; })
	.tickValues([0,10,20,30,40,50,60,70,80,90,100].reverse());

	var y_xis = canvas.append('g')
	.attr("transform", "translate(50,20)")
	.attr('id','yaxis_chartOne')
	.call(yAxis);

	var x_xis = canvas.append('g')
	.attr("transform", "translate(72,465)")
	.attr('id','xaxis_chartOne')
	.call(xAxis);

	var wonchart = canvas.append('g')
	.attr("transform", "translate(60,20)")
	.attr('id','wonbars')
	.selectAll('rect')
	.data(lostdata)
	.enter()
	.append('rect')
	.attr('height',function(d){ return 0; })
	.attr({'x':function(d,i){ return xscale(i); },
	'y':function(d){ return yscale(d); } })
	.style('fill',function(d,i){ return colors[0]; })
	.attr('width',function(d){ return 30; });

	var wonpercent = canvas.append('g')
	.attr("transform", "translate(60,40)")
	.attr('id','wonperc')
	.selectAll('text')
	.data(lostdata)
	.enter()
	.append('text')
	.text(function(d){return d+"%";})
	.attr('x',function(d,i){ return xscale(i); })
	.attr('y',function(d,i){ return yscale(d)+10; });

	var losschart = canvas.append('g')
	.attr("transform", "translate(60,20)")
	.attr('id','lossbars')
	.selectAll('rect')
	.data(lostdata)
	.enter()
	.append('rect')
	.attr("height", function(d) {return 0; })
	.attr({'x':function(d,i){ return xscale(i); },
	'y':function(d){ return 0; } })
	.style('fill',function(d,i){ return colors[1]; })
	.attr('width',function(d){ return 30; });

	var losspercent = canvas.append('g')
	.attr("transform", "translate(60,40)")
	.attr('id','lossperc')
	.selectAll('text')
	.data(lostdata)
	.enter()
	.append('text')
	.text(function(d){return d+"%";})
	.attr('x',function(d,i){ return xscale(i); })
	.attr('y',function(d,i){ return yscale(d)-30; });

	var bars = canvas.append('g')
	.attr('transform','translate(50,500)')
	.selectAll('rect')
	.data(['Loss','Win'])
	.enter()
	.append('rect')
	.attr({'width':50,'height':15,'x':function(d,i){ return i*60; },'y':0})
	.style('fill',function(d,i){ return colors[i]; });

	var barstext = canvas.append('g')
	.attr('transform','translate(60,500)')
	.selectAll('text')
	.data(['Loss','Win'])
	.enter()
	.append('text')
	.text(function(d){ return d; })
	.attr({'x':function(d,i){ return i*50; },'y':32});

	d3.select("svg").selectAll("#wonbars rect")
	.data(wondata)
	.transition()
	.duration(1000)
	.attr("height", function(d) {return yscale(d); });

	d3.select("svg").selectAll("#lossbars rect")
	.data(lostdata)
	.transition()
	.duration(1000)
	.attr("height", function(d) {return yscale(d); });

	}
	</script>
	</body>
	</html>