<!DOCTYPE html>
<html lang="en">
{{fscript
	"Today's date minus 30 days"
	start := (NSDate date) mcDateByAddingDays:-30.
	end := NSDate date.
	
	dates := MCReportDateEnumerator allDailyDatesBetween:start end:end.

	opps := {}.
	contacts := {}.
	orgs := {}.
	labels := {}.

	dates do:[:date |
		begin := date mcDateAsBeginningOfDay.
		endDay := date mcDateAsEndOfDay.

		labels add:(date mcDayOfMonth).
			
	 	o := objectContext resultCountForEntityNamed:'Opportunity' qualifierLocum:'createDate >= $start and createDate <= $end' bindings:#{'start' -> begin, 'end' -> endDay}.
		opps add:o.

	 	c := objectContext resultCountForEntityNamed:'Contact' qualifierLocum:'createDate >= $start and createDate <= $end' bindings:#{'start' -> begin, 'end' -> endDay}.
		contacts add:c.
		
		org := objectContext resultCountForEntityNamed:'Organization' qualifierLocum:'createDate >= $start and createDate <= $end' bindings:#{'start' -> begin, 'end' -> endDay}.
		orgs add:org.
		
		].
		
	globals setLabels:labels JSONRepresentation.
	globals setContacts:contacts JSONRepresentation.
	globals setOpportunities:opps JSONRepresentation.
	globals setOrganizations:orgs JSONRepresentation.

}}
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="{{framework}}/default.css" type="text/css" charset="utf-8">
	<link rel="stylesheet" href="{{framework}}/screen.css" type="text/css" charset="utf-8" media="screen">
	<link rel="stylesheet" href="{{framework}}/print.css" type="text/css" charset="utf-8" media="print">
	<script src="{{framework}}/raphael.js"></script>
	<script src="{{framework}}/ico.js"></script>
	<script type="text/javascript">
		function $(id) {
		  return document.getElementById(id);
		}
	</script>
	
	<style type="text/css">
	.linegraph { width: 650px; height: 400px; background-color: #fff; margin-left: 20px; margin-bottom: 30px;}
	.orgs {border:5px solid #000099;}
	.contacts {border:5px solid #990000;}
	.opps {border:5px solid #009900;}
	</style>
		
</head>
<body>
	<h1>{{localize 'Opportunity vs Contact Creation in the last 30 days'}}</h1>
	<p>{{localize 'Compare the creation ratio of opportunities to people to companies.'}}</p>
	
	
	<div id="graph" class="linegraph"></div>
	<script type="text/javascript">
		new Ico.LineGraph($('graph'), {
		  one: {{organizations}},
		  two: {{contacts}},
		  three: {{opportunities}}
		}, {
		  markers: 'circle',
		  colours: { one: '#000099', two: '#990000', three: '#009900'},
		  stroke_width: 1,
		  labels: {{labels}},
		  meanline: false,
		  grid: true,
		  grid_colour: '#eee' 
		}
		);
	</script>
	<p><span class="orgs"></span>&nbsp&nbspCompanies&nbsp&nbsp<span class="contacts"></span>&nbsp&nbspPeople&nbsp&nbsp<span class="opps"></span>&nbsp&nbspOpportunities</p>
	
	
	<div id="reportfooter">
	{{localize 'Generated by %@ on %@', objectContext.user.contact.cachedName, date}}.
	</div>

</body>
</html>