Google Chart Treemap - displays a blank/empty chart

55 views
Skip to first unread message

Dwight T. Oakey

unread,
Jun 29, 2021, 5:22:48 PM6/29/21
to Google Visualization API
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. Blank Treemap.png

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. 

Dwight T. Oakey

unread,
Jul 1, 2021, 4:52:37 PM7/1/21
to Google Visualization API
Well, I was able to resolve this myself.  I wanted to post my own answer, in case this can help anyone else later on.

I finally realized that the numeric data I was trying to get Treemap to work with was coming through the JSON as string values.  So, since Treemap wasn't able to add strings up into meaningful numbers, it was not displaying anything.  Forcing the strings '.00', '2.00', '5.00', etc into literal numeric values allowed Treemap to work and display everything exactly as it should.

Reply all
Reply to author
Forward
Message has been deleted
0 new messages