Multiple types of Google Charts on single page

Question

I am trying to get multiple types of Google Charts on one page. Pie graph and Calender chart. When I try to do this, I get the following error in place of the Pie Chart:

You called the draw() method with the wrong type of data rather than a DataTable or DataView

The error goes away if I only do one chart at a time. And it is always the cart on the top that shows the same error. The best I can tell its because teh data is of a different type.. So I figured it had something to do with interfering variables. I added a uniqe identifier to each chart's data and I still get the issue...

Here is the HTML output of my PHP:

<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
    google.load('visualization', '1', {
        packages : [ 'corechart' ]
    });
    google.setOnLoadCallback(drawChart_testGraph);
    function drawChart_testGraph() {

        var data_testGraph = google.visualization.arrayToDataTable([
                [ 'Department', 'Count' ], [ 'Accounting', 1 ], [ 'Lobby', 1 ],
                [ 'Customer Apps', 1 ], [ 'PC Support', 0 ],
                [ 'Collections', 0 ], [ 'Inventory', 1 ], [ 'Billing', 0 ],
                [ 'Executive', 4 ], [ 'Customer Service', 0 ],
                [ 'Sales and Marketing', 0 ], [ 'Product and Development', 1 ],
                [ 'Materials Management', 0 ], [ 'Remittance', 0 ],
                [ 'Support Services', 0 ], [ 'Indirect Distribution', 1 ],
                [ 'Provisioning Support', 1 ], ]);

        var options_testGraph = {
            title : 'Usage by department',
            backgroundColor : 'transparent',
            is3D : 'false',
        };

        var chart_testGraph = new google.visualization.PieChart(document
                .getElementById('testGraph'));

        chart_testGraph.draw(data_testGraph, options_testGraph);
        console.log(data_testGraph);
    }
</script>
<div id='testGraph' style='width: 900px; height: 500px;'></div>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
    google.load('visualization', '1.1', {
        packages : [ 'calendar' ]
    });
    google.setOnLoadCallback(drawChart_testGraph2);
    function drawChart_testGraph2() {

        var dataTable_testGraph2 = new google.visualization.DataTable();
        dataTable_testGraph2.addColumn({
            type : 'date',
            id : 'Department'
        });
        dataTable_testGraph2.addColumn({
            type : 'number',
            id : 'Count'
        });
        dataTable_testGraph2.addRows([ [ new Date('2014, 09, 18'), 1 ],
                [ new Date('2014, 09, 17'), 1 ],
                [ new Date('2014, 09, 15'), 6 ],
                [ new Date('2014, 09, 13'), 1 ],
                [ new Date('2014, 09, 12'), 2 ], ]);

        var options_testGraph2 = {
            title : 'Usage by department',
            backgroundColor : 'white',
            is3D : 'false',
        };

        var chart_testGraph2 = new google.visualization.Calendar(document
                .getElementById('testGraph2'));

        chart_testGraph2.draw(dataTable_testGraph2, options_testGraph2);

    }
</script>
<div id='testGraph2' style='width: 900px; height: 500px;'></div>
</div>

Any ideas?

Answer 1

That is not the right way to load google packages, you are trying to load google visualization packages 2 times, so the second one is overwriting the first one. You need to remove the second load and just load both in your first script: (or load both the 2 times)

google.load('visualization', '1', {
    packages : [ 'corechart', 'calendar' ]
});