title: Cytoscape.js all nodes are on top of each other when created in a loop
body: <p>I'm displaying a flowchart with values from a JSON file.</p>
  
  <p>When I create my element in a static way, like this :</p>
  
  <pre><code>elements: {
        nodes: [
          { data: { id: 'INIT' } },
          { data: { id: 'BUSINESS_RULES_1' } },
          { data: { id: 'EXPORT_STC' } },
          { data: { id: 'EXPORT_SPEC' } },
          { data: { id: 'COPY' } },
          { data: { id: 'MERGE' } },
          { data: { id: 'BUSINESS_RULES_2' } },
          { data: { id: 'TRANSFORM_ARP' } },
          { data: { id: 'TRANSFORM_APS' } },
          { data: { id: 'PUBLISH_APS' } },
          { data: { id: 'PUBLISH_ARP' } },
          { data: { id: 'ARCHIVE' } }
        ],
        edges: [
          { data: { source: 'INIT', target: 'BUSINESS_RULES_1' } },
          { data: { source: 'BUSINESS_RULES_1', target: 'EXPORT_SPEC' } },
          { data: { source: 'BUSINESS_RULES_1', target: 'EXPORT_STC' } },
          { data: { source: 'EXPORT_STC', target: 'COPY' } },
          { data: { source: 'EXPORT_SPEC', target: 'COPY' } },
          { data: { source: 'COPY', target: 'MERGE' } },
          { data: { source: 'MERGE', target: 'BUSINESS_RULES_2' } },
          { data: { source: 'BUSINESS_RULES_2', target: 'TRANSFORM_APS' } },
          { data: { source: 'BUSINESS_RULES_2', target: 'TRANSFORM_ARP' } },
          { data: { source: 'TRANSFORM_ARP', target: 'PUBLISH_ARP' } },
          { data: { source: 'TRANSFORM_APS', target: 'PUBLISH_APS' } },
          { data: { source: 'PUBLISH_APS', target: 'ARCHIVE' } },
          { data: { source: 'PUBLISH_ARP', target: 'ARCHIVE' } }
        ]
      }
  </code></pre>
  
  <p>It is well displayed as you can see :
  <a href="https://i.stack.imgur.com/WZTy3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WZTy3.png" alt="Chart well displayed"></a></p>
  
  <p>But when I create the element in a dynamic way, like this :</p>
  
  <pre><code>// Fill array with nodes and edges
  var arrayNodesAndEdges = [];
  for (var i = 0; i &lt; myJSONdata.length; i++) {
      if(i &lt; myJSONdata.length - 1 &amp;&amp; (myJSONdata[i].OPERATION_NAME != myJSONdata[i+1].OPERATION_NAME)) {
        console.log(i + " " +myJSONdata[i].OPERATION_NAME);
        arrayNodesAndEdges.push({
          group: "nodes",
          data: { 
            id: myJSONdata[i].OPERATION_NAME
          }
        });
      } else if(i == myJSONdata.length - 1) {
        console.log(i + " " +myJSONdata[i].OPERATION_NAME);
        arrayNodesAndEdges.push({
          group: "nodes",
          data: { 
            id: myJSONdata[i].OPERATION_NAME
          }
        });
      }
  }
  
  for (var i = 0; i &lt; myJSONdata.length; i++) {
    var source = myJSONdata[i].OPERATION_NAME;
    if(myJSONdata[i].NEXT_OPERATION_NAME !== "" &amp;&amp; myJSONdata[i].NEXT_OPERATION_NAME !== null) {
      console.log("Source: " + myJSONdata[i].OPERATION_NAME + ", " + "Target: " +myJSONdata[i].NEXT_OPERATION_NAME);
      arrayNodesAndEdges.push({
          group: "edges",
          data: {
              id: "e"+i,
              source: source,
              target: myJSONdata[i].NEXT_OPERATION_NAME
          }
        });
    }
  }
  cy.add(arrayNodesAndEdges);
  </code></pre>
  
  <p>It is bad displayed, all nodes are on top of each other, as you can see:
  <a href="https://i.stack.imgur.com/GbxsA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GbxsA.png" alt="Chart bad displayed"></a></p>
  
  <p>(I moved some to explain how they are positionned, but they are all on top of each other)</p>
  
  <p>Here's the console log, you can see this is the same structure in static or dynamic way :</p>
  
  <pre><code>NODES
  0 INIT
  2 BUSINESS_RULES_1
  3 EXPORT_STC
  4 EXPORT_SPEC
  5 COPY
  6 MERGE
  8 BUSINESS_RULES_2
  9 TRANSFORM_ARP
  10 TRANSFORM_APS
  11 PUBLISH_APS
  12 PUBLISH_ARP
  13 ARCHIVE
  
  EDGES
  Source: INIT, Target: BUSINESS_RULES_1
  Source: BUSINESS_RULES_1, Target: EXPORT_SPEC
  Source: BUSINESS_RULES_1, Target: EXPORT_STC
  Source: EXPORT_STC, Target: COPY
  Source: EXPORT_SPEC, Target: COPY
  Source: COPY, Target: MERGE
  Source: MERGE, Target: BUSINESS_RULES_2
  Source: BUSINESS_RULES_2, Target: TRANSFORM_APS
  Source: BUSINESS_RULES_2, Target: TRANSFORM_ARP
  Source: TRANSFORM_ARP, Target: PUBLISH_ARP
  Source: TRANSFORM_APS, Target: PUBLISH_APS
  Source: PUBLISH_APS, Target: ARCHIVE
  Source: PUBLISH_ARP, Target: ARCHIVE
  </code></pre>
  
  <p>I can't understand what I'm doing wrong ?
  Thank you</p>
  
  <p>EDIT ----------
  This is my whole code :</p>
  
  <pre><code>var myJSONdata = data;
  var cy = window.cy = cytoscape({
    container: document.getElementById('cy'),
  
    boxSelectionEnabled: true,
    autounselectify: true,
    layout: {
      name: 'dagre',
      rankDir: 'LR' // 'TB' for top to bottom flow, 'LR' for left to right. default is undefined, making it plot top-bottom
    },
  
    style: [
      {
        selector: 'node',
        style: {
          'content': 'data(id)',
          'width': 200,
          'height': 50,
          'text-opacity': 1,
          'text-valign': 'center',
          'text-halign': 'center',
          'shape': 'square',
          'label': 'data(id)',
          'background-color': '#11479e',
          'color': 'white'
        }
      },
      {
        selector: 'edge',
        style: {
          'width': 7,
          'target-arrow-color': '#ccc',
          'target-arrow-shape': 'triangle',
          'curve-style': 'bezier',
          'line-color': '#9dbaea'
        }
      },
        {
          selector: ':selected',
          style: {
            'background-color': 'yellow',
            'line-color': 'yellow',
            'target-arrow-color': 'yellow',
            'source-arrow-color': 'yellow',
          }
        }
      ]
      /*,elements: {
        nodes: [
          { data: { id: 'INIT' } },
          { data: { id: 'BUSINESS_RULES_1' } },
          { data: { id: 'EXPORT_STC' } },
          { data: { id: 'EXPORT_SPEC' } },
          { data: { id: 'COPY' } },
          { data: { id: 'MERGE' } },
          { data: { id: 'BUSINESS_RULES_2' } },
          { data: { id: 'TRANSFORM_ARP' } },
          { data: { id: 'TRANSFORM_APS' } },
          { data: { id: 'PUBLISH_APS' } },
          { data: { id: 'PUBLISH_ARP' } },
          { data: { id: 'ARCHIVE' } }
        ],
        edges: [
          { data: { source: 'INIT', target: 'BUSINESS_RULES_1' } },
          { data: { source: 'BUSINESS_RULES_1', target: 'EXPORT_SPEC' } },
          { data: { source: 'BUSINESS_RULES_1', target: 'EXPORT_STC' } },
          { data: { source: 'EXPORT_STC', target: 'COPY' } },
          { data: { source: 'EXPORT_SPEC', target: 'COPY' } },
          { data: { source: 'COPY', target: 'MERGE' } },
          { data: { source: 'MERGE', target: 'BUSINESS_RULES_2' } },
          { data: { source: 'BUSINESS_RULES_2', target: 'TRANSFORM_APS' } },
          { data: { source: 'BUSINESS_RULES_2', target: 'TRANSFORM_ARP' } },
          { data: { source: 'TRANSFORM_ARP', target: 'PUBLISH_ARP' } },
          { data: { source: 'TRANSFORM_APS', target: 'PUBLISH_APS' } },
          { data: { source: 'PUBLISH_APS', target: 'ARCHIVE' } },
          { data: { source: 'PUBLISH_ARP', target: 'ARCHIVE' } }
        ]
      }*/
  });
  
  
  
  // Fill array with nodes and edges
  var arrayNodesAndEdges = [];
  for (var i = 0; i &lt; myJSONdata.length; i++) {
      if(i &lt; myJSONdata.length - 1 &amp;&amp; (myJSONdata[i].OPERATION_NAME != myJSONdata[i+1].OPERATION_NAME)) {
        console.log(i + " " +myJSONdata[i].OPERATION_NAME);
        arrayNodesAndEdges.push({
          group: "nodes",
          data: { 
            id: myJSONdata[i].OPERATION_NAME
          }
        });
      } else if(i == myJSONdata.length - 1) {
        console.log(i + " " +myJSONdata[i].OPERATION_NAME);
        arrayNodesAndEdges.push({
          group: "nodes",
          data: { 
            id: myJSONdata[i].OPERATION_NAME
          }
        });
      }
  }
  
  for (var i = 0; i &lt; myJSONdata.length; i++) {
    var source = myJSONdata[i].OPERATION_NAME;
    if(myJSONdata[i].NEXT_OPERATION_NAME !== "" &amp;&amp; myJSONdata[i].NEXT_OPERATION_NAME !== null) {
      console.log("Source: " + myJSONdata[i].OPERATION_NAME + ", " + "Target: " +myJSONdata[i].NEXT_OPERATION_NAME);
      arrayNodesAndEdges.push({
          group: "edges",
          data: {
              id: "e"+i,
              source: source,
              target: myJSONdata[i].NEXT_OPERATION_NAME
          }
        });
    }
  }
  cy.add(arrayNodesAndEdges);
  </code></pre>