CODEWITHSUNDEEP
javascriptgoogle-visualization
Asif Momin
Asif Momin

Reputation: 19

Google line chart : visualization library. Uncaught TypeError: Cannot call method 'arrayToDataTable' of undefined

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<script type="text/javascript">
google.load("visualization", "1", {packages: ["corechart"]});
google.setOnLoadCallback(drawBarChart);

function drawBarChart() {
    var data = google.visualization.arrayToDataTable([
    ['Subject Name', 'Correct', 'Wrong'],
    ['Four-digit Numbers', 1, 1],
    ['Substraction with Borrowing', 1, 0],
    ['Multiplication', 1, 0],
    ['Measures of Mass', 1, 0],
]);

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1,
                        { calc: "stringify",
                          sourceColumn: 1,
                          type: "string",
                          role: "annotation"
                        },
                        2,
                        { calc: "stringify",
                          sourceColumn: 2,
                          type: "string",
                          role: "annotation" }
    ]);


    var options = {
        title: 'No. of Right & Wrong Questions',
        isStacked: true,
        legend: { position: 'top',alignment :'end' },
        chartArea: {width: '85%'},
        series: [
            {color:'#199EAF'},
            {color:'#BD2B53'}
        ]

    };

    var chart = new google.visualization.ColumnChart(document.getElementById("bar_1"));
    chart.draw(view, options);
}

I am getting the error Uncaught TypeError: Cannot call method 'arrayToDataTable' of undefined. Looks like the visualisation package is not getting initialised. What I am doing wrong here?

Upvotes: 1

Views: 1670

Answers (1)

Popo
Popo

Reputation: 2460

Since I can't test this I am not sure, but I do see a syntax error in what you posted:

function drawBarChart() {
    var data = google.visualization.arrayToDataTable([
    ['Subject Name', 'Correct', 'Wrong'],
    ['Four-digit Numbers', 1, 1],
    ['Substraction with Borrowing', 1, 0],
    ['Multiplication', 1, 0],
    ['Measures of Mass', 1, 0],
]);

there should be no comma after the last item:

function drawBarChart() {
    var data = google.visualization.arrayToDataTable([
    ['Subject Name', 'Correct', 'Wrong'],
    ['Four-digit Numbers', 1, 1],
    ['Substraction with Borrowing', 1, 0],
    ['Multiplication', 1, 0],
    ['Measures of Mass', 1, 0]
]);

Upvotes: 1

Related Questions