Getting values from input for Google Charts

Question

I have a page listing in table format some sales data. I want to include a chart. Since I already have to retrieve the data for the table I figured I would also build the array for google and put it in a hidden input to retrieve it with javascript. So this is the javascript

     // Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});


google.setOnLoadCallback(drawChart);

function drawChart() {
    var chartD = document.getElementById('chartD').value;
    var data = google.visualization.arrayToDataTable([chartD]);
    var options = {'title':'Sales'};
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}

This is the input I get the data from

<input type="hidden" id="chartD" value="['Date', 'Units Sold'], 
    ['03-01', 12.00], ['03-04', 32.00], ['03-06', 6.00],
    ['03-08', 19.00], ['03-11', 10.00], ['03-13', 5.00], ['03-15', 0]">

But when I run this I get an error Not a valid 2D array I then copied the value straight from the view page source like this

var data = google.visualization.arrayToDataTable([['Date', 'Units Sold'], 
   ['03-01', 12.00], ['03-04', 32.00], ['03-06', 6.00], ['03-08', 19.00],
   ['03-11',    10.00], ['03-13', 5.00], ['03-15', 0]]);

And that worked just fine. Does anyone have any idea what the problem is?

@amigura Sorry that was a bad copy and paste. I edited to reflect what's really there — Casey, Jun 23 '13 at 22:39
if you debug your code to look at the content of the variable `chartD`, is it actually an array before being passed in to `arrayToDataTable`? If it is passed as a string, for instance, then it isn't going to work (google will not view it as an array). — jmac, Jun 23 '13 at 23:50
@jmac It's a string. I just pulled the value from a hidden input field. What I want it for google to treat the value of the variable just like I had typed that in the javascript (just like in the last code example) — Casey, Jun 23 '13 at 23:54
But when you type it in, Google assumes that it is not a string, but an array. When you create a javascript object, it is a string, not an array, and Google doesn't know to assume that it is an array. You would have to either loop through your string in javascript and turn it in to an array before passing it in, or find a better way to get your data in to an appropriate object for google visualization. — jmac, Jun 24 '13 at 01:08
@jmac It seems crazy to me that I can't pass the literal string and not the object. — Casey, Jun 24 '13 at 04:07
Possible duplicate of [this question](http://stackoverflow.com/questions/13272406/javascript-string-to-array-conversion) — jmac, Jun 24 '13 at 05:41
@jmac: While the answers to the two questions might be the same, this question asks “why won't this work?” (answer: it's a string, not an array), whereas the other question asks “how do I convert it from a string to an array?” (a logical next step); the questions, however, are not identical, and this should not be closed as a duplicate. — icktoofay, Jun 24 '13 at 06:28

score 0 · Answer 1 · answered Jun 24 '13 at 04:41

This is normal javascript functionality and nothing unique to Google or otherwise odd.

Take your HTML hidden div element and toss it in a document:

<input type="hidden" id="chartD" value="['Date', 'Units Sold'],
 ['03-01', 12.00], ['03-04', 32.00], ['03-06', 6.00],
 ['03-08', 19.00], ['03-11', 10.00], ['03-13', 5.00], ['03-15', 0]">

Now test this javascript:

    var chartD = document.getElementById('chartD').value;
    var array = new Array(['Date', 'Units Sold'],      ['03-01',  12.00], ['03-04', 32.00], ['03-06', 6.00],     ['03-08', 19.00],  ['03-11', 10.00], ['03-13', 5.00], ['03-15', 0]);
    var array2 = new Array(chartD);
    alert(array.length);
    alert(array2.length);

This is the exact same behavior with standard javascript.

When you define the object with copy-paste, you get an array with 8 rows, 2 columns (hence length 8).

When you define the object with a string, you get an array that has one row and one column (containing a really long string).

Why would you expect Google to act any differently?

You either need to:

Pass in a fully formed 2D array to google
Pass in an array-defining string in by hand

This is all covered in the documentation.

Expecting Google to have some funky behavior different from javascript probably isn't the best approach.

Getting values from input for Google Charts

1 Answers1