Using JavaScript to Instantiate a DataTable with a JSON string/object

[batware]

I've encountered a number of problems trying to create a DataTable for
use with visualizations... Because my data are numerous and dynamic,
the object has to be created programatically... I've come back to this
method, which seems to be the most straightforward, but it's not
working.

==>>

I have also traversed a JSON object manually to define the columns
and add rows, but hit a blocker there as well. It seems using **
data.addRow(rowArray); ** where **var dataArray = []; ** is
pupulated using **rowArray.push(row.item); ** from the JSON object,
my rows, which contain both string and numeric values, end up
containing nulls for every value in a 'number' column... Then, when I
tried to workaround by using data.setValue (rowArray) to update the
nulls, i get an error to tell me the row zero is out of range, even
after i've verified that the table rows do indeed exist. SO
FRUSTRATING! It souldn't be this hard to create a DataTable...

<<==


So I'm back to using the JSON string/object method.... Here is my
code to instantiate the DataTable, followed by the cols, and first/
last two table entries in my JSON data set... Any guidance would be
tremendously appreciated. It seems most of the data sets in the
documentation are created using object literal notation, manually
entered. Not possible here. Also, I've verified the example works
with the sample data.

*** CODE .js containg jQuery selectors ***

$(document).ready ( function loadScript(){

//here's how my string is made available, and I verify it is
there
var JSONstring = new String($
('#treeMapData').children("input[name='treeDataString']").val());

//converting to object
var JSONObject = eval(JSONstring);
// also tried this...
// var JSONObject = new Object(JSONstring.toSource());

// instantiation appears unsuccessful
var data = new google.visualization.DataTable(JSONObject);

//this returns zero "0"
alert(data.getNumberOfRows());



// Create and draw the visualization. one day, hopefully

var tree = new
google.visualization.TreeMap(document.getElementById('visualization'));
tree.draw(data, {
minColor: '#f00',
midColor: '#ddd',
maxColor: '#0d0',
headerHeight: 15,
fontColor: 'black',
showScale: true});

});


*** DATA - JSON string ***

{"cols":[{"id": "MenuItem", "label": "Sales","type": "string"},{"id":
"SalesCategory", "label": "Sales Parent", "type": "string"},{"id":
"TotalSales", "label": "Sales Dollars (size)", "type": "number"},
{"id": "TotalQtys", "label": "Sales Qty (color)", "type":
"number"}],"rows":[{"c":[{"v":"Product1"},{"v":"ProductA Category"},
{"v":103.5},{"v":18}]},{"c":[{"v":"Product1/Alt Name Contains
Slashes"},{"v":"ProductA Category Contains Spaces"},{"v":100},{"v":
1}]},{"c":[{"v":"Product1"},{"v":"ProductB Category"},{"v":67.5},{"v":
10}]},{"c":[{"v":"Product3"},{"v":"ProductB Category"},{"v":50.15},
{"v":17}]},{"c":[{"v":"Product4"},{"v":"ProductB Category"},{"v":
49.39},{"v":11}]},{"c":[{"v":"Product5"},{"v":"ProductC Category"},
{"v":44.9},{"v":10}]},{"c":[{"v":"Regular/Mahalo Mango"},


...abbreviated data set


{"c":[{"v":"ProductB Category"},{"v":"Global Cat"},{"v":0},{"v":0}]},
{"c":[{"v":"ProductC Category"},{"v":"Global Cat"},{"v":0},{"v":0}]},
{"c":[{"v":"ProductD Category"},{"v":"Global Cat"},{"v":0},{"v":0}]},
{"c":[{"v":"ProductE Category"},{"v":"Global Cat"},{"v":0},{"v":0}]},
{"c":[{"v":"ProductF Category"},{"v":"Global Cat"},{"v":0},{"v":0}]},
{"c":[{"v":"Global Cat"},{"v":null},{"v":0},{"v":0}]}]}

[batware]

I found the solution in another thread... Conversion of the JSON
string to an object must be done with the following changes:

var JSONObject = eval('(' + JSONstring + ')');

Because the documentation only shows hard coded, object literal
notation, it is also not clear how the JSON string should be
formatted, particularly with respect to "c", "v", and "f" elements.
They must be within double quotes. The documentation is seriously
lacking with respect to creation of JSON datasets which are then
passed to DataTable upon instantiation.

The manipulation of data using the alternative (creating an empty
DataTable and adding rows via JavaScript) DataTable) methods and array
variables mentioned above could use some documentation, if not bug
fixes...

[ChartALot]

Hi, you can find a description of the JSON format here, it is part of our documentation for the data source wire protocol.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.