I created a function to create multiple piecharts of a SharePoint list column:

var countOrbit = {};
var OrbitName = 'Orbit';


google.charts.load('current', {packages:['corechart']});
google.charts.setOnLoadCallback(drawAllCharts(countOrbit, OrbitName));

    function drawAllCharts(countChoices, name) {
        var rows = [];
        for (var property in countChoices) {
            if (countChoices.hasOwnProperty(property)) {
                rows.push([property, countChoices[property]]);

        var datatable = new google.visualization.DataTable();
        datatable.addColumn('string', 'Type');
        datatable.addColumn('number', 'Quantity');
        var options = {
            title: String(name),
            is3D: 'true'
        var chart = new google.visualization.PieChart(document.getElementById(String(name)+'Chart'));
        chart.draw(datatable, options);


        <div id="OrbitChart" style="width:700px;height:500px;"></div>

But I get this error:

Statistics.aspx:689 Uncaught TypeError: Cannot read property 'DataTable' of undefined
    at drawAllCharts (Statistics.aspx:689)
    at Object.success (Statistics.aspx:676)

This helped me: https://groups.google.com/forum/#!topic/google-visualization-api/sk39mXZZ15U

I used

google.charts.setOnLoadCallback(function(){drawAllCharts(countOrbit, 'Orbit')});

instead of

google.charts.setOnLoadCallback(drawAllCharts(countOrbit, OrbitName));
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.