I am trying to draw a vis.js network diagram and have vis load and position the nodes. I then want the physics to be disabled so the nodes can be moved by the user. I have tried this but it is not working.
var options = {
nodes: {
borderWidth:4,
size:60,
color: {
border: '#222222',
background: 'grey'
},
font:{color:'black'}
},
edges: {
arrows: {
to: {enabled: false, scaleFactor:1},
middle: {enabled: false, scaleFactor:1},
from: {enabled: false, scaleFactor:1}
},
color: 'black'
},
{ physics: enabled: false; };
Has anyone done this? if so can you provide an example or advice on best way to accomplish this. I have also read the explanation located here, but not being too familiar with java I can't figure the steps out.
Thanks
After some more work and help from the vis.js developer here is the completed code, minus the json data and some options. The trick is to use the "stabilizationIterationsDone" event and disable physics:
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: ...,
edges: ...,
physics: {
forceAtlas2Based: {
gravitationalConstant: -26,
centralGravity: 0.005,
springLength: 230,
springConstant: 0.18,
avoidOverlap: 1.5
},
maxVelocity: 146,
solver: 'forceAtlas2Based',
timestep: 0.35,
stabilization: {
enabled: true,
iterations: 1000,
updateInterval: 25
}
}
};
network = new vis.Network(container, data, options);
network.on("stabilizationIterationsDone", function () {
network.setOptions( { physics: false } );
});
I suppose you first want to let the network stabilize and only then disable physics? In that case you can load the Network with physics and stabilization enabled. Once the nodes are stabilized, the stabilized event is fired. Then you can disable the physics via network.setOptions
I was able to figure this out and the code now looks like this
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {
borderWidth:1,
size:45,
color: {
border: '#222222',
background: 'grey'
},
font:{color:'black',
size: 11,
face :'arial',
},
},
edges: {
arrows: {
to: {enabled: false, scaleFactor:1},
middle: {enabled: false, scaleFactor:1},
from: {enabled: false, scaleFactor:1}
},
color: {
color:'#848484',
highlight:'#848484',
hover: '#848484',
},
font: {
color: '#343434',
size: 11, // px
face: 'arial',
background: 'none',
strokeWidth: 5, // px
strokeColor: '#ffffff',
align:'vertical'
},
smooth: {
enabled: false, //setting to true enables curved lines
//type: "dynamic",
//roundness: 0.5
},
}
};
network = new vis.Network(container, data, options);
network.setOptions({
physics: {enabled:false}
});
}
I had to move the network.setOptions() as shown in the new code and it is now working as desired.
Related
I'm facing a "strange" problem I'm not able to solve looking at vis.js documentation.
I created a network with a fixed hierarchy defining a specific level for each node.
Total number of nodes 51. This is the result:
If I add another node at the bottom of the network scheme (total 52) the layout changes, the spacial disposition of the nodes totally move trying to fill white space as you can see:
I tried several options without any success.
These are the options I'm using at the moment:
options = {
layout: {
improvedLayout: false,
hierarchical: {
enabled: true,
levelSeparation: 150,
nodeSpacing: 110,
treeSpacing: 200,
blockShifting: false,
edgeMinimization: true,
parentCentralization: true,
direction: "LR",
sortMethod: "directed",
shakeTowards: "roots"
}
},
interaction:{
tooltipDelay: 100
},
edges: {
font: {
size: 0
}
},
nodes: {
shape: 'circle'
},
physics: false
};
I hope you can give me some suggestion.
Thank you!
you can try to add a randonSeed to the layout in the options object.
layout: {
randomSeed: 1,
improvedLayout: false,
hierarchical: {
enabled: true,
levelSeparation: 150,
nodeSpacing: 110,
treeSpacing: 200,
blockShifting: false,
edgeMinimization: true,
parentCentralization: true,
direction: "LR",
sortMethod: "directed",
shakeTowards: "roots"
}
}
you can change the number (randomSeed: 1) until you get the requested layout.
hope it will help.
So I've read this post, where someone visualizes 4chan posts in a graph. It looks very cool so I wanted to try it out myself. Everything is working good but I'm having some problems with my visjs options.
I am trying to get as close to the options he used. Sadly he hasn't posted them anywhere.
This is what I've got so far:
var options = {
nodes: {
shape: 'dot',
scaling: {
min: 10,
max: 30,
customScalingFunction: function (min,max,total,value) { return value },
label: {
min: 8,
max: 30,
drawThreshold: 12,
maxVisible: 20
}
},
font: {
size: 12,
face: 'Tahoma'
}
},
edges: {
width: 0.15,
color: {inherit: 'from'},
smooth: {
type: 'continuous'
}
},
physics: {
barnesHut: {
springLength: 1000,
springConstant: 1,
avoidOverlap: 1
}
},
interaction: {
tooltipDelay: 200,
hideEdgesOnDrag: true
}
};
My Problem is, that they still don't seem quite right and I also have trouble with overlapping nodes.
JSFiddle
Sorry for the unclean code.
I am working on a control flow graph visualizer using vis.js. it's like the example provided by the maintainesr here.
the following image shows the result:
I want control the way edges are drawn: out arrows start from the bottom and in arrows end at the top of the node. is there a way to have such behavior in vis.js? also can I prevent edges from crossing nodes?
this is my options:
var opts = {
autoResize: true,
height: '100%',
width: '100%',
locale: 'en',
edges: {
arrows: { to: {enabled: true}},
smooth: { enabled: true}
},
nodes: {
font: {'face': 'monospace', 'align': 'left'}
},
layout: {
improvedLayout:true,
hierarchical: {
enabled: true,
sortMethod: "directed",
direction: "UD",
nodeSpacing: 200,
levelSeparation: 200,
}
},
physics: {
hierarchicalRepulsion: {
nodeDistance: 300
}
}
};
var network = new vis.Network(this.domRoot.find(".graph-placeholder")[0],
this.defaultCfgOuput, opts);
I want to change the underlying .css file of the vis.js library.
However, the changes are not reflected and I am even losing on features like "tooltips" or "navigation buttons".
I've tried to put the following into my .html file:
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis-network.min.js">
</script>
<link href="/node_modules/vis/dist/vis.css" rel="stylesheet" type="text/css" />
All I want is to change the color of the navigation buttons and the tooltips.
Cheers!
This Q is rather old, but just for the record:
From what I've seen, elements in VIS networks are styled via settings of the function passed to it when the graph is rendered. This is probably because vis.js renders the graph to a HTML canvas which is basically a black box for browser and it cannot apply any styling to it dynamically.
So, head over to the docs http://visjs.org/docs/network/ and read up what's possible. Generally, you can change color {fill, border, text}, font family, fontsize, shapes of nodes, style of edges, etc.
Also, very useful is the examples gallery: http://visjs.org/network_examples.html
Example of my settings:
var options = {
// tree style
layout: {
// this would make the tree directed
// hierarchical: {
// direction: LR,
// sortMethod: directed
// },
// this makes the tree always the same
randomSeed:2
},
interaction: {
dragNodes :false,
navigationButtons: true, // these need some more CSS
keyboard: true
},
// read the docs for this
physics: {
barnesHut: {
avoidOverlap: 0.99,
gravitationalConstant: -3300,
springLength: 150,
},
minVelocity: 0.75,
timestep: 0.9,
stabilization: {
enabled:true,
iterations:1000,
updateInterval:25
}
},
// general nodes settings
nodes: {
shape: 'box',
font: {
size: 14,
color: '#3f3f3f',
strokeWidth: 3,
strokeColor: 'white',
face: 'akrobat'
},
borderWidth: 2,
color: {
background: '#d7d7f3',
border: '#3030a9',
}
},
// settings for groups of nodes
groups: {
first: {
shape: 'diamond',
size: 5
},
second: {
shape: 'dot',
size: '8',
font: {
strokeWidth: 0,
size: 18
},
color: {
background: '#f3d7d7',
border: '#a93030'
}
}
},
// general edges setting
edges: {
font: {
align: 'middle',
face: 'arial'
},
smooth: {
forceDirection: none
}
}
};
I a trying to plot some information using a flot graph but I can not get the values to appear on the graph. This code was part of a demo file included in a template and so i have modified it to plot the data rather than using a randomise for the values, i am getting no errors but the chart isn't working and was hoping somebody could point me in the right direction.
My code is here:
init: function()
{
// apply styling
charts.utility.applyStyle(this);
this.plot = $.plot(
$("#chart_simple"),
[{
label: "Jobs",
data: this.data.d1,
lines: {fillColor: "#dd3333"},
points: {fillColor: "#dd3333"}
},
{
label: "Resumes",
data: this.data.d2,
lines: {fillColor: "#282b30"},
points: {fillColor: "#282b30"}
}], this.options);
}
},
// lines chart with fill & without points
chart_lines_fill_nopoints:
{
// chart data
data:
{
d1: [[1,100], [2,150], [3,100]],
d2: [[1,100], [2,150], [3,100]]
},
// will hold the chart object
plot: null,
// chart options
options:
{
grid: {
show: true,
aboveData: true,
color: "#3f3f3f",
labelMargin: 5,
axisMargin: 0,
borderWidth: 0,
borderColor:null,
minBorderMargin: 5 ,
clickable: true,
hoverable: true,
autoHighlight: true,
mouseActiveRadius: 20,
backgroundColor : { }
},
series: {
grow: {active:false},
lines: {
show: true,
fill: true,
lineWidth: 2,
steps: false
},
points: {show:false}
},
legend: { position: "nw" },
yaxis: { min: 0 },
xaxis: {ticks:11, tickDecimals: 0},
colors: [],
shadowSize:1,
tooltip: true,
tooltipOpts: {
content: "%s : %y.0",
shifts: {
x: -30,
y: -50
},
defaultTheme: false
}
},
So, digging a bit, I see you are using javascript from here. Looking at a working example here, you've broken their code in the following ways:
1.) You no longer seem to have a parent charts object, so
charts.utility.applyStyle(this);
isn't going to work.
2.) The init function is part of the chart_lines_fill_nopoints object, in your cut/paste code it isn't anymore.
3.) In your sample code you never actually call the init function to draw the plot.
4.) In the options backgroundColor : { } is invalid for flot (maybe this is part of the missing charts.utility.applyStyle).
Taking all this into account here's a fiddle which makes this code work.
Generating flot plots with the above code feels unnecessarily convoluted. Perhaps it makes sense when using these templates, but if you just using this as an example of how to call flot it's not very straightforward.
Also, please next time you post a question, include all relevant information (like where you found this code and how you changed it). Taken out of context this code makes little sense.
This code is working
//Defining data for the chart
var data=
{
d1: [[1,100], [2,150], [3,100]],
d2: [[1,100], [2,150], [3,100]]
};
//Defining options for the chart
var options=
{
grid: {
show: true,
aboveData: true,
color: "#3f3f3f",
labelMargin: 5,
axisMargin: 0,
borderWidth: 0,
borderColor:null,
minBorderMargin: 5 ,
clickable: true,
hoverable: true,
autoHighlight: true,
mouseActiveRadius: 20,
backgroundColor : { }
},
series: {
grow: {active:false},
lines: {
show: true,
fill: true,
lineWidth: 2,
steps: false
},
points: {show:false}
},
legend: { position: "nw" },
yaxis: { min: 0 },
xaxis: {ticks:11, tickDecimals: 0},
colors: [],
shadowSize:1,
tooltip: true,
tooltipOpts: {
content: "%s : %y.0",
shifts: {
x: -30,
y: -50
},
defaultTheme: false
}};
// shorthand for document.ready
$(function(){
this.plot = $.plot(
$("#chart_simple"),
[{
label: "Jobs",
data: data.d1,
lines: {fillColor: "#dd3333"},
points: {fillColor: "#dd3333"}
},
{
label: "Resumes",
data: data.d2,
lines: {fillColor: "#282b30"},
points: {fillColor: "#282b30"}
}], this.options);
});
Check out the working example here on jsfiddle.