Redraw graph

[Gonzalo C]

Hi! First of all thanks for this amazing library.
I have been able to use the graph property but I have a little problem. After the graph is drawn, my application executes some ajax code and I need to repaint the whole graph after a server response. How can I do that?

I have tried redrawing all nodes and then calling initPageObjects but this seems not to be working? Any thoughts?
Thanks in advance.

[donatook]

Hi Gonzalo!
Have you found any solution to your problem?

Thanks,
Donato

[donatook]

I managed to add block and connection dynamically:
To add a block from an HTMLelement:

var canvas = findCanvas('canvas');
var newBlock = new Block(HTMLelement, canvas);
newBlock.initBlock();
canvas.blocks.push(newBlock);

To add a connection from an HTMLdiv with classname properly set:

var canvas = findCanvas('canvas');
var newConnection = new Connection(HTMLelement, canvas);
newConnection.initConnection();
canvas.connections.push(newConnection);

Hope it may help you.

[Felipe Escobar]

Hi
The code to add the blocks is very useful. As the rest of the library

But still, i see no chance to reload the object, with the new inner HTML

For example, to change the font size of the objects inside.

I guess there is some objects, already load in the first initPageObjects call, which not allow the new canvas to load correctly. The behaviour and aspect that error is very similar than not using resizeCanvas method.
I will keep on fighting with it. Any help or suggestion is apreciated.

[Felipe Escobar]

Hey
I found a solution

I hope this will help to any Ajax application.Is works perfectly for me.

First of all, we need to change the method initPageObjects in the js-graph-it.js

function initPageObjects()
{

if(isCanvas(document.body))
{
var newCanvas = new Canvas(document.body);
newCanvas.initCanvas();
canvases.push(newCanvas);
}else{
var divs = document.getElementsByTagName('div');
var i;
for(i = 0; i < divs.length; i++)
{
if(isCanvas(divs_) && !findCanvas(divs.id))

{
if(newCanvas==null){
newCanvas = new Canvas(divs);
newCanvas.initCanvas();
canvases.push(newCanvas);

}else{
newCanvas = new Canvas(divs);
newCanvas.initCanvas();
canvases.push(newCanvas);
}
}else if(isCanvas(divs) && findCanvas(divs.id)){
newCanvas = new Canvas(divs);
newCanvas.initCanvas();
canvases.push(newCanvas);
}
}
}
}

Then, Whenever you reload the Main object where you reload the HTML code, you have to call the init methods again:

setMenu();
resizeCanvas();
initPageObjects();

Thats all.
If i forgot sth, let me know.

It would be an honor to me to have my code included on the library :-D

ciao
_

[donatook]

Thank you.
I also have done some changes to the library. It would be good if we could discuss and merge all the contributions.

Bye

[Felipe Escobar]

I think is a good idea.
But how?? Are u from the project?
Maybe someone from the project should talk to us about it 
Someone there?

[donatook]

No, I'm not from the project. But I've found this library very very useful: it would be a pity to let it remain with bugs.
I'm new in SourceForge and I'm not used with projects and contributions.
This week I'm very busy… then I can post my version.

Bye

[Felipe Escobar]

Well, i have to say i was wrong. The graph isnt redraw correctly with the previous code id post, but it doesnt move with the connectors.Im trying to figure out why, and how to solve it.

[donatook]

Hi.
I don't know if this can be any help but, as far as I remember, the original HTML element of a Block can be accessed via the .htmlElement of the Block itself.
Maybe the block can be redrawn by changing its htmlElement.

Something like: Block.findBlock(id).htmlElement = "<NEW HTML>"…

Donato

[donatook]

Sorry:

Block.findBlock(id).htmlElement.innerHTML = "<NEW HTML>"

[Felipe Escobar]

Finally the best way to reload the innerHTML, with the connectors still working is to rename the canvas ID, and the connectors ID. in that way there will be no collision with the existings objects in memory. i tried to delete the dom objects, but it didnt work.
If anybody has any question to implement ajax with this js graph, please, do not hesitate to contact me, or just post a question, i will monitor it

Thanks again to the project people.

[Raghuraman]

Hey guys,

I solved this. You just have to remove the canvasId from the "canvases" array. I added a function to this library like below.

delCanvas = function(canvasId)
{
var i;
for(i = 0; i < JSGraphIt.canvases.length; i++)
if(JSGraphIt.canvases[i].id == canvasId)
JSGraphIt.canvases.splice(i,1);
}

and call this function with the ID whose innerHTML is replaced with new one. and then call initPageObjects() like this.

delCanvas('canvasID');
initPageObjects();

[sfkammy]

Hi Radhuraman,

Can you please share an example of how you used this? I've tried using the delCanvas function but it returns an Object Expected error.

[Matt Laub]

What worked for my simple implementation with one canvas div.
NOTE: if only using one canvas div
//Build DOM and <body onload="initPageObjects()"> complete
canvases.pop(); // remove before block/connectors changes.
//Build or change blocks and connectors
initPageObjects();

It is expensive and can be done more delicate but hope it helps someone.