I took me a while to understand how Google Charts can be extended with a zoom/drill in data set feature. You have to add then google.visualization.events.addListener method which fetch the selected datapoint of a graph. With some extra javascript code you can reload the chart with a more detailed dataset. See example below!
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["bar"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var options = {
bars: "vertical",
bar: {groupWidth: "90%"},
legend: { position: "none"},
vAxis: {format: "decimal"},
isStacked:true,colors: ["#0066cc", "#808080"],vAxis: { format:"decimal", viewWindow: { min: 0, max: ".round($max_forecast+100)." } }, series: {
3: {
targetAxisIndex: 1
}
}
};
var data = google.visualization.arrayToDataTable([['','Low (kWh)','Normal (kWh)','Solar (kWh)','Forecast (kWh)'],['2006',0,0,0,0],['2007',0,0,0,0],['2008',0,0,0,0],['2009',0,0,0,0],['2010',0,0,0,0],['2011',0,0,0,0],['2012',0,0,0,0],['2013',0,0,0,0],['2014',0,0,0,0],['2015',0,0,0,0],['2016',20,20,11,278.75]]);
var chart = new google.charts.Bar(document.getElementById("chart_div"));
chart.draw(data, google.charts.Bar.convertOptions(options));
google.visualization.events.addListener(chart, "select", selectHandler);
function selectHandler(e) {
var year = data.getValue(chart.getSelection()[0].row, 0);
link("pid=30&eid=88&date="+year+"-1-1");
}
}
function link(value)
{
var form = document.forms['plaatenergy'];
var newInput = document.createElement('input');
newInput.setAttribute('type','hidden');
newInput.setAttribute('name','token');
newInput.setAttribute('value',value);
form.appendChild(newInput);
form.submit();
}