Use Socket.io to fill google Area Chart - 'google.visualization.DataTable is not a constructor'

Question

I use NodeJS and Socket.io to get data from a database. I now want to fill a google area chart with these data but i kind of fail at doing it. The data is transmitted as Objects. Each Object contains two values (datetime and value). I append these values to an array and then store them in a DataTable:

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

var socket = io();
getData();

function drawChart(dataArray) {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'DateTime');
    data.addColumn('number', 'Value');
    for (var i = 0; i < dataArray.length; i += 2) {
        console.log(dataArray[0]);
        data.addRow([dataArray[i], dataArray[i + 1]]);
    }
    var chart = new google.visualization.AreaChart(document.getElementById('chart'));
    chart.draw(data, {
        title: "Data Visualization",
        isStacked: true,
        width: '50%',
        height: '50%',
        vAxis: {
            title: 'Data v-Axis'
        },
        hAxis: {
            title: 'Data h-Axis'
        }
    })
}

function getData() {
    socket.emit('GET');
    socket.on('serverSent', function (data) {
        var processedData = processData(data);
        drawChart(processedData);
    })
}

function processData(data) {
    var arr = new Array();
    jQuery.each(data, function (index, object) {
        arr.push(object['datetime'], parseInt(object['value']));
    })
    return arr;
}

If i call my website i see the chart but without any values and the error message `google.visualization.DataTable is not a constructor´. So what am i doing wrong?

score 1 · Accepted Answer · answered Apr 26 '16 at 22:06

The problem is drawChart is being called twice.
From both google.setOnLoadCallback and getData.
If getData is called before google.setOnLoadCallback,
then google.visualization.DataTable will not be recognized.

In addition, it is recommended to use loader.js vs. jsapi.
See Load the Libraries for more info...

As such, please try the following...

Replace...
<script src="https://www.google.com/jsapi"></script>

With...
<script src="https://www.gstatic.com/charts/loader.js"></script>

And try something like...

google.charts.load('current', {
    callback: init,
    packages: ['corechart']
});

function init() {
    var socket = io();
    socket.emit('GET');
    socket.on('serverSent', function (data) {
        var processedData = processData(data);
        drawChart(processedData);
    });
}

function drawChart(dataArray) {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'DateTime');
    data.addColumn('number', 'Value');
    for (var i = 0; i < dataArray.length; i += 2) {
        console.log(dataArray[0]);
        data.addRow([dataArray[i], dataArray[i + 1]]);
    }
    var chart = new google.visualization.AreaChart(document.getElementById('chart'));
    chart.draw(data, {
        title: "Data Visualization",
        isStacked: true,
        width: '50%',
        height: '50%',
        vAxis: {
            title: 'Data v-Axis'
        },
        hAxis: {
            title: 'Data h-Axis'
        }
    })
}

Now i get the error `io` is not defined and that the file `C:\socket.io\socket.io.js` can't be found. Which could be true, because `socket.io` is placed in my directory in the folder `node_modules` where `npm` saves all its modules. — binaryBigInt, Apr 27 '16 at 10:36
I am doing it the exact whay as it is described here: http://stackoverflow.com/questions/8689877/cant-find-socket-io-js — binaryBigInt, Apr 27 '16 at 14:18
if you remove everything _google charts_ related, are you able to get the data from `socket.io`? if so, you may want to switch the order of things, get data, then load _google_. if not, it may be a topic for another question...? — WhiteHat, Apr 27 '16 at 14:45

Use Socket.io to fill google Area Chart - 'google.visualization.DataTable is not a constructor'

1 Answers1