Re: Cannot generate column chart from an array

2,211 views

Skip to first unread message

asgallant

unread,

Dec 26, 2012, 1:42:43 PM12/26/12

to google-visua...@googlegroups.com

You are having a problem because you are making newRows an array of strings, not an array of arrays. Why are you going through the trouble of building a new DataTable when everything you want is already in the DataTable returned by the query? You can get the subset of data you want by using a DataView instead of building a new table. Here's one way of doing it: http://jsfiddle.net/asgallant/bLqBD/

On Wednesday, December 26, 2012 11:29:38 AM UTC-5, bbrue...@newsobserver.com wrote:

I'm trying to generate a column chart from an array but get this error message:

Uncaught Error: Not a valid 2D array.

The script does work if I manually add the array, but that's not going to work for the project.

If I replace the variable newRows, which contains the array, with some test data, the script works fine.

If you want, replace newRows with this test data:

['1901',2], ['1902',4], ['1903',4], ['1904',6], ['1905',8], ['1906',4], ['1907',3]

Obviously, I'm not handling the variable correctly.

Any help will be appreciated.

Bob Brueckner

Here is the script:

<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="UTF-8"> <title>Duke football records</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load('visualization', '1', {'packages':['corechart','table']}); var whereClause = ""; var newData = ""; var newRows = []; function drawRecords() { var queryText = encodeURIComponent("SELECT 'Year', 'Overall Win' as 'Overall Wins', 'Conf Win', 'Coach', 'Overall', 'Conference', 'Finish' as 'Conf. finish', 'AP' as 'AP rank' from 10ocotrV2UnYOaMyYguVZFoEuxzzszRGrEINBy1o" + whereClause); var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryText); query.send(handleQueryResponse); function handleQueryResponse(response) { if (response.isError()) { alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); return; } var data = response.getDataTable(); var thisCoach = "Wallace Wade"; var newRowNumber = data.getNumberOfRows(); for (var i = 0; i < newRowNumber; i++){ if (thisCoach == data.getValue(i,3)) { var newYear = (data.getValue(i,0)); var newWins = parseInt(data.getValue(i,1)); newRows.push("\n[" + "'" + newYear + "'", newWins+ "]"); } else { var newYear = (data.getValue(i,0)); var newWins = parseInt(0); newRows.push("\n[" + "'" + newYear + "'", newWins+ "]"); } } var newData = new google.visualization.arrayToDataTable([ ['Season', 'Wins'], newRows ]); var newchart = new google.visualization.ColumnChart( document.getElementById('newChart')); var options = { height: 300, width: 900, legend: {position: 'bottom'} }; newchart.draw(newData, options); } } google.setOnLoadCallback(drawRecords); </script> </head> <body> <table style="width:900px; vertical-align:top;"> <tr> <td style="width:900px; height:600px; vertical-align:top;" colspan="2"> <div id="newChart"></div> </td> </tr> </table> </body> </html>

bbrue...@newsobserver.com

unread,

Dec 27, 2012, 5:23:21 PM12/27/12

to google-visua...@googlegroups.com

I was trying to emphasize the record of a single coach by leaving only his bars on the chart. It's easier to draw a separate chart. Thanks for your suggestion.