cytoscape.js graph, shows/draws only with few nodes and edges

Question

I am creating a graph with Cytoscape.js on my website, to show admins the connections among users. Everything is fine, but some graph are not drawn down. No errors in console, but the canvas seems empty.

For example, a graph that is not drawn has 20 EDGES and 18 NODES. If I remove some edges, the graph is drawn and showed. No matter to which node or edge I remove: if I reach 18 EDGES it shows. So I thought "maybe it's too large".

But actually I have bigger graphs (37 edges) that are drawn without problems.

What can be the problem?

This is a graph that it's not showing. By the way, is there an online website where I can test this structure? Thanks

{
    "elements": {
        "nodes": [
            {"data": {"id": "1"}}, 
            {"data": {"id": "2"}}, 
            {"data": {"id": "3"}}, 
            {"data": {"id": "4"}}, 
            {"data": {"id": "5"}}, 
            {"data": {"id": "6"}}, 
            {"data": {"id": "7"}}, 
            {"data": {"id": "8"}}, 
            {"data": {"id": "9"}}, 
            {"data": {"id": "10"}}, 
            {"data": {"id": "11"}}, 
            {"data": {"id": "12"}}, 
            {"data": {"id": "13"}}, 
            {"data": {"id": "14"}}, 
            {"data": {"id": "18"}}, 
            {"data": {"id": "15"}}, 
            {"data": {"id": "16"}}, 
            {"data": {"id": "17"}}
            ],
        "edges": [{
            "data": {
                "source": "1",
                "target": "2"
            }
        }, {
            "data": {
                "source": "1",
                "target": "3"
            }
        }, {
            "data": {
                "source": "4",
                "target": "3"
            }
        }, {
            "data": {
                "source": "5",
                "target": "3"
            }
        }, {
            "data": {
                "source": "1",
                "target": "6"
            }
        }, {
            "data": {
                "source": "7",
                "target": "6"
            }
        }, {
            "data": {
                "source": "1",
                "target": "8"
            }
        }, {
            "data": {
                "source": "9",
                "target": "1"
            }
        }, {
            "data": {
                "source": "1",
                "target": "9"
            }
        }, {
            "data": {
                "source": "1",
                "target": "10"
            }
        }, {
            "data": {
                "source": "4",
                "target": "10"
            }
        }, {
            "data": {
                "source": "1",
                "target": "11"
            }
        }, {
            "data": {
                "source": "1",
                "target": "4"
            }
        }, {
            "data": {
                "source": "8",
                "target": "12"
            }
        }, {
            "data": {
                "source": "14",
                "target": "13"
            }
        }, {
            "data": {
                "source": "8",
                "target": "13"
            }
        }, {
            "data": {
                "source": "15",
                "target": "18"
            }
        }, {
            "data": {
                "source": "11",
                "target": "18"
            }
        }, {
            "data": {
                "source": "11",
                "target": "16"
            }
        }, {
            "data": {
                "source": "17",
                "target": "16"
            }
        }],
    },
}

Answer 1

I got the elements to display just fine:

var cy = window.cy = cytoscape({
  container: document.getElementById('cy'),

  boxSelectionEnabled: false,
  autounselectify: true,

  style: [{
      selector: 'node',
      css: {
        'content': 'data(id)',
        'text-valign': 'center',
        'text-halign': 'center',
        'height': '60px',
        'width': '60px',
        'border-color': 'black',
        'border-opacity': '1',
        'border-width': '10px'
      }
    },
    {
      selector: '$node > node',
      css: {
        'padding-top': '10px',
        'padding-left': '10px',
        'padding-bottom': '10px',
        'padding-right': '10px',
        'text-valign': 'top',
        'text-halign': 'center',
        'background-color': '#bbb'
      }
    },
    {
      selector: 'edge',
      css: {
        'target-arrow-shape': 'triangle'
      }
    },
    {
      selector: ':selected',
      css: {
        'background-color': 'black',
        'line-color': 'black',
        'target-arrow-color': 'black',
        'source-arrow-color': 'black'
      }
    }
  ],

  elements: {
    nodes: [{
        data: {
          id: "1"
        }
      },
      {
        data: {
          id: "2"
        }
      },
      {
        data: {
          id: "3"
        }
      },
      {
        data: {
          id: "4"
        }
      },
      {
        data: {
          id: "5"
        }
      },
      {
        data: {
          id: "6"
        }
      },
      {
        data: {
          id: "7"
        }
      },
      {
        data: {
          id: "8"
        }
      },
      {
        data: {
          id: "9"
        }
      },
      {
        data: {
          id: "10"
        }
      },
      {
        data: {
          id: "11"
        }
      },
      {
        data: {
          id: "12"
        }
      },
      {
        data: {
          id: "13"
        }
      },
      {
        data: {
          id: "14"
        }
      },
      {
        data: {
          id: "15"
        }
      },
      {
        data: {
          id: "16"
        }
      },
      {
        data: {
          id: "17"
        }
      },
      {
        data: {
          id: "18"
        }
      }
    ],
    edges: [{
        data: {
          source: "1",
          target: "2"
        }
      },
      {
        data: {
          source: "1",
          target: "3"
        }
      },
      {
        data: {
          source: "4",
          target: "3"
        }
      },
      {
        data: {
          source: "5",
          target: "3"
        }
      },
      {
        data: {
          source: "1",
          target: "6"
        }
      },
      {
        data: {
          source: "7",
          target: "6"
        }
      },
      {
        data: {
          source: "1",
          target: "8"
        }
      },
      {
        data: {
          source: "9",
          target: "1"
        }
      },
      {
        data: {
          source: "1",
          target: "9"
        }
      },
      {
        data: {
          source: "1",
          target: "10"
        }
      },
      {
        data: {
          source: "4",
          target: "10"
        }
      },
      {
        data: {
          source: "1",
          target: "11"
        }
      },
      {
        data: {
          source: "1",
          target: "4"
        }
      },
      {
        data: {
          source: "8",
          target: "12"
        }
      },
      {
        data: {
          source: "14",
          target: "13"
        }
      },
      {
        data: {
          source: "8",
          target: "13"
        }
      },
      {
        data: {
          source: "15",
          target: "18"
        }
      },
      {
        data: {
          source: "11",
          target: "18"
        }
      },
      {
        data: {
          source: "11",
          target: "16"
        }
      },
      {
        data: {
          source: "17",
          target: "16"
        }
      }
    ]
  },

  layout: {
    name: 'breadthfirst',
    directed: true,
    padding: 15
  }
});

body {
  font: 14px helvetica neue, helvetica, arial, sans-serif;
}

#cy {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  float: left;
}

<html>

<head>
  <meta charset=utf-8 />
  <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.2.17/cytoscape.min.js"></script>
</head>

<body>
  <div id="cy"></div>
</body>

</html>

Answer 2

I had the same issue.

In my case, the height of the cy's div was equal to zero, meaning I see nothing.

I fixed it using this css styles:

    html,
    body {
      height: 100%;
    }

    #cy {
      width: 100%;
      height: 90%;
    }

The crucial point is to make sure the html and the body fill the entire page, thus div#cy will occupy 90% of that screen space, and the graph will be there using any layout we use.