I am attempting to use Treemap on a web page for the first time. My data is retrieved from a server-side, perl script. When I use static, dummy data, my Treemap displays properly. Dummy data is only 54 rows. However, when I query my database, and return 1145 rows of data, the Treemap displays with the "root node", but nothing else - it is just blank space.
My data is formatted the same way in both cases, with my "containers" at the top of the recordset and my "data points" at the bottom of the list. I have attached a screen shot of where my chart should be, but isn't.
Is there some limit to the number of rows of data? Is there some limit to the "distance between the 'containers' and the 'data points'"? Has anybody else even seen a "blank" chart like this? Any ideas on how to get my 1145 rows of data to display in a Treemap?
I get my data via an $.ajax() call (which returns JSON), and pass it to this function to draw my Treemap.
function drawTreemap (newdata) {
data = new google.visualization.arrayToDataTable(newdata);
tree = new google.visualization.TreeMap(document.getElementById('chart_div'));
tree.draw(data, {
title: 'Top Credit Hours Earned',
minColor: '#AADDE9',
midColor: '#00eee9',
maxColor: '#0f0',
headerHeight: 15,
fontColor: 'black',
showScale: true,
generateTooltip: showCredits
});
}
My "data" is present, both because "System" is my root node and because I can log it to the console. When the Treemap displays properly, my showCredits() function works properly.
Thanks, all.