从Google图表的输入中获取值

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:

1. Pass in a fully formed 2D array to google
2. 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.