show different graph on same canvas after deleting div elements

185 views
Skip to first unread message

Jaikit Savla

unread,
Jul 9, 2009, 7:44:33 PM7/9/09
to javascript-information...@googlegroups.com

Hello Doc,

 

After generating the json data from server side I am  trying to visualize data on single canvas using mouse click on client side.     e.g  (<li><a href="javascript:void(0)" onclick="buildSpaceTree()">SpaceTree</a></li>)

 

singlecanvas.jpg

 

 

I have loaded HyperTree for the first time which loads perfectly fine. (shown above)

Now when I click other graph options (SpaceTree, RGraph, ) I delete center-container and infovis div element and create them again.

Than I call the appropriate init method.

 

The json data load fine but I am not able to see labels and perform onclick events.

 

Am I missing something  here ?  I would appreciate someone can point that out OR

Suggest me some better way to display graph on same canvas

 

 

 

          var container = document.getElementById("container");           

            var parentcenter = document.getElementById("center-container");

           

            container.removeChild(parentcenter);            // delete center-container

 

            var newdiv = document.createElement('div');

            var divIdName = 'center-container';

            newdiv.setAttribute('id',divIdName);         

            container.appendChild(newdiv);            //create center-container

 

            parentcenter = document.getElementById("center-container");

            newdiv = document.createElement('div');

            divIdName = 'infovis';

            newdiv.setAttribute('id',divIdName);         

            parentcenter.appendChild(newdiv);               // create infovis div element


image001.jpg

Nico Garcia Belmonte

unread,
Jul 10, 2009, 5:28:10 AM7/10/09
to javascript-information...@googlegroups.com
Hi,

I'd recommend you to not delete the canvas or visualization containers.
Just delete all labels from the current visualization:

for(var id in viz.fx.labels)
viz.fx.disposeLabel(id);
delete viz.fx.labels[id];
}

and then *reuse* the same canvas instance to create a new instance of
a new visualization:

viz = new ST(canvas, ...);

On Fri, Jul 10, 2009 at 1:44 AM, Jaikit Savla<jkts...@gmail.com> wrote:
> Hello Doc,
>
>
>
> After generating the json data from server side I am  trying to visualize
> data on single canvas using mouse click on client side.     e.g  (<li><a
> href="javascript:void(0)" onclick="buildSpaceTree()">SpaceTree</a></li>)
>
>
>
>
>
>
>
--
I would never die for my beliefs because I might be wrong.

Bertrand Russell

Jaikit Savla

unread,
Jul 10, 2009, 11:47:24 AM7/10/09
to javascript-information...@googlegroups.com
Hello,

I created single instance of canvas and than toggle it between HyperTree and RGraph Visualisation tree by deleting labels as you suggested.
It works perfectly fine.

Now, Since the canvas constructor of Space tree is different, how do i introduce/hide background circles while toggling between different visualisations.

Thank You
Reply all
Reply to author
Forward
0 new messages