CODEWITHSUNDEEP
javascripthtmlgoogle-visualization
user3601092
user3601092

Reputation: 67

Loading Rows and Columns Dynamically in Google Chart Table

I'm trying to add columns and rows dynamically as i get them from user. Sofar i am testing it out like:

            var data = new google.visualization.DataTable();

            seriesName[0] = 'Name';
            seriesName[1] = 'Age';

            for (var i = 0; i < seriesName.length; i++) {
                data.addColumn('string', seriesName[i]);
            }

            seriesData[0] = '1, 2, 3, 4, 5';
            for (var i = 0; i < seriesData.length; i++) {
                if (seriesData[i] != null) {
                    var sData = new Array();
                    sData = seriesData[i].split(',');
                    /*for (a in sData) {
                        sData[a] = parseInt(sData[a], 10);
                    }*/
                }
                var data = JSON.parse('[' + sData + ']');
                alert(data);
                data.addRows(data);
            }

            alert(sData);


            var table = new google.visualization.Table(document.getElementById(div.id));
            table.draw(data, { showRowNumber: true });

This is adding the columns all well but not adding Rows. I have tried adding rows the following way and it works like this:

var rows = new Array();
rows[0] = ['1','2'];
rows[1] = ['abc', 'cdf'];
data.addRows(rows);

Now the problem is that i will be getting rows in the form of comma separated strings like 'abc, cdf' '1,2'. I tried converting this string into the type of string array its accepting by using .split method but it doesn't seem to work. Kindle tell me a way to make it work. Thanks

Upvotes: 0

Views: 4168

Answers (2)

asgallant
asgallant

Reputation: 26340

The problem is in this loop:

for (var i = 0; i < seriesData.length; i++) {
    if (seriesData[i] != null) {
        var sData = new Array();
        sData = seriesData[i].split(',');
        /*for (a in sData) {
            sData[a] = parseInt(sData[a], 10);
        }*/
    }
    var data = JSON.parse('[' + sData + ']');
    alert(data);
    data.addRows(data);
}

First, you already declared a data variable (which holds the DataTable) above, so this line:

var data = JSON.parse('[' + sData + ']');

the var is ignored, and data is overwritten. Second, on this line, sData is an array (per sData = seriesData[i].split(',');). Third, since you overwrote data, data no longer has a addRows method when you call it on this line:

data.addRows(data);

Assuming that seriesData[i] is a string in the form 'foo,bar,cad', this is what your loop should look like:

for (var i = 0; i < seriesData.length; i++) {
    if (seriesData[i] != null) {
        var sData = seriesData[i].split(',');
        if (sData.length != data.getNumberOfColumns()) {
            // throw an error
        }
        else {
            data.addRows(sData);
        }
    }
}

Upvotes: 1

Dave
Dave

Reputation: 4436

refer this jsfiddle, it has update chart button to add dynamically . Below code should help you to proceed further.

function updateChart() {

  dataTable = new google.visualization.DataTable();

  var newData = [['Year', 'Sales', 'Expenses' , 'Other'],
    ['2004',  1000,      400     ,  232   ],
    ['2005',  1170,      460    ,  421   ],
    ['2006',  660,       1120    ,  4324  ],
    ['2007',  1030,      540     ,  4234  ],
    ['2008',  1530,      50     ,    234  ]];

  // determine the number of rows and columns.
  var numRows = newData.length;
  var numCols = newData[0].length;

  // in this case the first column is of type 'string'.
  dataTable.addColumn('string', newData[0][0]);

  // all other columns are of type 'number'.
  for (var i = 1; i < numCols; i++)
    dataTable.addColumn('number', newData[0][i]);           

  // now add the rows.
  for (var i = 1; i < numRows; i++) 
    dataTable.addRow(newData[i]);            

  // redraw the chart.
  chart.draw(dataTable, options);        

 }

Upvotes: 0

Related Questions