Linked Google Charts

HTML

<script src="http://www.google.com/jsapi?.js"></script>
<div id="chart_div_1"></div>
<div id="chart_div_2"></div>

JavaScript

function drawChart() {
    // Create the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Slices');
    data.addRows([
        ['Mushrooms', 3],
        ['Onions', 1],
        ['Olives', 1],
        ['Zucchini', 1],
        ['Pepperoni', 2]
    ]);
    
    // Set chart options
    var options = {
        title: 'How Much Pizza I Ate Last Night',
        width: 400,
        height: 300
    };
    
    // Instantiate and draw our chart, passing in some options.
    var chart1 = new google.visualization.PieChart(document.getElementById('chart_div_1'));
    var chart2 = new google.visualization.BarChart(document.getElementById('chart_div_2'));
    
    // set up event handlers
    // when a user clicks on the PieChart, set the selection on the BarChart
    google.visualization.events.addListener(chart1, 'select', blobby1);
    
    function blobby1() {
    alert("nnn");
        var selection = chart1.getSelection();
        for (var i = 0; i < selection.length; i++) {
            // add in column information to specify selection in BarChart
            selection[i].column = 1;
        }
        chart2.setSelection(selection);
    };
    
    // when a user clicks on the BarChart, set the selection on the PieChart
    google.visualization.events.addListener(chart2, 'select', blobby2)
    
    function blobby2() {
        var selection = chart2.getSelection();
        for (var i = 0; i < selection.length; i++) {
            // remove column information for selection in PieChart
            selection[i].column = null;
        }
        chart1.setSelection(selection);
    };
    
    chart1.draw(data, options);
    chart2.draw(data, options);
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});