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

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>