I swear... You are my hero!
Thank you soo much!
But still there is one obstacle in my my. ;(
I got lots of equal 'names'
Trying to solve this the way I did in the treemap:
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string','Name');
data.addColumn('string','Kernaussage');
data.addColumn('string','Kategorie');
data.addColumn('number','SuS iPad');
data.addColumn('number','Lehrer MacBook');
data.addColumn('number','SuS MacBook');
data.addColumn('number','Lehrer 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([
['1SuS mit iPad', 'Tastatur', 'Wunsch', 26, 5, 38,78, true],
[{v:'ChildA7',f:'neue MacBooks'}, 'Hardware', 'Wunsch', 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]
]);
Brings up, that the " childAx" is displayed in the viz ... switching the v
an f brings ( logically) the error " More than one row with the same id".
So: how to do it in the datatable?
Best wishes
regards
djantirak
Am Mittwoch, 13. Februar 2013 16:56:55 UTC+1 schrieb asgallant:
>
> There are a few changes you likely have to make. I took the code you
> posted a couple posts ago and fit it to your needs:
> http://jsfiddle.net/asgallant/uKLWW/2/
>
> On Wednesday, February 13, 2013 2:54:45 AM UTC-5, [email protected]:
>>
>>
>> Hey,
>>
>> I tried this before this brings up the error : Invalid column index 5.
>> Should be an integer in the range [0-4]. index 5. Should be an integer
>> in the range [0-4].
>>
>>
>> Even if I add in the
>>
>> 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
>> }
>> one more it is still the same error reported ( i suppose it's not the
>> right construction zone)
>>
>> ]);
>> and changing the
>> $('#colorSelect').change(function () {
>> columns[4] = parseInt($(this).find(':selected').prop('value')) -
>> 1;
>> chart.setView({columns: columns});
>> chart.draw();
>> }); to 4
>> doesn't help, too
>>
>> Actually I don't need the size selection - but just to uncomment the
>> script and the html doesn't change ( no surprise...)
>>
>> Do you got any idea?
>>
>> Thanks a lot
>> djantirak
>>
>>
>> Am Dienstag, 12. Februar 2013 23:05:58 UTC+1 schrieb asgallant:
>>>
>>> Your "color by" select needs to set the indices correctly. I neglected
>>> to point this out in the example, but the "value" of each option is the
>>> index of that column in your DataTable, so your select should look like
>>> this:
>>>
>>> <select id="colorSelect">
>>> <option value="3">Quantity Produced</option>
>>> <option value="5" selected="selected">Quantity Exported</option>
>>> <option value="6">Quantity Imported</option>
>>> <option value="4">Gustav</option>
>>> </select>
>>>
>>> as the "Gustav" column is at index 4 in the table, and the
>>> Exported/Imported columns each moved up one index position.
>>>
>>> On Tuesday, February 12, 2013 4:28:05 PM UTC-5, [email protected]:
>>>>
>>>> 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.
