Re: GoogleChart TreeMap

[asgallant]

There is no setting that will do this for you.  You should be able to fake it by using DataViews and grouping data, changing the criteria used to build them in "select" and "rollup" event handlers.

On Thursday, August 30, 2012 10:15:18 AM UTC-4, TUwel wrote:

Hi, i have a question in term of TreeMaps with GoogleChart. Example: https://developers.google.com/chart/interactive/docs/gallery/treemap

 

I want to adjust the node vale, that he takes the sum not the average of the childs .

 

For Example:

Min Scale = -52

Max Scale = 63

Europe: -11,-2,-13,4,-5 = -27   

but he takes the value -27/5 =  -5,4

 

I want that he takes -27 not the average, can someone help me?

 

best regards

[TUwel]

The problem i have sum values in my TreeMap and for the color scale he takes the average, but i want to have the sum not the average in my colour values

[asgallant]

Yes, like I said, there is nothing that will do this for you.  You need to implement your own method of doing this.  I built a test case that works for navigating down the tree, though moving back up doesn't work yet: http://jsfiddle.net/asgallant/NpsUh/ 

If your tree has more depth layers, you will have to do more grouping to get what you want.

[TUwel]

ohhh nice work ... thanks

 

how u said the moving back doesn't work, but the colors look correct

[TUwel]

asgallant do you have an idea how the rollup can work? i dont find anything in web

[asgallant]

The rollup event is supposed to fire on right-click, but I don't think it does when the treemap is at its root.  Since, with this hack, the treemap always thinks it's at its root, then it will never fire the event.  You can work around the problem manually, by adding a button to go back up the tree: http://jsfiddle.net/asgallant/NpsUh/3/

Note that this still needs work as it doesn't quite behave properly all the time.

[TUwel]

ah oke thanks ... i don't want to annoy u, but if u have time, maybe can u explain me how the select function works

because i wanted to fix it, for example if u click: Asia -> China -> then he goes to Africa and don't stop

i understood that baseview :

 

0                             1                                2                        3

Africa	Global	sum(Africa)	sum(Africa)
America	Global	sum(America)	sum(America)
Asia	Global	sum(Asia)	sum(Asia)
Europe	Global	sum(Europe)	sum(Europe)
Global	null	sum(Global)	sum(Global)

selectview :

 

(0,0) China ... Brazil      ... France ... Egypt 

(0,1) Asia   ... America  ... Europe ... Africa

...

every single value

 

[asgallant]

That is part of what is broken.  I made a few small improvements here: http://jsfiddle.net/asgallant/NpsUh/5/ 

The treemap will now go up one if you click the header at the top of the chart, and it won't go to the wrong one when you click on leaves at the bottom of the tree.

But to answer your question, the #getSelection method returns an array of objects with row and/or column properties that identify the data used to create the selected element in the DataTable or DataView used to draw the chart.  The error here is that once you go down the chart, baseView is not the view used to draw the chart any more, so referencing it there was a poor choice on my part.

This still needs work, particularly for handling trees more than two layers deep.  I have the nagging suspicion that there is a relatively simple way of doing this, but the means are eluding me at this time.

And you're not annoying me, I enjoy tacking these kinds of challenges.  >;o)

[TUwel]

ah oke thanks

 

one more question:

if i have 3 layers how can i group it, because i set the 3rd layer parent as Global or i missunderstand it?

can i group it with 3 layers in the select function? or dont know ..

 

but thanks 4 all  u are very patient :-)

[asgallant]

I've been trying to work out a good solution for that, and I haven't come up with anything as of yet.  All of the solutions I have thought of so far are overly complex and become exponentially more so as you add more layers to the tree.  I suspect the solution will involve a recursive algorithm that parses the tree and builds an appropriate DataTable for any given node.

There might be an even better solution, though.....hmmm...let me think on this.

[asgallant]

Aha! I cracked it: http://jsfiddle.net/asgallant/NpsUh/7/ 

The treemap should now work for any tree of arbitrary depth.  I added a few US states to the data so you can see it work.  Navigate back up the tree by clicking the header at the top of the chart.

[TUwel]

wow thanks ... real nice, i am in your fold :D

 

thanks man

[TUwel]

one last question i have, if its okey? :)

 

u sum the levels und compare the levels in their own level, is it possible to compare all values for example

 

        ['Location', 'Parent', 'Market trade volume (size)', 'Market increase/decrease (color)'],
        ['Global', null, 0, 0],
        ['America', 'Global', 0, 0],
        ['Europe', 'Global', 0, 0],
        ['Brazil', 'America', 11, 10],
        ['USA', 'America', 52, 30],
        ['Mexico', 'America', 24, 10],
        ['Canada', 'America', 16, -20],
        ['France', 'Europe', 42, 1],
        ['Germany', 'Europe', 31, 2],
        ['Sweden', 'Europe', 22, 3],
        ['Italy', 'Europe', 17, 4],
        ['UK', 'Europe', 21, 5],
        ['AZ', 'USA', 10, 10],
        ['MA', 'USA', 23, 10],
        ['NY', 'USA', 40, 10]
    ]);

 

America = 30

Europe = 10

 

America = green

Europa = red

 

but is it possible that the scale takes all values

i have -20 (min), 30(max) -> Europe has 10 -> should be a light green

 

thanks ;)

[asgallant]

Set the minColorValue and maxColorValue options: http://jsfiddle.net/asgallant/NpsUh/13/ 

[TUwel]

thanks, it works :)

[asgallant]

You're welcome.

On Wednesday, September 19, 2012 8:55:15 AM UTC-4, TUwel wrote:

thanks, it works :)

[Ashis Mohanty]

Hi,

Can anyone help me to hide the parent node entirely from treemap and have an external breadcrumb to control treemap navigation.

Thanks,

[alice moon]

Hi all,

How can I set the color value for the Group Node, I don't want  the Group Node color value have any relationship with their Children Node color values.

Thanks,

Alice

[asgallant]

Doing that isn't supported in the API, but you can use the code example here: http://jsfiddle.net/asgallant/NpsUh/7/ as a starting point.  This is designed to change the way the node values are calculated, but you can adapt it to use unique color values for each node instead of changing the way the nodes are calculated.

[alice moon]

Hi Asgallant,

If I use the example you provide, the "maxDepth" property lose its function . can you help me resolve this?

Thanks,

Anna

[asgallant]

No, the "maxDepth" option is incompatible with this code.

[Anna Fang]

Is there any other way to let the maxDepth work？I really want this function.thanks!

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/QDlskEluq-E/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.

[asgallant]

The TreeMaps use the values of the leaf nodes to calculate size and color of the parent nodes, and there's no way to override that without faking the chart into believing that all nodes are the bottom leaf nodes.

I suppose it might be possible to backwards calculate the values you would need the child nodes to have in order to get the size/color of the parent nodes right, and present the TreeMap with a DataTable that reflects those values, but doing so might prove prohibitively difficult to implement.

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.

[Niall O'Donovan]

Excellent work asgallant! The examples are very useful when trying to find a workaround. I appreciate all of your help!

Thanks,

Niall 

[Stephan M]

Hello asgallant,

I have been using bits and pieces of your code from different forum discussions.

I am trying to create a visualization for our company to gauge progress.

Im using 2 parent nodes

Top level=Category

Low level=Project

Leafs=Individual tasks

I'm trying to figure out to use fixed values in the chart for column 2, so the size(priority in my instance) of the project stays consistent, regardless of how many individual tasks get added to that project.

This is what I have so far:

https://jsfiddle.net/stephan00/4ws6uebw/201/

[Stephan00]

In other words, I'm trying to have the size of the node be in relation to the size of the nodes in the same level, rather than a sum of children or leaves.

Any ideas?