Hello everybody, I'm looking for a way to add one or more values of the table to my treemap. At present it just shows the name, but I want it to show more to it Here is the code: ( asgallant made it in another question before - thanks a lot again for it):
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title> -Treemap with grouping</title> <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script> <script type='text/javascript' src="http://www.google.com/jsapi?fake=.js";></script> <style type='text/css'> </style> <script type='text/javascript'>//<![CDATA[ google.load("visualization", "1"); google.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string','Name'); data.addColumn('string','Kernaussage'); data.addColumn('string','Kategorie'); data.addColumn('number','SuS'); data.addColumn('number','Lehrer'); data.addColumn('number','MacBook'); data.addColumn('number','iPad'); data.addColumn('boolean','Root node'); // set root node to true if this has no parent node in the data set, false otherwise data.addRows([ ['Name', 'Kernaussage', 'Kategorie', 26, 5, 38,78, true], [{v:'ChildA7',f:'Kernaussage'}, 'Kategorie', 'Name', 8, 4, 12,45, true], [{v:'Child A5', f:'1 Lehrer MacBook'}, 'neue MacBooks', 'neue MacBooks', 8, 4, 12,45, true], [{v:'ChildA2',f:'1 Lehrer iPad'}, 'neue MacBooks', 'neue MacBooks', 8, 4, 12,45, true], [{v:'ChildA3', f:'1 SuS iPad'}, 'neue MacBooks', 'neue MacBooks', 8, 4, 12,45, true], ['Illu', 'Programme', 'Fortbildung', 34, 43, 15,5, true], ['1 SuS MacBook', 'Illu', 'Illu', 25, 19, 19,85, false], [{v:'ChildA4', f:'1 SuS iPad'}, 'Illu', 'Illu', 250, 8, 7,85, false], [{v:'ChildA5', f:'1 Lehrer MacBook'}, 'Illu', 'Illu', 25, 19, 19,85, false], [{v:'ChildA6', f:'1 Lehrer iPad'}, 'Illu', 'Illu', 250, 8, 7,85, false], ['USB', 'Technik', 'Fortbildung', 90, 4, 5,36, true], ['intuitiv1', 'intuitiv', 'positiv iPad', 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 = [['Kernaussage', null, null, null, null, null]]; for (var i = 0; i < produceTypes.getNumberOfRows(); i++) { if (produceTypes.getValue(i, 1)) { produceRows.push([produceTypes.getValue(i, 0), 'Kernaussage', null, null, null, null]); } } var countryRows = [['Kategorie', null, null, null, null, null]]; for (var i = 0; i < countries.getNumberOfRows(); i++) { if (countries.getValue(i, 1)) { countryRows.push([countries.getValue(i, 0), 'Kategorie', null, 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 }, { column: 6, type: 'number', label: data.getColumnLabel(6), aggregation: google.visualization.data.sum }]); group.addRows(produceRows); // set the default columns to use // [<id>, <parent node>, <size>, <color>] // based on the indices in "group" var columns = [0, 1, 2, 3]; 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(); }); $('#colorSelect').change(function () { columns[3] = parseInt($(this).find(':selected').prop('value')) - 1; console.log(columns); chart.setView({columns: columns}); chart.draw(); }); } //]]> </script> </head> <body> <div id="chart_div"></div> Group By: <select id="groupSelect"> <option value="1" selected="selected">Kernaussage</option> <option value="2">Kategorie</option> </select><br /> Color By: <select id="colorSelect"> <option value="3">SuS</option> <option value="5">MacBook</option> <option value="6">iPad</option> <option value="4" selected="selected">Lehrer</option> </select> </body> </html> Thanks a lot Best regards Alex -- 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.
