Google Chart : Unable to get property 'arrayToDataTable'

Question

I want to show google chart using data that i acquired from SQL server using javascript. But i got IE error "Unable to get property arrayToDataTable" even i already add google chart JS. I already check the data by alert it, and the data is ok. How to fix this?

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  var array = loadData();
  google.load("visualization", "1.1", {packages:["bar"]});
  google.setOnLoadCallback(drawChart(array));

  function loadData(){
    var array = [
                  ['Year', 'Sales', 'Expenses', 'Profit']
                ];

    //Connection
    var connection = new ActiveXObject("ADODB.Connection") ;

    var connectionstring="Provider=SQLOLEDB.1;Password=Password1234;Persist Security Info=True;User ID=sa;Initial Catalog=all_data;Data Source=172.16.11.90";

    connection.Open(connectionstring);
    var rs = new ActiveXObject("ADODB.Recordset");

    rs.Open("SELECT * FROM bar_chart", connection);

    rs.MoveFirst;

    while(!rs.eof)
    {
      array.push([rs.fields(0), parseInt(rs.fields(1)), parseInt(rs.fields(2)), parseInt(rs.fields(3))]);
      rs.movenext;
    }

    rs.close;
    connection.close;

    return array;
  }

  function drawChart(x) {
    alert(x[4][3]); 
    var data = google.visualization.arrayToDataTable(x);

    var options = {
      chart: {
        title: 'Company Performance',
        subtitle: 'Sales, Expenses, and Profit: 2014-2017'
      },
      bars: 'horizontal' // Required for Material Bar Charts.
    };

    var chart = new google.charts.Bar(document.getElementById('barchart_material'));

    chart.draw(data, options);
  }
</script>

And here is my html:

<body>
    <div id="barchart_material" style="width: 900px; height: 500px;"></div>
</body>

Possible duplicate of [JavaScript: Passing parameters to a callback function](http://stackoverflow.com/questions/3458553/javascript-passing-parameters-to-a-callback-function) — JJJ, Dec 18 '15 at 08:56
i.e. `google.setOnLoadCallback(drawChart(array))` calls `drawChart` immediately, it doesn't set it as the callback. — JJJ, Dec 18 '15 at 08:57

score 0 · Accepted Answer · answered Dec 18 '15 at 17:29

This error occurs since google.setOnLoadCallback function expects a callback as an argument.

Replace:

var array = loadData();
google.setOnLoadCallback(drawChart(array));

In this case drawChart function is invoked immediately without waiting google visualization API to load

with:

google.setOnLoadCallback(function () {
    var array = loadData();
    drawChart(array);
});

Example

google.load("visualization", "1.1", { packages: ["bar"] });
google.setOnLoadCallback(function () {
    var data = generateData();
    drawChart(data);
});

function generateData() {
    var data = [
                  ['Year', 'Sales', 'Expenses', 'Profit']
    ];
    for (var year = 2000; year < 2010; year++) {
        data.push([year.toString(), getRandomArbitrary(100, 200), getRandomArbitrary(100, 400), getRandomArbitrary(100, 500)]);
    }
    return data;
}

function drawChart(data) {
    var dataTable = google.visualization.arrayToDataTable(data);
    var options = {
        chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: 2014-2017'
        },
        bars: 'horizontal' // Required for Material Bar Charts.
    };
    var chart = new google.charts.Bar(document.getElementById('barchart_material'));
    chart.draw(dataTable, options);
}

function getRandomArbitrary(min, max) {
    return Math.random() * (max - min) + min;
}

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="barchart_material" style="width: 900px; height: 500px;"></div>

Google Chart : Unable to get property 'arrayToDataTable'

1 Answers1