0

I am trying to show graph in the HTML template of my Django application, I first tried with the actual data that I am working with (I am using the Neomodel to fetch the data from Neo4J and then transforming it to right JSON for cytoscape), but it did not work with it. After that I tried with the mock data but it did not after that either. I don't understand what I am doing wrong.

This is my graph.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Graph View</title>
<!--    <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.23.0/cytoscape.min.js" integrity="sha512-gEWKnYYa1/1c3jOuT9PR7NxiVI1bwn02DeJGsl+lMVQ1fWMNvtjkjxIApTdbJ/wcDjQmbf+McWahXwipdC9bGA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.8.4/cytoscape.min.js" integrity="sha512-gn5PcEn1Y2LfoL8jnUhJtarbIPjFmPzDMljQbnYRxE8IP0y5opHE1nH/83YOuiWexnwftmGlx6i2aeJUdHO49A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <style>
     #cy {
       width: 300px;
       height: 250px;
       display: block;
       background-color: #fff;
    }
    </style>
</head>
<body>
    {{data}}
    <div id="cy"></div>
    <div id="test"></div>
    <h2>Hello</h2>
<script>
        var cy = cytoscape({
            container = document.getElementById('cy'),
            elements:
            {
    nodes: [
      { data: { id: 'a', name: 'Sheraton Cherry' } },
      { data:  { id: 'a1', name: 'Rosacea'}},
      { data: { id: 'a2', name: 'Dentate' } },
      { data: { id: 'a3', name: 'Pinnate' } },
      { data: { id: 'b', name: 'Pineapple Guava' } },
      { data:  { id: 'b1', name: 'Myrtaceae'}},
      { data: { id: 'b2', name: 'Entire' } },
      { data: { id: 'a3', name: 'Pinnate' } }

    ],
    edges: [
      { data: { source: 'a1', target: 'a' }},
      { data: { source: 'a2', target: 'a' }},
      { data: { source: 'a3', target: 'a' }},
      { data: { source: 'b1', target: 'b'}},
      { data: { source: 'b2', target: 'b'}},
      { data: { source: 'a3', target: 'b'}}
    ]
  },
            style: [
                {
                        selector: 'node',
                        style: {
                            'label': 'data(label)',
                            'width': '60px',
                            'height': '60px',
                            'color': 'blue',
                            'background-fit': 'contain',
                            'background-clip': 'none'
          }  }, {
                        selector: 'edge',
                        style: {
                           'text-background-color': 'yellow',
                            'text-background-opacity': 0.4,
                            'width': '6px',
                            'target-arrow-shape': 'triangle',
                            'control-point-step-size': '140px'
                        }
                }
            ],
                layout: {
                    name: 'circle'
                }
        });
    </script>
</body>
</html>

I do not know Javascript never used it, only know basics. Can anyone see what I am doing wrong.

shrikant02
  • 15
  • 6
  • I can see at least 1 syntax error. Check your markup. Paste your script into any decent IDE and it should highlight the mistakes. Or pop open chrome dev tools when viewing your site. – mpen Feb 26 '23 at 18:13
  • @mpen You were right, there was a syntax error, corrected it but still cannot see the graph. – shrikant02 Feb 26 '23 at 19:47
  • @mpen do you know what I am doing wrong ? – shrikant02 Feb 28 '23 at 14:54
  • You still have an error. You shouldn't be doing assignments inside of objects (`container =` should be `container:`) – mpen Mar 02 '23 at 08:06

0 Answers0