CODEWITHSUNDEEP
javascripthtmlbootstrap-4jinja2vis.js
AbtPst
AbtPst

Reputation: 8008

VIS JS: Cant make network fit bootstrap panel

I am working with vis.JS to create a network graph from some data. Then I populate this network within a bootstrap panel. The issue is that the network is very small. I can't make any sense of it. Also, if I zoom in, I loose all perspective of the data.

enter image description here

Here are the code snippets

the div where the network appears

<div class="row">
<div class="panel panel-primary" >
    <div class="panel-heading">Heading</div>
    <div class="panel-body">
        <div id="network" width=100% height=100%></div>
    </div>
</div>
</div>

and here is the javascript. Note that my data is coming from server via Jinja

<script type="text/javascript">
// create an array with nodes
var mynodes = new vis.DataSet({{ mynodes | safe }});

// create an array with edges
var myedges = new vis.DataSet({{ myedges |safe }});

// create a network
var container = document.getElementById('network');
var data = {
    nodes: mynodes,
    edges: myedges
};
var options = {
    autoResize: true,
    width: '100%',
    height: '100%'
};
var network = new vis.Network(container, data, options);
</script>

How can I set the size of the network that appears? Ideally I want to size the network so that the nodes and edges are legible.

What am I missing? Is it because of bootstrap that I am not able to resize the network properly?

Upvotes: 0

Views: 953

Answers (1)

AbtPst
AbtPst

Reputation: 8008

found the solution

var options = {
              width: '1000px',
              height: '600px'
              };

Upvotes: 2

Related Questions