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;
    stroke-width: 3;
}

.data2 {
    stroke: green;
    stroke-width: 3;    
}

.todayLine {
    stroke: grey;
    stroke-width: 3;
}

.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: lightgrey;
}

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

.y.axisRight text {
    fill: green;
}

.y.axisLeft text {
    fill: steelblue;
}
.domain {
    display: none;
}

svg circle.circleBlue {
    fill: steelblue;
}

svg circle.circleGreen {
    fill: green;
}

JavaScript

/*
   averageDaysOpportunitiesOpenByQuarter: 127.3333,
    averageDaysOpportunitiesOpenByYear: 104.003,
    averageDaysToCloseByQuarter: 47.2411,
    averageDaysToCloseByYear: 44.4667,
    averageDealSizeByQuarter: 43537.08725,
    averageDealSizeByYear: 36503.240559,
    conversionRateByQuarter: 8,
    conversionRateByYear: 14,
    dealsByQuarter: 80,
    dealsByYear: 465,
    openOpportunitiesByQuarter: 323,
    openOpportunitiesByYear: 331,
    quarterlyQuota: 3720000,
    salesByQuarter: 3482966.98,
    salesByYear: 16974006.86,
    salesVolumeByQuarter: 3482966.98,
    salesVolumeByYear: 16974006.86,
    yearlyQuota: 14880000
    
Won Deal
false  3373
true    465
*/

data = {
    averageDaysOpportunitiesOpenByYear: 104.003,
    averageDaysToCloseByYear: 44.4667,
    averageDealSizeByYear: 36503.240559,
    conversionRateByYear: 14,
    dealsByYear: 465,
    openOpportunitiesByYear: 331,
    salesByYear: 16974006.86,
    salesVolumeByYear: 16974006.86,
    yearlyQuota: 14880000
};



		// define dimensions of graph
		var m = [80, 80, 80, 80]; // margins
		var w = 800 - 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];
        
var maxY = 14;  //deals should be proportional with sales to get same number of ticks


var minDate = new Date(new Date().getFullYear(), 0, 1);
var maxDate = new Date(new Date().getFullYear(), 11, 31);
var today = new Date();
//console.log(today);

var dates = [minDate, today];


//.tickFormat(d3.time.format('%b')
		// X scale will fit all values from data[] within pixels 0-w
		//var x = d3.scale.linear().domain([0, data1.length]).range([0, w]);//data1.length - 1

var x = d3.time.scale().domain([minDate, maxDate]).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...