Treemap navigation

[in_the_middle]

Does anyone how could i call the goUpAndDraw() method from the top of
the menu instead of using right click

thank you in advanced

[MC Get Vizzy]

What do you mean by the top of the menu?  Do you mean the chart header?  If so, I don't think there is a good way; the chart doesn't fire an event when the user clicks the header.  You could create your own menu and put it on top of the chart.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

[in_the_middle]

Hi,

Exactly , i mean the chart header when i was talking about the top.

Currenty, I've registered the "select" event into a function
("select_node") and I've identified some nodes in order to call the
goUpAndDraw() method. But, unfortunately it has not been enough.

Once it gets out of the function registered to manage the event it
draws again the node selected.

I could fix it calling exit () just after the goUpAndDraw(), but it's
not very pretty :P ... How could I avoid redrawing the chart after
the select event if I have called the goUpAndDraw() method?

Thank you in advanced

[MC Get Vizzy]

I'm kind of having trouble following.  You mean you handle a select event by calling goUpAndDraw(), and the chart doesn't go up?  Can you send a code snippet?

[Santiago Mediodia]

Hi,

>I'm kind of having trouble following.  You mean you handle a select event by calling goUpAndDraw(), and the chart >doesn't go up?  Can you send a code snippet?

I handle a select event. If the selected node is one of the first 6 rows in the data object  and treemap is in the second level, I consider I have to go up  calling the goUpAndDraw() method (and it works). 

But once it leaves the function, the google libraries continues managing the event and shows the selected node. 

Thank you in advanced,

This is the script I use: 

data_url returns a three level set of nodes, but you could use the same data you use in the example:

/**

 * Clase asociada al módulo de comentarios de noticias para gestionar los usuarios genéricos y usuarios de terceros (redes sociales)

 */

var cot_Treemap = Class.create( {

/**

* Constructor de la clase

* @return comentariosUsuariosTerceros Objeto creado

*/

initialize : function(id_Treemap, id_contenedor) {

google.load("visualization", "1", {packages:["treemap"]});

google.setOnLoadCallback(this.drawChart.bindAsEventListener(this));

this.id_contenedor = id_contenedor;

this.tree = null;

this.data_url = '/cotizacion/datos_sectores_json.php';

this.id_Treemap = id_Treemap;

this.data=null;

this.level=1;

},

drawChart: function() {

myAjax = new Ajax.Request(

this.data_url, 

{

method : 'get',

requestHeaders: {Accept: 'application/json'},

onComplete: this.drawTreemap.bind(this)

});

},

drawTreemap : function(response)  

{

   // Create and populate the data table.

this.data = new google.visualization.DataTable(  response.responseJSON , 0.6);

// Create and draw the visualization.

this.tree = new google.visualization.TreeMap($(this.id_Treemap));

this.tree.draw(this.data, 

{

minColor: '#f00',

midColor: '#ddd',

maxColor: '#0d0',

headerHeight: 15,

maxDepth : 1,

fontColor: 'black',

showScale: false

});

google.visualization.events.addListener(this.tree,'select', this.selectLeaf.bindAsEventListener(this));

if (this.id_contenedor!='')

$(this.id_contenedor).hide();

},

selectLeaf: function() {

row = this.tree.getSelection()[0].row;

item = this.data.G[this.tree.getSelection()[0].row];

switch (this.level) {

case 1:

if (row!=0)

this.level++;

break;

case 2:

dato =this.data.G[row].c[2].v;

/* Si dato == 0 y el nivel es 0 , es que se ha pulsado sobre el nodo superior) */

if (row<=6) {

this.level--;

this.tree.goUpAndDraw();

// exit;

}

else

this.level++;

break;

case 3:

dato =this.data.G[row].c[2].v;

/* Si dato == 0 y el nivel es 0 , es que se ha pulsado sobre el nodo superior) */

if (dato==0) {

this.level--;

this.tree.goUpAndDraw();

// exit;

}

break;

}

},

} );

Santi
--------------------------------------------
Si un canguro pusiese un huevo, y de él saliese un avestruz, el huevo sería de avestruz y no de canguro. Por lo tanto fue antes el huevo.

Si la Tierra en los Polos no es hueca ni calurosa, ¿cómo es que el polen colorea vastos territorios?

Piensa con cuidado, equivocarse es pedir un justo castigo

[Ashis Mohanty]

Hi,

Did you got any solution for this?

I am also need of same functionality with a little change. I want to hide the node header entirely and have my own breadcrumb instead. (highlighted in red color in attached image)

Any help would be appreciated.

Thanks,

[asgallant]

You can set the chart's "headerHeight" option to 0 to hide it.  You can build the breadcrumbs in HTML, and hook "click" event handlers on the breadcrumbs that call the chart's #goUpAndDraw method some number of times (depending on how many breadcrumbs the user is skipping back).

[Cambert]

I'm aware it's a bit late but for all others looking for a quick answer:

      tree_chart1.draw(data, {

      headerHeight: 25,

      fontColor: 'black'

      });

      

      tree_chart1.goUpAndDraw(data, {

      headerHeight: 25,

      fontColor: 'black'

      });

This will add go up level and re-drawing functionality on the 'right-click'

[John Adel]

this will be a nice solution : 

 -------------------------------------------------------------------------------------------------------------

google.visualization.events.addListener(chart, 'ready', function () {                    

                    $(ChartDiv).prepend('<button  id="goUpAndDraw" class="btn btn-default btn-sm" style = " margin:10px;"><span class="glyphicon glyphicon-arrow-left"> </span></button>');

                    

                    $('#goUpAndDraw').click(function () {

                        chart.goUpAndDraw();  

                    })

-------------------------------------------------------------------------------------------------------------------