Getting values from input for Google Charts - php

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?

Answer 1

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.