Filtering is relatively easy, just create a Dashboard<https://developers.google.com/chart/interactive/docs/gallery/controls#dashboardobject>with the treemap chart and one of the available controls<https://developers.google.com/chart/interactive/docs/gallery/controls#gallery>. Replicating the functionality of the DrasticData treemap chart will be difficult, as the Viz API treemaps just can't do some of what those treemaps can. You can replicate some of the functionality by creating multiple parent-child relationships for each entry, and then use a DataView to pass only the relevant parent-child relationship to the chart. Similarly, you can change the size and color columns in a DataView as well. Here's a (very rough) example of what you can do: http://jsfiddle.net/asgallant/uKLWW/. If you like what the DrasticData treemap does, though, you should probably use that, as it seems to work much better for that stuff.
On Monday, February 11, 2013 9:43:42 AM UTC-5, djantirak wrote: > > Hey asgallant ;) > > I found on drasticdata.nl this code : > > <script type="text/javascript" src="http://www.google.com/jsapi > "></script> > <script type="text/javascript" src="DrasticTreemapGApi.js"></script> > <script type="text/javascript"> > google.load("visualization", "1"); > google.load("swfobject", "2.2"); > > // Set callback to run when API is loaded > google.setOnLoadCallback(drawVisualization); > > // Called when the Visualization API is loaded. > function drawVisualization() { > // Create and populate a data table. > var data = new google.visualization.DataTable(); > data.addColumn('string', 'Product'); > data.addColumn('string', 'Type'); > data.addColumn('number', '2007'); > data.addColumn('number', '2008'); > data.addColumn('number', '2009'); > data.addRows([ > ['Green beans', 'Vegetables', 100, 100, 400], > ['Avocado', 'Vegetables', 50, 400, 300], > ['Tomatos', 'Vegetables', 200, 400, 500], > ['Cucumbers', 'Vegetables', 500, 1000, 700], > ['Apples', 'Fruit', 1700, 2300, 2000], > ['Bananas', 'Fruit', 800, 700, 600], > ['Oranges', 'Fruit', 200, 300, 100], > ['Pineapples', 'Fruit', 100, 150, 500], > ['Broccoli', 'Vegetables', 800, 1000, 900], > ['Wholemeal', 'Bread', 250, 100, 300], > ['Bagels', 'Bread', 120, 300, 200], > ['Baguette', 'Bread', 50, 300, 200], > ['Ciabatta', 'Bread', 200, 300, 400], > ['Croissants', 'Bread', 400, 600, 200], > ['white bread', 'Bread', 500, 200, 300], > ['Candies', 'Other', 240, 150, 190], > ['Chocolate', 'Other', 200, 250, 350], > ['Cookies', 'Other', 300, 250, 340], > ['Pancakes', 'Other', 120, 160, 130] > ]); > > // Instantiate our object. > var vis = new > drasticdata.DrasticTreemap(document.getElementById('thediv')); > > // Draw the treemap with the data we created locally and some > options: > vis.draw(data, { > groupbycol: "Type", > labelcol: "Product", > variables: ['2007', '2008', '2009'] > } > ); > } > </script> > <title>DrasticTreemap example page</title></head> > <body> > <div id="thediv" style="width:500px; height:300px;"></div> > </body> > </html> > > and the DrasticTreemapGApi.js > > It is fine for me, because I got numeric categories that I want to offer > the user to filter them ( my database is quite huge) 21 continents > > hundreds of Country and they can be devided in 4 further categories. ( > let's say 'men' / 'woman' / 'green hat' / 'red hat') > By levels I offer the user to see how the correlations are. But I believe > the user could be interessted in : > What are the correlations for men with green hat ? > > So I want to create an possiblity to filter the data. > > The example of drastic data works with swfobject and is not nested. > So: How to nest the example, oder how to add the filtering / sorting to > the existing google example? > > Do you got an idea? > Thanks for your assitance - as always ;) > djantirak > > > > > Am Montag, 11. Februar 2013 14:36:29 UTC+1 schrieb asgallant: >> >> What do you mean by "sortable"? >> >> On Monday, February 11, 2013 6:06:43 AM UTC-5, djantirak wrote: >>> >>> Hello I'm looking for a possibilty to sort the treemap by criterias. >>> Does anybody know if it's possible? >>> I found a solution on drasticdata, but that one is not nested. >>> >>> So, how to get this two things together? >>> >>> Thanks a lot >>> >>> djanktirak >>> >> -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/google-visualization-api?hl=en. For more options, visit https://groups.google.com/groups/opt_out.
