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.
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?
javascript html5 bootstrap-4 jinja2 vis.js
edited Nov 15 '18 at 17:02
YakovL
3,043102541
asked Nov 15 '18 at 2:11
AbtPstAbtPst
3,02984495
add a comment |
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.
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?
javascript html5 bootstrap-4 jinja2 vis.js
edited Nov 15 '18 at 17:02
YakovL
3,043102541
asked Nov 15 '18 at 2:11
AbtPstAbtPst
3,02984495
Please provide a Minimal, Complete, and Verifiable example: substitute the jinja template parts with some data that's good enough to reproduce the issue and more importantly, we need CSS to see what actually happens. Please consider creating SO snippet or jsFilddle and I'm sure we'll solve this issue. Best regards
– YakovL
Nov 15 '18 at 17:04
add a comment |
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.
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?
javascript html5 bootstrap-4 jinja2 vis.js
edited Nov 15 '18 at 17:02
YakovL
3,043102541
asked Nov 15 '18 at 2:11
AbtPstAbtPst
3,02984495
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.
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?
javascript html5 bootstrap-4 jinja2 vis.js
javascript html5 bootstrap-4 jinja2 vis.js
edited Nov 15 '18 at 17:02
YakovL
3,043102541
asked Nov 15 '18 at 2:11
AbtPstAbtPst
3,02984495
edited Nov 15 '18 at 17:02
YakovL
3,043102541
asked Nov 15 '18 at 2:11
AbtPstAbtPst
3,02984495
edited Nov 15 '18 at 17:02
YakovL
3,043102541
edited Nov 15 '18 at 17:02
YakovL
3,043102541
edited Nov 15 '18 at 17:02
YakovL
3,043102541
3,043102541
asked Nov 15 '18 at 2:11
AbtPstAbtPst
3,02984495
asked Nov 15 '18 at 2:11
AbtPstAbtPst
3,02984495
asked Nov 15 '18 at 2:11
AbtPstAbtPst
3,02984495
3,02984495
Please provide a Minimal, Complete, and Verifiable example: substitute the jinja template parts with some data that's good enough to reproduce the issue and more importantly, we need CSS to see what actually happens. Please consider creating SO snippet or jsFilddle and I'm sure we'll solve this issue. Best regards
– YakovL
Nov 15 '18 at 17:04
add a comment |
Please provide a Minimal, Complete, and Verifiable example: substitute the jinja template parts with some data that's good enough to reproduce the issue and more importantly, we need CSS to see what actually happens. Please consider creating SO snippet or jsFilddle and I'm sure we'll solve this issue. Best regards
– YakovL
Nov 15 '18 at 17:04
Please provide a Minimal, Complete, and Verifiable example: substitute the jinja template parts with some data that's good enough to reproduce the issue and more importantly, we need CSS to see what actually happens. Please consider creating SO snippet or jsFilddle and I'm sure we'll solve this issue. Best regards
– YakovL
Nov 15 '18 at 17:04
Please provide a Minimal, Complete, and Verifiable example: substitute the jinja template parts with some data that's good enough to reproduce the issue and more importantly, we need CSS to see what actually happens. Please consider creating SO snippet or jsFilddle and I'm sure we'll solve this issue. Best regards
– YakovL
Nov 15 '18 at 17:04
add a comment |
1 Answer
1
active
oldest
votes
found the solution
var options = {
width: '1000px',
height: '600px'
};
answered Nov 20 '18 at 23:34
AbtPstAbtPst
3,02984495
1
please accept your answer so that it's clear that the issue is solved
– YakovL
Nov 26 '18 at 11:17
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53311448%2fvis-js-cant-make-network-fit-bootstrap-panel%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
found the solution
var options = {
width: '1000px',
height: '600px'
};
answered Nov 20 '18 at 23:34
AbtPstAbtPst
3,02984495
1
please accept your answer so that it's clear that the issue is solved
– YakovL
Nov 26 '18 at 11:17
add a comment |
found the solution
var options = {
width: '1000px',
height: '600px'
};
answered Nov 20 '18 at 23:34
AbtPstAbtPst
3,02984495
1
please accept your answer so that it's clear that the issue is solved
– YakovL
Nov 26 '18 at 11:17
add a comment |
found the solution
var options = {
width: '1000px',
height: '600px'
};
answered Nov 20 '18 at 23:34
AbtPstAbtPst
3,02984495
found the solution
var options = {
width: '1000px',
height: '600px'
};
answered Nov 20 '18 at 23:34
AbtPstAbtPst
3,02984495
answered Nov 20 '18 at 23:34
AbtPstAbtPst
3,02984495
answered Nov 20 '18 at 23:34
AbtPstAbtPst
3,02984495
answered Nov 20 '18 at 23:34
AbtPstAbtPst
3,02984495
3,02984495
1
please accept your answer so that it's clear that the issue is solved
– YakovL
Nov 26 '18 at 11:17
add a comment |
1
please accept your answer so that it's clear that the issue is solved
– YakovL
Nov 26 '18 at 11:17
1
1
please accept your answer so that it's clear that the issue is solved
– YakovL
Nov 26 '18 at 11:17
please accept your answer so that it's clear that the issue is solved
– YakovL
Nov 26 '18 at 11:17
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53311448%2fvis-js-cant-make-network-fit-bootstrap-panel%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Please provide a Minimal, Complete, and Verifiable example: substitute the jinja template parts with some data that's good enough to reproduce the issue and more importantly, we need CSS to see what actually happens. Please consider creating SO snippet or jsFilddle and I'm sure we'll solve this issue. Best regards
– YakovL
Nov 15 '18 at 17:04