{{{
#!html
	<script type="text/javascript" src="https://www.google.com/jsapi"></script>
	<script type="text/javascript">
	
	// Load the Visualization API and the piechart package.
	google.load('visualization', '1.0', {'packages':['corechart']});
	
	// Set a callback to run when the Google Visualization API is loaded.
	google.setOnLoadCallback(drawCharts);
	
	// Callback that creates and populates a data table,
	// instantiates the pie chart, passes in the data and
	// draws it.
	function drawCharts() {
	
		var query = new google.visualization.Query(
		'https://docs.google.com/spreadsheet/tq?range=A1%3AC20&key=0AheWVEgfgX69dF9hbWNQT3RGUGJkYjhMRGdvSEFqVHc&gid=0&headers=1');
		
		// Send the query with a callback function.
		query.send(handleQueryResponse);
	}
	
	function handleQueryResponse(response) {
		if (response.isError()) {
			alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
			return;
		}
	
		var rawData = response.getDataTable();
		var newPapersData = rawData.clone();
		var citationsData = rawData.clone();
		
		newPapersData.removeColumn(2);
		citationsData.removeColumn(1);
	
		// Set chart options
		var newPapersOptions = {'title':'New Papers by WARP Users',
		width:300, height:200, 
		axisTitlesPosition:'none',
		legend:{'position':'none'},
		colors:['blue'],
		chartArea:{left:'25',top:'25',width:'100%',height:'75%'}};
		
		var citationsChartOptions = {'title':'WARP Citations',
		width:300, height:200, 
		axisTitlesPosition:'none',
		legend:{'position':'none'},
		colors:['green'],
		chartArea:{left:'25',top:'25',width:'100%',height:'75%'}};
	
		// Instantiate and draw our chart, passing in some options.
		var newPapersChart = new google.visualization.ColumnChart(document.getElementById('div_newPapersChart'));
		var citationsChart = new google.visualization.ColumnChart(document.getElementById('div_citationsChart'));
		
		newPapersChart.draw(newPapersData, newPapersOptions);
		citationsChart.draw(citationsData, citationsChartOptions);
	}
	</script>
	

}}}

{{{
#!html
<div id="div_newPapersChart" style="float:right"></div><br clear=right />
<div id="div_citationsChart" style="float:right"></div>
}}}