I'm using VIS to build a graph, but there is a problem. If I create simple hierarchical graph: with 3 vertices and 3 edges one edge is not visible (It is hiding behind two others and vertex).
Using smoothCurves with diagonalCross type is part of solution - graph looks fine, but after moving vertices. Directly after page is loaded edge is not visible. Is it possible to fix it?
Heres my code:
<!doctype html>
<html>
<head>
<title>Network | Basic usage</title>
<script type="text/javascript" src="vis.js"></script>
<link rel="stylesheet" type="text/css" href="vis.css">
</head>
<body>
<div id="mynetwork"></div>
<script type="text/javascript">
// create an array with nodes
var nodes = [
{id: 1, label: 'Node 1', level:0},
{id: 2, label: 'Node 2', level:1},
{id: 4, label: 'Node 4', level:2}
];
// create an array with edges
var edges = [
{from: 1, to: 2},
{from: 1, to: 4},
{from: 2, to: 4}
];
// create a network
var container = document.getElementById('mynetwork');
var data= {
nodes: nodes,
edges: edges,
};
var options = {
width: '900px',
height: '900px',
edges:
{
style: 'arrow'
},
dragNetwork: true,
navigation: true,
keyboard: true,
<!-- dragNodes: false, -->
hierarchicalLayout: {enabled:true}
};
var network = new vis.Network(container, data, options);
var type = "diagonalCross";
network.setOptions({smoothCurves:{type:type}});
</script>
</body>
</html>
It is important to use hierarchical view for me.
I think the HTML styled comment inside javascript prevents browser to understand your code. Simply remove the comment and refresh your browser. Like this:
var options = {
width: '900px',
height: '900px',
edges: {
style: 'arrow'
},
dragNetwork: true,
navigation: true,
keyboard: true,
// <!-- dragNodes: false, -->
hierarchicalLayout: {enabled:true}
};
Related
Is it possible to update the text inside the treemap plot using restyle function?
I know it's possible via 'react' function, but this function will redraw the entire diagram (I don't want this to happen).
This what I have so far: https://codepen.io/elv1s42/pen/yLydprX
var labels = ["P1", "P2", "P3", "P4"];
var parents = ["", "P1", "P1", "P2"];
var data = [{
type: "treemap",
labels: labels,
parents: parents,
marker: { colors: ['green', 'blue', 'red', 'yellow']},
text: ['text1', 'text2', 'text3<br>text3', 'text4'],
textinfo: "label text"
}];
var layout = {};
Plotly.newPlot('myDiv', data, layout)
function changeText(){
var upd = {
marker: {colors: ['white', 'orange', 'green', 'red']},
//text: ['t1', 't2', 't3', 't4'] // how to update the text?
};
Plotly.restyle('myDiv', upd);
}
<head>
<!-- Load plotly.js into the DOM -->
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>
<body>
<button onclick='changeText()'>Change my plot!</button>
<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>
I don't like answering my own questions, but the issue was resolved by https://github.com/etpinard from GitHub here: https://github.com/plotly/plotly.js/issues/4535
So the working solution is to use nested arrays for the text field:
function changeText(){
var upd = {
marker: {colors: ['white', 'orange', 'green', 'red']},
text: [['t1', 't2', 't3', 't4']] // how to update the text?
};
Plotly.restyle('myDiv', upd);
}
The CodePen example from the question is fixed now.
I am trying vis.js and have been using the example which can be found here:
http://visjs.org/docs/network/
I used exact the same html-setup which is like this:
<html>
<head>
<script type="text/javascript" src="../../dist/vis.js"></script>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#mynetwork {
width: 600px;
height: 400px;
border: 1px solid lightgray;
}
</style>
</head>
<body>
<div id="mynetwork"></div>
<script type="text/javascript">
// create an array with nodes
var nodes = new vis.DataSet([
{id: 1, label: 'Node 1'},
{id: 2, label: 'Node 2'},
{id: 3, label: 'Node 3'},
{id: 4, label: 'Node 4'},
{id: 5, label: 'Node 5'}
]);
// create an array with edges
var edges = new vis.DataSet([
{from: 1, to: 3},
{from: 1, to: 2},
{from: 2, to: 4},
{from: 2, to: 5}
]);
// create a network
var container = document.getElementById('mynetwork');
// provide the data in the vis format
var data = {
nodes: nodes,
edges: edges
};
var options = {};
// initialize your network!
var network = new vis.Network(container, data, options);
</script>
</body>
</html>
Javascript and Css are present.
When testing the file in Firefox or Chrome no Graphics nothing is happening. What is wrong here?
Changing
<script type="text/javascript" src="../../dist/vis.js"></script>
to
<script type="text/javascript" src="../../dist/vis.min.js"></script>
solved the problem.
I need to create pretty simple horizontal bar chart in my react application, but really can't get it done.
Things I've tried so far (vertical bars are working good though):
1) http://fraserxu.me/react-chartist/, chartist itself has horizontal bars, but I didn't find a way to make it work with react module
2) https://github.com/reactjs/react-chartjs doesn't support horizontal bars, though there is some PR for it, but also not sure how to make it work
3) https://github.com/laem/react-horizontal-bar-chart isn't supported anymore
I need to have something like this, so that not all bars start from the axes
So does somebody know any existing component for such things?
I'm also looking for opportunity to add some animation on load there.
Or any other ways out.
Thanks
full disclosure I'm a member of the ZingChart team.
ZingChart supports horizontal bar charts with offsetValues. I have put together a react example for you. The following standard vanillaJS version is below as well.
react demo on codepen
var myConfig = {
type: 'hbar',
plot: {
stacked: true,
animation: {
sequence: 3,
effect: 4,
method: 1,
speed: 500
}
},
legend: {
borderWidth: 0
},
plotarea: {
margin: 'dynamic'
},
scaleX: {
labels: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu']
},
scaleY: {
minValue: 0,
maxValue: 16,
step: 4.5,
decimals: 1
},
series: [
{
values: [5.0,3.0,5.5,2.0,2.5],
offsetValues: [1.0,3.0,0,2.0,2.5],
backgroundColor: '#FF6600',
valueBox: {
placement: 'bottom',
rules: [
{
rule: '%i == 2',
visible: false
}
]
},
text: 'Jim'
},
{
values: [5.0,8.0,9.0,4.0,3.5],
offsetValues: [1.0,3.0,0,2.0,2.5],
backgroundColor: '#DC143C',
valueBox: {},
text: 'Joe'
}
]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: '100%',
width: '100%'
});
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
#myChart {
height:100%;
width:100%;
min-height:150px;
}
<!DOCTYPE html>
<html>
<head>
<!--Assets will be injected here on compile. Use the assets button above-->
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
<script> zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
</script>
<!--Inject End-->
</head>
<body>
<div id="myChart"></div>
</body>
</html>
I just discovered Chart.js and it looks amazing! So I tried to follow an example and it didn't work, saying that new Chart(ctx, options).Pie(data); was invalid (that (intermerdiate value).Pie(...) was not a function). Then I found that the syntax changed in Version 2 so I changed it to what you find below. I no longer get any errors but nothing is shown in my canvas.
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/moment-2.10.6.min.js"></script>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/test/Chart.js"></script>
<script src="js/test/chart-test.js"></script>
</head>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
</body>
</html>
And the script:
$(document).ready(function () {
var data = [
{
value: 5,
color: "#44A9FF",
highlight: "#FF5A5E",
label: "N/A"
},
{
value: 79,
color: "#009900",
highlight: "#5AD3D1",
label: "On Track"
},
{
value: 31,
color: "#66FF33",
highlight: "#FFC870",
label: "Done"
},
{
value: 4,
color: "#F3F300",
highlight: "#FFC870",
label: "Issues"
},
{
value: 7,
color: "#FF0000",
highlight: "#FFC870",
label: "Behind"
},
{
value: 9,
color: "#979797",
highlight: "#FFC870",
label: "Abandoned"
}
];
var options = {
//Boolean - Whether we should show a stroke on each segment
segmentShowStroke: true,
//String - The colour of each segment stroke
segmentStrokeColor: "#fff",
//Number - The width of each segment stroke
segmentStrokeWidth: 2,
//Number - The percentage of the chart that we cut out of the middle
percentageInnerCutout: 50, // This is 0 for Pie charts
//Number - Amount of animation steps
animationSteps: 100,
//String - Animation easing effect
animationEasing: "easeOutBounce",
//Boolean - Whether we animate the rotation of the Doughnut
animateRotate: true,
//Boolean - Whether we animate scaling the Doughnut from the centre
animateScale: false,
//String - A legend template
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
};
var ctx = $('#myChart').get(0).getContext('2d');
var myPieChart = new Chart(ctx, {
type: "pie",
data: data,
options: options
});
});
Take a look at the fiddle - Pie chart with Chart.js
I made the following changes:-
var pieChartCanvas = $("#myChart").get(0).getContext("2d");
var pieChart = new Chart(pieChartCanvas);
pieChart.Pie(data, options);
From the example you gave it looks like the syntax has changed too.
It should be
var myPieChart = new Chart(ctx).Pie(data);
Not
var myPieChart = new Chart(ctx, {
type: "pie",
data: data,
options: options
});
Got that from the example found in the docs -> https://github.com/nnnick/Chart.js/blob/master/samples/pie.html
They also changed the data format in 2.0. If you checkout the sample here. You'll see the data is like this now:
data: {
datasets: [{
data: [
...
],
backgroundColor: [
...
]
}/* notice you can have more than one dataset, with pie they interlace when you have more than one */],
labels: [
...
]
}
Hope that helps.... also I needed to pull the v2.0-dev branch and build it myself to get past one bug that I found in the "released" version, so you may have better luck with that!
How do I set a node's position in vis.js?
I want to initially position at least one node manually.
I know that a node has the options x and y. I set both, and also tried variations of layout options (randomSeed, improvedLayout, hierarchical), the node was never placed where I set it.
Here's the simple network I defined:
nodes = new vis.DataSet([
{id: 1, shape: 'circularImage', image: DIR + '1_circle', label:"1", x: 200, y: 100},
{id: 2, shape: 'circularImage', image: DIR + '2_circle', label:"2"},
{id: 3, shape: 'circularImage', image: DIR + '3_circle', label:"3"},
]);
edges = [
{id: "01-03", from: 1, to: 3, length: 300, label: '1 - 3'},
{id: "02-03", from: 2, to: 3},
];
var container = document.getElementById('graphcontainer');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {
borderWidth: 4,
size: 30,
color: {
border: '#222222',
background: '#666666'
},
font:{
color:'#000000'
}
},
edges: {
color: 'lightgray'
},
//layout: {randomSeed:0}
//layout: {hierarchical: true}
layout: {
randomSeed: undefined,
improvedLayout:true,
hierarchical: {
enabled:false,
levelSeparation: 150,
direction: 'UD', // UD, DU, LR, RL
sortMethod: 'hubsize' // hubsize, directed
}
}
};
network = new vis.Network(container, data, options);
The node is placed, but not at the point I set (200,100), but at another position.
I haven't found an example for explicitly setting a node's position on the vis.js page. Could someone please provide one? Thanks!
You can indeed set a fixed position for a node by setting its x and y properties, and yes, this feature works and is not broken.
The x and y position of a node does not mean a position in pixels on the screen, but is a fixed position in the Networks coordinate system. When you move and zoom in the Network, the fixed items will move and zoom too, but they will always keep the same position relative to each other. It's like your home town has a fixed location (long, lat) on earth, but you can still zoom and move your town in Google Maps.
EDIT: To achieve what you want, you can fix zooming and moving, and adjust the viewport such that it matches the pixels of the HTML canvas, here is a demo:
// create an array with nodes
var nodes = new vis.DataSet([
{id: 1, label: 'x=200, y=200', x: 200, y: 200},
{id: 2, label: 'node 2', x: 0, y: 0},
{id: 3, label: 'node 3', x: 0, y: 400},
{id: 4, label: 'node 4', x: 400, y: 400},
{id: 5, label: 'node 5', x: 400, y: 0}
]);
// create an array with edges
var edges = new vis.DataSet([
{from: 1, to: 2, label: 'to x=0, y=0'},
{from: 1, to: 3, label: 'to x=0, y=400'},
{from: 1, to: 4, label: 'to x=400, y=400'},
{from: 1, to: 5, label: 'to x=400, y=0'}
]);
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var width = 400;
var height = 400;
var options = {
width: width + 'px',
height: height + 'px',
nodes: {
shape: 'dot'
},
edges: {
smooth: false
},
physics: false,
interaction: {
dragNodes: false,// do not allow dragging nodes
zoomView: false, // do not allow zooming
dragView: false // do not allow dragging
}
};
var network = new vis.Network(container, data, options);
// Set the coordinate system of Network such that it exactly
// matches the actual pixels of the HTML canvas on screen
// this must correspond with the width and height set for
// the networks container element.
network.moveTo({
position: {x: 0, y: 0},
offset: {x: -width/2, y: -height/2},
scale: 1,
})
#mynetwork {
border: 1px solid black;
background: white;
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.9.0/vis.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.9.0/vis.min.css" rel="stylesheet" type="text/css" />
<p>The following network has a fixed scale and position, such that the networks viewport exactly matches the pixels of the HTML canvas.</p>
<div id="mynetwork"></div>
Documentation says that nodes positioned by the layout algorithm
When using the hierarchical layout, either the x or y position is set
by the layout engine depending on the type of view
You can put they in to explicit points but I would not recommend this - it's not the correct way for the work with the graphs - better review your task - maybe you do not need graphs (or your do not need to put points in to exactly position).
Anyway - if you really want to put in to some position then you need to use random layout with the fixed option set to true or physic option set to false
var DIR = 'http://cupofting.com/wp-content/uploads/2013/10/';
nodes = new vis.DataSet([
{id: 1, shape: 'circularImage', image: DIR + '1-circle.jpg', label:"1", x:0, y:0},
{id: 2, shape: 'circularImage', image: DIR + '2-circle.jpg', label:"2", x:100, y:0},
{id: 3, shape: 'circularImage', image: DIR + '3-circle.jpg', label:"3", x:0, y:100},
]);
edges = [
{id: "01-03", from: 1, to: 3, length: 300, label: '1 - 3'},
{id: "02-03", from: 2, to: 3},
];
var container = document.getElementById('graphcontainer');
var data = {
nodes: nodes,
edges: edges
};
var options = {
physics:{
stabilization: true,
},
nodes: {
borderWidth: 4,
size: 10,
//fixed:true,
physics:false,
color: {
border: '#222222',
background: '#666666'
},
font:{
color:'#000000'
}
},
edges: {
color: 'lightgray'
},
layout: {randomSeed:0}
};
network = new vis.Network(container, data, options);
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.9.0/vis.min.js"></script>
<div id="graphcontainer" style="border: 1px solid red; width:300px; height:300px; "> </div>
:) I just did this for the first time this morning. X = 0 and Y = 0 for a graph start centered, not at the top left of the canvas. There is a fixed attribute of the node that you can set to true for both x and y on a node with its x and y values set and have other nodes use physics in relation to it.
Look at the full options tab on page
http://visjs.org/docs/network/nodes.html#
and you'll see this piece:
fixed: {
x:false,
y:false
},