Trying to reload the diagram

Below is my code…
when i click on a button it generates the diagram perfectly but when i click on that button again it says …Error: Invalid div id; div already has a Diagram associated with it…could you please tell me what am i doing wrong…i tried using Diagram.div = null;
but its not working at all.

var $1 = go.GraphObject.make;
myDiagram = $1(go.Diagram, “myDiagramDiv”,
initialContentAlignment: go.Spot.Center,
“undoManager.isEnabled”: true,
allowDragOut: false
myDiagram.nodeTemplate =
$1(go.Node, “Auto”,
$1(go.Shape, “Ellipse”, { strokeWidth: 5 },
new go.Binding(“fill”, “color”)),
$1(go.TextBlock, { margin: 8 },
new go.Binding(“text”, “key”))
var linkDataArray = [];
var linkerData = [];

  for (var i = 0, j = 0; i < Session.get('gojsname1').length, j < Session.get('gojsname2').length; i++, j++) {
      linkDataArray.push({ key: Session.get('gojsname1')[i], color: "orange" }, { key: Session.get('gojsname2')[j], color: "orange" });
      linkerData.push({ from: Session.get('gojsname1')[i], to: Session.get('gojsname2')[j] });

  for (var iter = 0; iter < linkDataArray.length; iter++) {
      for (var innerIter = 0; innerIter < linkDataArray.length; innerIter++) {

          if (iter != innerIter) {
              if (linkDataArray[iter].key == linkDataArray[innerIter].key) {
                  linkDataArray.splice(innerIter, 1);
  myDiagram.model = new go.GraphLinksModel(
      linkDataArray, linkerData

That’s right – you need to set myDiagram.div = null before creating a new Diagram using the same DIV element.

Ohk it is working thanks. :)

Thanks for solution walter… But will u please mention where exactly we need to clear the div… In my case iam getting empty div after reloading…since iam clearing the div just before creating my diagram.modal

Are you trying to replace the diagram entirely, or just the model? If you just want to use a new model, you don’t need to set myDiagram.div = null, you can just set Diagram.model to the new model.

Hi …iam trying to create diagram…with same name and inserting in same div… But each time I am calling same java script function by passing diff values for nodes and links… So,on first call iam able to view diagram…on second call iam facing an error "Error: Invalid div id; div already has a Diagram associated with it. "… Then I tried with diagram.div =null … But This is clearing the diagram before displaying…

How does what you’re doing differ from the replaceDiagram function in this codepen?

I am getting the same error when I re rendering the same diagram div and overview div

My code is
myOverview = $(go.Overview, 'project_overview', { observed: diagram, contentAlignment: go.Spot.Center });

if I remove this overview div code, everything works fine.

and my error is
Error: Invalid div id; div already has a Diagram associated with it.

At that time there already is a Diagram associated with that HTML DIV element.

You can disassociate it by setting Diagram.div to null on that Diagram.

In the unlikely case that you no longer have a reference to that Diagram, you can call the static function Diagram.fromDiv.

I wrote

var projectDiagramDiv = document.getElementById("project-diagram");
var projectDiagram = go.Diagram.fromDiv(projectDiagramDiv);
      projectDiagram.div = null;

and it is not working. is there anything to do with overview div, similar to this?

Why are you looking at the DIV whose id is "project-diagram"?

Your code that was causing an error used:

“project-diagram” is the id of the div for the diagram.
“project_overview” is to display the overview of the diagram.