kirankumaramruthaluri · June 6, 2016 07:51
diff --git a/index.html b/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>