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(); }