Data not rendering in Cytoscape.js in the Django template

Question

I am trying to display the data in the Django template in the form of graph. I am getting the data from Neo4J and for querying I am using neomodel. First I am serializing the data in the form of JSON accepted my Cytoscape.js.

This is my template

<!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 my_graph_data = JSON.parse('{{ data|escapejs }}');
        var cy = cytoscape({
            container: document.getElementById('cy'),
            elements: '{{data}}',
            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>

This is the format of my data when I print my json

[{'data': {'movieName': 'Matrix', 'director': 'John', 'rating': 9.0}}, {'data': {'movieName': 'John Wick', 'director': 'Bill', 'rating': 8.0}}]

When I try the different data with same format I get the graph

[
      { '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' } }

    ]

I am not able to understand what's the problem, can anyone see what I am doing wrong ??

Can anyone see what I am doing wrong ? – shrikant02 Mar 03 '23 at 06:14 — shrikant02, Mar 03 '23 at 06:14

Data not rendering in Cytoscape.js in the Django template

0 Answers0