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
}
}
};
Related
currently I'm trying to realize this function:
I've created a color selector on the website. Once a user selects a specific color, the colors of nodes he/she selected and their neighbouring nodes will be changed into the color selected after tap.
For example, in the case below, if I select "red" and then choose the node "cytoscape", the "cytoscape" and the "cytoscape.js" will both be red. Now if I change the color into "green" and then I click on "test", the "test" node will change into green but the "cytoscape" and "cytoscape.js" still remain "red". Does someone know how to do this?
Thank you!
Here is my code:
var cy = cytoscape({
container: document.getElementById('cy'),
style: [
{
selector: 'node',
style: {
'label': 'data(name)',
'text-valign': 'center',
'color':"white",
'text-outline-color': 'orange',
'text-outline-width': 2,
'background-color': 'orange',
}
},
{
selector: 'edge',
style: {
'width':2,
'line-color':'grey',
}
},
{
selector: 'node.highlight',
style: {
'label': 'data(name)',
'text-valign': 'center',
'color':"white",
'text-outline-color': 'red',
'text-outline-width': 2,
'background-color': 'red',
}
},
{
selector: 'node.semitransp',
style:{ 'opacity': '0.5' }
},
],
elements: {
nodes: [
{ data: { id: 'desktop', name: 'Cytoscape' } },
{ data: { id: 'test', name: 'Test'} },
{ data: { id: 'js', name: 'Cytoscape.js'} },
],
edges: [
{ data: { source: 'desktop', target: 'js' } },
{ data: { source: 'js', target: 'desktop' } }
]
},
layout: {
name: 'cose',
idealEdgeLength: 100,
nodeOverlap: 20,
refresh: 20,
fit: true,
padding: 30,
randomize: false,
componentSpacing: 100,
nodeRepulsion: 400000,
edgeElasticity: 100,
nestingFactor: 5,
gravity: 80,
numIter: 1000,
initialTemp: 200,
coolingFactor: 0.95,
minTemp: 1.0
},
minZoom:0.5,
maxZoom:3,
motionBlur: true,
wheelSensitivity: 0.05,
});
cy.on('tap', 'node', function(e){
var ele = e.target;
if(cy.elements('node[background-color:orange]')){
cy.elements().difference(ele.outgoers());
ele.addClass('highlight').outgoers().addClass('highlight');
}
});
cy.on('cxttap', 'node', function(e){
var ele = e.target;
ele.removeClass('highlight').outgoers().removeClass('highlight');
});
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
<title></title>
<style>
#cy{
width: auto;
height: 500px;
display: block;
background-color: #F5F5F5;
}
#box{position: absolute;}
</style>
</head>
<body>
<select id="color_selector">
<option value="red">red</option>
<option value="green">green</option>
<option value="orange">orange</option>
</select>
<div id="cy"></div>
</body>
I suggest you read about the :selected state and not fiddle with classes by yourself, unless you really need to.
Nonethless, to answer your question. You are not using the select's value anywhere in your code, hence, nothing happens. In the snippet you provided, no node ever turns green. There is only orange (default state) and red (highlighted state via class highlight).
In order to obtain a dynamic background-color, you need to use either node.style(property, value) or better yet, store the value in data and create a generic style property that applies when a node has a specific datum. By using data instead of style the user preference will persist.
Here's your code updated - https://codepen.io/Raven0us/pen/zYvNyJR
I added
{
selector: 'node[background_color]',
style: {
'background-color': 'data(background_color)',
'text-outline-color': 'data(background_color)',
}
},
node[background-color] means nodes that have background_color within their data set.
It's important for this to be declared before the highlight styling because you want highlight to override everything, in order to provide the user with feedback that they have selected the nodes.
Also added
document.getElementById('color_selector').addEventListener('change', (e) => {
let nodes = cy.$('node.highlight');
nodes.forEach(node => {
node.data('background_color', e.target.value);
node.removeClass('highlight'); // need to remove class in order to display the updated background color
})
})
LE - The highlighting color should never be featured as an option for the user. Alternatively, you could enlarge the nodes in order to emphasize the fact that they are highlighted/selected.
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 have created a treemap using Highcharts, but the top and left borders are missing. I've been reading through the docs but can't find anything which will help.
I have created a Codepen here. You can see that against the black background the borders along the top and left sides of the series aren't visible. I think they're there, but maybe the chart is offset on the X/Y by a pixel or something.
Highcharts.setOptions({
colors: ['#263542', '#3d4d5d', '#41474d', '#515961', '#292e33', '#24445e'],
lang: {
thousandsSep: ','
}
});
Highcharts.chart('treemap', {
chart: {
backgroundColor: 'rgba(255,255,255,0)',
borderColor: 'rgb(255,255,255)'
},
credits: {
enabled: false
},
plotOptions: {
series: {
colorByPoint: true,
borderColor: 'rgb(71, 116, 135)',
borderWidth: 1,
dataLabels: {
enabled: true,
style: {
textOutline: 'none',
fontFamily: 'Roboto',
fontWeight: '300',
fontSize: '1rem'
}
}
}
},
tooltip: {
valuePrefix: '£'
},
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
data: [{
name: 'Indices',
value: 230000,
}, {
name: 'Forex',
value: 120000,
}, {
name: 'Shares',
value: 55000,
}, {
name: 'Pension',
value: 55000,
}, {
name: 'ISA',
value: 20000,
}]
}],
title: {
text: ''
},
legend: {
enabled: false
}
});
body {
background: #000;
}
#treemap {
width: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<div id="treemap"></div>
I cannot comment yet, so this is not really and answer. But I found that if you change your borderWidth to 2, then the border becomes visible. To me this indicates that the margin or padding of your element is covering up the border in the top left section of the element for some reason. Hope this can point you in some sort of direction.
It looks like, even though axes (xAxis/yAxis) are not visible in treemap chart, they have impact on it, by covering left and top part of the border. Setting the offset property in both axes with small value (e.g. 1) will move them away from plot area, uncovering missing border parts.
API Reference:
http://api.highcharts.com/highcharts/yAxis.offset
http://api.highcharts.com/highcharts/xAxis.opposite
Example:
http://jsfiddle.net/20oh9c3d/
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.
Trying to Style up the Bullet Graph to be exactly as Marketing desires. The desired Graph looks like:
How do you add the labels at the top of the bars?
I've tried to set the labels property from the Kendo Documentation:
labels:
{
visible: true,
format: "{0}",
font: "14px Arial",
},
Here is my script that isn't working:
$barChart = $("#bar-chart").empty();
$barChart.kendoChart({
theme: global.app.chartsTheme,
renderAs: "svg",
legend: {
position: "bottom"
},
seriesDefaults: {
type: "column"
},
series: [
{
type: "verticalBullet",
currentField: "score",
targetField: "average",
target: {
color: "#444",
dashType: "dot",
line: {
width: 1,
}
},
labels:
{
visible: true,
format: "{0}",
font: "14px Arial",
},
data: [
{
score: 93.7,
average: 65.2,
}, {
score: 80.2,
average: 22.2,
}, {
score: 60.8,
average: 35.2,
}, {
score: 82.1,
average: 45.2,
}, {
score: 74.2,
average: 55.2,
}
]
}
],
categoryAxis: {
labels: { rotation: -45 },
categories: ["Sales & Contracting", "Implementation & Training", "Functionality & Upgrades", "Service & Support", "General"],
line: {
visible: false
},
color: "#444",
axisCrossingValue: [0, 0, 100, 100]
},
tooltip: {
visible: false
}
}).data("kendoChart");
Any help would be greatly appreciated.
Because this is not a supported feature, any attempt to do this is by it's nature a hack. I had a look at kendo demo and noticed that there is a tooltip element with class k-tooltip that contains the total for a bar on mouseover. You should take a look into that mouseover to display the totals.
What you're attempting to do is possible. I've created an example on our Try Kendo UI site here: http://trykendoui.telerik.com/#jbristowe/aDIf/7
To recap, bullet charts don't support that type of label you need, and bar charts don't support the visual you need (the special line on the chart).
You could switch back to bar charts and write a custom visual. However, an easier way is to use a plotband on the value axis: https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/valueaxis.plotbands
<div id="chart"></div>
<script>
$("#chart").kendoChart({
valueAxis: {
plotBands: [
{ from: 1, to: 2, color: "red" }
]
},
series: [
{ data: [1, 2, 3] }
]
});
</script>
If you make a very narrow band, it will work pretty. It won't be dotted as in your reference image, and it will be behind the bar, which might be a problem... To go deeper, you would need a custom visual, and it's going to be involved: https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/series.visual