Hey thanks for your reply. I tried a lot, and at present I got the error: ""(NaN,NaN,NaN") is not a valid RGB color× by firing my forth selection option in color by. Here's the whole code 'cause I don't know how many errors I build. Sorry for the mess...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> <html xmlns="http://www.w3.org/1999/xhtml";> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>GoogleSortedTreemap</title> <head> <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script> <script type="text/javascript" src="https://www.google.com/jsapi";></script> <script type="text/javascript"> google.load("visualization", "1"); google.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string','Name'); data.addColumn('string','Produce Type'); data.addColumn('string','Country of Origen'); data.addColumn('number','Quantity Produced'); data.addColumn('number','Quantity Gustav'); data.addColumn('number','Quantity Exported'); data.addColumn('number','Quantity Imported'); data.addColumn('boolean','Root node'); // set root node to true if this has no parent node in the data set, false otherwise data.addRows([ ['Oranges', 'Fruit', 'United States', 26, 5, 38,78, true], ['Onions', 'Vegetable', 'United States', 8, 4, 12,45, true], ['Apples', 'Fruit', 'Chile', 34, 43, 15,5, true], ['Braeburn', 'Apples', 'Apples', 25, 19, 19,85, false], ['Cortland', 'Apples', 'Apples', 250, 8, 7,85, false], ['Peppers', 'Vegetable', 'Chile', 90, 4, 5,36, true], ['Gustav', 'Fruit', 'Germany', 90, 4, 5,78, true] ]); // get all produce types and countries var produceTypes = google.visualization.data.group(data, [1, 7], []); var countries = google.visualization.data.group(data, [2, 7], []); // build data rows for produce type and country views var produceRows = [['Produce Type', null, null, null, null]]; for (var i = 0; i < produceTypes.getNumberOfRows(); i++) { if (produceTypes.getValue(i, 1)) { produceRows.push([produceTypes.getValue(i, 0), 'Produce Type', null, null, null]); } } var countryRows = [['Country of Origen', null, null, null, null]]; for (var i = 0; i < countries.getNumberOfRows(); i++) { if (countries.getValue(i, 1)) { countryRows.push([countries.getValue(i, 0), 'Country of Origen', null, null, null]); } } produceTypes = null; countries = null; // initialize the treemap with produce type view w/ qty produce as size and qty exported as color var group = google.visualization.data.group(data, [0, 1], [{ column: 3, type: 'number', label: data.getColumnLabel(3), aggregation: google.visualization.data.sum }, { column: 4, type: 'number', label: data.getColumnLabel(4), aggregation: google.visualization.data.sum }, { column: 5, type: 'number', label: data.getColumnLabel(5), aggregation: google.visualization.data.sum } ]); group.addRows(produceRows); var columns = [0, 1, 2, 3, 4]; var chart = new google.visualization.ChartWrapper({ chartType: 'TreeMap', containerId: 'chart_div', dataTable: group, options: { height: 400, width: 600, minColor: '#f00', midColor: 'blue', maxColor: '#0d0', headerHeight: 15, fontColor: 'black', showScale: true, maxPostDepth: 3 }, view: { columns: columns } }); chart.draw(); // set up event handlers for the dropdowns $('#groupSelect').change(function () { var column = parseInt($(this).find(':selected').prop('value')); var rows; if (column == 1) { rows = produceRows; } else if (column == 2) { rows = countryRows; } else { alert('something went wrong'); } group = google.visualization.data.group(data, [0, column], [{ column: 3, type: 'number', label: data.getColumnLabel(3), aggregation: google.visualization.data.sum }, { column: 4, type: 'number', label: data.getColumnLabel(4), aggregation: google.visualization.data.sum }, { column: 5, type: 'number', label: data.getColumnLabel(5), aggregation: google.visualization.data.sum }, { column: 6, type: 'number', label: data.getColumnLabel(6), aggregation: google.visualization.data.sum } ]); group.addRows(rows); chart.setDataTable(group); chart.draw(); }); $('#sizeSelect').change(function () { columns[2] = parseInt($(this).find(':selected').prop('value')) - 1; chart.setView({columns: columns}); chart.draw(); }); $('#colorSelect').change(function () { columns[3] = parseInt($(this).find(':selected').prop('value')) - 1; chart.setView({columns: columns}); chart.draw(); }); } </script> </head> <body> <div id="chart_div"></div> Group By: <select id="groupSelect"> <option value="1" selected="selected">Produce Type</option> <option value="2">Country of Origen</option> </select><br /> Size By: <select id="sizeSelect"> <option value="3" selected="selected">Quantity Produced</option> <option value="4">Quantity Exported</option> <option value="5">Quantity Imported</option> </select><br /> Color By: <select id="colorSelect"> <option value="3">Quantity Produced</option> <option value="4" selected="selected">Quantity Exported</option> <option value="5">Quantity Imported</option> <option value="2">Gustav</option> </select> </body> </html> Thanks a lot djantirak Am Dienstag, 12. Februar 2013 15:26:16 UTC+1 schrieb asgallant: > > What is the error you are getting, and can you show me example data that > is causing it? > > On Tuesday, February 12, 2013 4:06:20 AM UTC-5, djantirak wrote: >> >> Hello asgallant, >> thanks a lot for your help. >> I tried to fit the script to my needs, but I got stuck at 3 items: >> I have a lot of equal,( not identical) entries. In your example the sorts >> of apples. I tried to fix this with another clue I found here in the forum >> : {v:'ChildE51', f:'3 Braeburn'}, but that doesn't work ;( >> >> And, how to get one quantity column more? >> >> >> Could you please help again? >> >> Thanks a lot for your effort >> >> best regards >> djantirak >> >> >> >> Am Montag, 11. Februar 2013 20:19:53 UTC+1 schrieb asgallant: >>> >>> You can have more levels, but it requires a bit more finesse to make it >>> work: http://jsfiddle.net/asgallant/uKLWW/1/ >>> >>> Also, there is probably a much better way of doing all of this; this >>> code was just hacked together, and much of it can be written cleaner and >>> more efficiently. >>> >>> On Monday, February 11, 2013 1:48:57 PM UTC-5, djantirak wrote: >>>> >>>> Thanks a lot for your script! It is nearly what I was looking for. >>>> >>>> I played a bit around.. >>>> it seems i can't bring in more than one level ... to nest nodes. >>>> And I can't work with drastic data, because it works only with numbers, >>>> I 'm not able to label them, and it isn't nested, too >>>> >>>> So it seems, I couldn't have both, or am I sitting in front of a >>>> solution and can't see it? >>>> >>>> Best regards >>>> djantirak >>>> >>>> Am Montag, 11. Februar 2013 12:06:43 UTC+1 schrieb djantirak: >>>>> >>>>> 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.
