batware
unread,Mar 4, 2011, 1:23:23 PM3/4/11Sign in to reply to author
Sign in to forward
You do not have permission to delete messages in this group
Sign in to report message
Either email addresses are anonymous for this group or you need the view member email addresses permission to view the original message
to Google Visualization API
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}]}]}