Column charts annotations

by heennkkee

HTML

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['controls']}]}"></script>
<div id="chart_div" style=""></div>
<div id="chart_div_2" style=""></div>

JavaScript

google.setOnLoadCallback(drawChart);

function drawChart() {
    var data = google.visualization.arrayToDataTable([
          ['Descr', 'Value', 'Filter'],
          ['ipad', 5, 'Month'],
          ['iPhone', 18, 'Month'],
          ['iPod', 33, 'Month'],
          ['ipad', 5, 'Year'],
          ['iPhone', 11, 'Year'],
        ]);

    var monthView = new google.visualization.DataView(data);
    monthView.setRows(data.getFilteredRows([{column: 2, value: 'Month'}]));
    monthView.setColumns([0, 1]);
    
    var yearView = new google.visualization.DataView(data);
		yearView.setRows(data.getFilteredRows([{column: 2, value: 'Year'}]));
    yearView.setColumns([0, 1]);

    var monthWrapper = new google.visualization.ChartWrapper({
        chartType: 'ColumnChart',
        containerId: 'chart_div',
        dataTable: monthView,
        options: {
        	title: 'Average sales per month'
        }
    });
		monthWrapper.draw();
    
    google.visualization.events.addOneTimeListener(monthWrapper, 'ready', function() {
    	var yearWrapper = monthWrapper.clone();
      yearWrapper.setContainerId('chart_div_2');
      yearWrapper.setOption('title', 'Average sales per Year');
      yearWrapper.setDataTable(yearView);

      yearWrapper.draw();
    });
}