PROJECTING QUOTA SUCCESS - prototype

by Igor Cuckovic

HTML

<div id="graph" class="aGraph" style="position:absolute;top:0px;left:0; float:left;"></div>

CSS

path {
				stroke-width: 1;
				fill: none;
			}
			
			.data1 {
				stroke: steelblue;
			}

			.data2 {
				stroke: orange;
			}

			.axis {
			  shape-rendering: crispEdges;
			}

			.x.axis line {
			  stroke: lightgrey; 
			}

			.x.axis .minor {
			  stroke-opacity: .5;
			}

			.x.axis path {
			  display: none;
			}
			
			.x.axis text {
				font-size: 14;
			}

			.y.axis line, .y.axis path {
			  fill: none;
			  stroke: #000;
			}

			.y.axis text {
				font-size: 14;
			}

			.y.axisRight text {
				fill: orange;
			}
			
			.y.axisLeft text {
				fill: steelblue;
			}

JavaScript

/* implementation heavily influenced by http://bl.ocks.org/1166403 */
		/* some arguments AGAINST the use of dual-scaled axes line graphs can be found at http://www.perceptualedge.com/articles/visual_business_intelligence/dual-scaled_axes.pdf */


data = {
    averageDaysOpportunitiesOpenByQuarter: 22,
    averageDaysOpportunitiesOpenByYear: 42,
    averageDaysToCloseByQuarter: 22,
    averageDaysToCloseByYear: 24,
    averageDealSizeByQuarter: 43500,
    averageDealSizeByYear: 32500,
    conversionRateByQuarter: 13,
    conversionRateByYear: 13,
    dealsByQuarter: 60,
    dealsByYear: 390,
    openOpportunitiesByQuarter: 10,
    openOpportunitiesByYear: 17,
    quarterlyQuota: 37200000,
    salesByQuarter: 432400,
    salesByYear: 2162000,
    salesVolumeByQuarter: 14790689,
    salesVolumeByYear: 22220689,
    yearlyQuota: 148800000
};

		
		// define dimensions of graph
		var m = [80, 80, 80, 80]; // margins
		var w = 600 - m[1] - m[3];	// width
		var h = 400 - m[0] - m[2]; // height
		
		// create a simple data array that we'll plot with a line (this array represents only the Y values, X will just be the index location)
		var data1 = [0, 6];
		var data2 = [0, 367];

		// X scale will fit all values from data[] within pixels 0-w
		var x = d3.scale.linear().domain([0, data1.length]).range([0, w]);
		// Y scale will fit values from 0-10 within pixels h-0 (Note the inverted domain for the y-scale: bigger is up!)
		var y1 = d3.scale.linear().domain([0, 10]).range([h, 0]); // in real world the domain would be dynamically calculated from the data
		var y2 = d3.scale.linear().domain([0, 700]).range([h, 0]);  // in real world the domain would be dynamically calculated from the data
			// automatically determining max range can work something like this
			// var y = d3.scale.linear().domain([0, d3.max(data)]).range([h, 0]);

		// create a line function that can convert data[] into x and y points
		var line1 = d3.svg.line()
			// assign the X function to plot our line...