Dynamically Create Charts Using MooTools MilkChart and Google Analytics

The prospect of creating graphics charts with JavaScript is exciting. It's also the perfect use of JavaScript -- creating non-essential features with unobtrusive scripting. I've created a mix of PHP (the Analytics class), HTML, and MooTools JavaScript that will connect to Google Analytics, create an HTML table with the statistics for a given month, and use MooTools MilkChart to colorfully chart them out.

The PHP

/* defaults */
$month = date('n');
$year = date('Y');
$type = 'Column';

/* submission? */
if($_GET['month'] || $_GET['year']):
	/* cleanse lookups */
	$month = (int) $_GET['month']; if(!$month) { $month = 1; }
	$year = (int) $_GET['year']; if(!$year) { $year = date('Y'); }
	/* retrieve information from google analytics */
	require 'ga/analytics.class.php';
	$analytics = new analytics('youraccount@gmail.com', 'yourP@ss');
	$analytics->setProfileByName('yourdomain.com');
	$analytics->setMonth($month,$year);
	$visits = $analytics->getVisitors();
	$views = $analytics->getPageviews();
	/* build tables */
	if(count($visits)) {
		//visits - php
		$visits_table_data = '<table id="data-table-visits">';
		/* $visits_table_data.= '<thead><tr><th>Unique Visits</th><th>PageViews</th></tr></head><tbody>'; */
		$visits_table_data.= '<thead><tr><th>Unique Visits</th></tr></head><tbody>';
		foreach($visits as $day=>$visit) { 
			/*
			$visits_table_data.= '<tr><td>'.$visit.'</td><td>'.$views[$day].'</td></tr>'."\n"; 
			$visits_table_foot.= '<td>'.$day.'</td><td>'.$day.'</td>'."\n";
			*/
			$visits_table_data.= '<tr><td>'.$visit.'</td></tr>'."\n"; 
			$visits_table_foot.= '<td>'.$day.'</td>'."\n";
		}
		$visits_table_data.= '</tbody>';
		$visits_table_data.= '<tfoot><tr>'.$visits_table_foot.'</tr></tfoot>';
		$visits_table_data.= '</table>';
	}
endif;

It all kicks off with grabbing the information from Google Analytics. Simply provide the time frame you would like statistics for. I usually choose to retrieve statistics by the month.

The Generated HTML & MooTools JavaScript

<h2>Select Your Month/Year</h2>
<form method="get">
	<select name="month" id="month">
		<option value="">-- Select Month --</option>
		<?php
			for($x = 1; $x <= 12; $x++):
				echo '<option value="',$x,'"',($month == $x ? ' selected="selected"' : ''),'>',date('F',mktime(0,0,0,$x,1,2009)),'</option>';
			endfor;
		?>
	</select>
	<select name="year" id="year">
		<option value="">-- Select Year --</option>
		<?php
			for($x = 2008; $x <= date('Y'); $x++):
				echo '<option value="',$x,'"',($year == $x ? ' selected="selected"' : ''),'>',$x,'</option>';
			endfor;
		?>
	</select>
	<select name="type" id="type">
		<option value="">-- Select Chart Type --</option>
		<?php
			$chart_types = array('Column','Bar','Line','Scatter','Pie');
			foreach($chart_types as $chart_type):
				echo '<option value="',$chart_type,'"',($type == $chart_type ? ' selected="selected"' : ''),'>',$chart_type,'</option>';
			endforeach;
		?>
	</select>
	<input type="submit" name="submit" id="submit" value="Get Statistics!" />
</form>

<?php 
	//php time - echo tables
	if($visits_table_data) { echo '<h3>Visits</h3>', $visits_table_data,'<br />'; } 
?>
<?php if(count($visits)): ?>
	<script type="text/javascript">
		var visits = new MilkChart.<?php echo $_GET['type']; ?>('data-table-visits',{
			width: 960,
			height: 550,
			font: 'tahoma',
			showValues: false,
			useFooter: true
		});
	</script>
<?php endif; ?>

Using the THEAD, TBODY, and TFOOT elements is extremely important in the ensuring the correct labels are placed within the generated chart. The data table itself is very simple. MilkChart will take the above table and create a CANVAS element which will contain the chart.

There are five different chart types you may choose from: Column, Bar, Pie, Line, Scatter. MilkChart takes full advantage of MooTools' inheritance model as each type of chart's class extends the base MilkChart class.

I love the way the MilkChart developer(s) utilized MooTools' OOP/inheritance model to perfection. I also love that MilkChart requires the bare minimum of data for the HTML table. MilkChart isn't without its flaws though. A few of the table types had a fit about including multiple dimensions (using both page views and visits within the same chart, for example) and value label placement has yet to be perfected.