Dynamic google charts from ajax request

Question

I'm trying to dynamically build an array for a google line graph, then I'm trying to pass it to a function that draws the graph that way every-time my ajax call is executed it will call the draw script and re-draw the chart.

The error in the console is :

Uncaught Error: Row 0 has 0 columns, but must have 2format+en,default+en,ui+en,corechart+en.I.js:188 ehaformat+en,default+en,ui+en,corechart+en.I.js:189 Vgaindex.html:115 drawChart

I don't understand why it says 0 and 0.

        var computer_free_memory =[];
        function updateComputerdata() {
          var computer_free_memory =[];
          var jqxhr = $.getJSON( "http://10.0.0.6:3000/computer_stats?order=time.asc", function() {
          })
          .done(function( data ) {
            var html_insert = ''
            var stats = ''
              $.each( data, function( i, item ) {
                html_insert = 'Computer Name:' + item.computer_name + '<br>Operating System:' + item.operating_system + '<br>CPU Model: ' + item.cpu_model + '<br>Cores Assigned: ' + item.cores + '<br>Total Memory: ' + item.total_memory;
              });
              $.each( data, function( i, item ) {
                stats = 'Free Memory:' + item.free_memory 
                var time = new Date(parseInt(item.time))
                computer_free_memory.push([time,parseInt(item.free_memory)]);
              });
            console.log(computer_free_memory);
            memory_chart(computer_free_memory);
            document.getElementById("computer_info").innerHTML = html_insert;
            document.getElementById("computer_stats").innerHTML = stats;
          })
          .fail(function() {
          })
          .always(function() {
          });
            setTimeout(function(){  updateComputerdata(); }, 30000);
        }
        updateComputerdata();

    function memory_chart(computer_free_memory){
         google.setOnLoadCallback(drawChart);

          function drawChart() {
            var data = google.visualization.arrayToDataTable([
                ['Time', 'Free Memory'],
                computer_free_memory
            ]);

            var options = {
              title: 'Company Performance',
              curveType: 'function',
              legend: { position: 'bottom' }
            };

            var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

            chart.draw(data, options);
          }
    }

Console Log:

[Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2]…][0 … 99]0: 
Array[2]
0: Sat Jan 17 1970 05:37:26 GMT-0700 (Mountain Standard Time)
1: 2818308
length: 2
__proto__: Array[0]1: Array[2]2: Array[2]3: Array[2]4: Array[2]5: Array[2]6: Array[2]7: Array[2]8: Array[2]9: Array[2]10: Array[2]11: Array[2]12: Array[2]13: Array[2]14: Array[2]15: Array[2]16: Array[2]17: Array[2]18: Array[2]19: Array[2]20: Array[2]21: Array[2]22: Array[2]23: Array[2]24: Array[2]25: Array[2]26: Array[2]27: Array[2]28: Array[2]29: Array[2]30: Array[2]31: Array[2]32: Array[2]33: Array[2]34: Array[2]35: Array[2]36: Array[2]37: Array[2]38: Array[2]39: Array[2]40: Array[2]41: Array[2]42: Array[2]43: Array[2]44: Array[2]45: Array[2]46: Array[2]47: Array[2]48: Array[2]49: Array[2]50: Array[2]51: Array[2]52: Array[2]53: Array[2]54: Array[2]55: Array[2]56: Array[2]57: Array[2]58: Array[2]59: Array[2]60: Array[2]61: Array[2]62: Array[2]63: Array[2]64: Array[2]65: Array[2]66: Array[2]67: Array[2]68: Array[2]69: Array[2]70: Array[2]71: Array[2]72: Array[2]73: Array[2]74: Array[2]75: Array[2]76: Array[2]77: Array[2]78: Array[2]79: Array[2]80: Array[2]81: Array[2]82: Array[2]83: Array[2]84: Array[2]85: Array[2]86: Array[2]87: Array[2]88: Array[2]89: Array[2]90: Array[2]91: Array[2]92: Array[2]93: Array[2]94: Array[2]95: Array[2]96: Array[2]97: Array[2]98: Array[2]99: Array[2][100 … 199][200 … 299][300 … 399][400 … 499][500 … 599][600 … 699][700 … 799][800 … 899][900 … 974]length: 975__proto__: Array[0]
format+en,default+en,ui+en,corechart+en.I.js:188 Uncaught Error: Row 0 has 0 columns, but must have 2

Answer 1

The structure that is expected for google.visualization.arrayToDataTable is like this:

[
    [col1Inf, col2Info],
    [row1Col1, row1Col2],
    [row2Col1, row2Col2],
    [row3Col1, row3Col2],
    // ...
]

computer_free_memory as it is passed into memory_chart looks something like this:

[
    [row1Col1, row1Col2],
    [row2Col1, row2Col2],
    [row3Col1, row3Col2],
    // ...
]

You are attempting to combine ['Time', 'Free Memory'], with computer_free_memory but the way you are doing it results in this (wrong) structure:

[
    ['Time', 'Free Memory'],
    [
        [row1Col1, row1Col2],
        [row2Col1, row2Col2],
        [row3Col1, row3Col2],
        // ...
    ]
]

Try something like this is memory_chart .

var rawData = computer_free_memory.slice();
rawData.unshift(['Time', 'Free Memory']);
var data = google.visualization.arrayToDataTable(rawData);