I was just wondering if we can use something like
label: "ID(id)"
where nodes object would be like :
nodes: [
{
data: { label: "IP 1", type: "ip" },
label:['EC2'],
ID:{id:'1'}
}
]
I don't see any particular documentation that specifies the use of "data" key to render.
By trying above code,it just prints it as a string and not evaluating the given expression.
Any inputs are appreciated.
Thanks in advance!
From what I could try out, we cannot use anything other than the "data()" function inside any of the selector object's members(only for which accepts a function, some only accept strings)
So to manipulate any data, we would have to keep the wanted values under "data" and use any javascript function to return our desired output.
For example :
label: function (node) {
return `${node.data("labels")} ${node.data("id")}`
}
Here lables and id are your keys and we can use any function to do manipulate the output.
This is some input (live-code) that is requested. It demonstrates the use of
label: "ID(id)"
that does not produce expected result (no evaluation).
var data = {
"nodes": [{
data: {
label: "IP_1",
type: "ip"
},
label: ['EC2'],
ID: {
id: '1'
}
},
],
"edges": []
}
//console.log(data);//uncomment this to see file content
var cy = cytoscape({
elements: data,
container: document.getElementById("cy"),
style: [{
selector: "node",
style: {
shape: "hexagon",
"background-color": "red",
//label: "data(id)",
label: "ID(id)", /* No evaluation */
//label: function (node) {return `${node.data("label")} ${node.data("type")}`} /* Evaluation OK */
}
}],
layout: {
name: "grid"
}
});
#cy {
width: 400px;
height: 200px;
position: absolute;
top: 5px;
left: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/2.7.10/cytoscape.js"></script>
<body>
<div id="cy"></div>
</body>
Here is the LIVE code that uses the snippet code from the answer provided by #Poornima T.
It can be executed and the result is as expected.
var data = {
"nodes": [{
data: {
label: "IP_1",
type: "ip"
},
label: ['EC2'],
ID: {
id: '1'
}
},
],
"edges": []
}
//console.log(data);//uncomment this to see file content
var cy = cytoscape({
elements: data,
container: document.getElementById("cy"),
style: [{
selector: "node",
style: {
shape: "hexagon",
"background-color": "red",
//label: "data(id)",
//label: "ID(id)", /* No evaluation */
label: function (node) {return `${node.data("label")} ${node.data("type")}`} /* Evaluation OK */
}
}],
layout: {
name: "grid"
}
});
#cy {
width: 400px;
height: 200px;
position: absolute;
top: 5px;
left: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/2.7.10/cytoscape.js"></script>
<body>
<div id="cy"></div>
</body>
Related
Using cytoscape.js, I am setting the style of a node while defining it.
Shortened example below:
window.addEventListener('DOMContentLoaded', function(){
var cy = window.cy = cytoscape({
elements: {
nodes: [
{ data: { id: 'a', name: 'apple' }, style: { 'background-color': 'darkgreen' } },
]
}
});
});
(I have a default style for a node that is a different color)
This works fine, but when I run my code, the browser console shows the following warning:
Setting a `style` bypass at element creation is deprecated
What does it mean and what is the correct (non-deprecated) way to set it?
Thank you in advance!
The correct way of doing this would be to use the cytoscape stylesheet, as can be seen in every example in the docs:
var cy = (window.cy = cytoscape({
container: document.getElementById("cy"),
boxSelectionEnabled: false,
autounselectify: true,
style: [{
selector: "node",
css: {
"label": "data(id)",
"text-valign": "center",
"text-halign": "center",
"background-color": "data(color)"
}
},
{
selector: "edge",
css: {
"line-fill": "radial-gradient",
"line-gradient-stop-colors": "red green blue",
"line-gradient-stop-positions": "25 50 75"
}
}
],
elements: {
nodes: [{
data: {
id: "a",
color: "#2763c4"
}
},
{
data: {
id: "b",
color: "#37a32d"
}
},
{
data: {
id: "c",
color: "#37a32d"
}
}
],
edges: [{
data: {
source: "a",
target: "b"
}
},
{
data: {
source: "a",
target: "c"
}
}
]
},
layout: {
name: "dagre"
}
}));
cy.ready(function() {
cy.dblclick();
});
var nid = 0;
cy.bind('dblclick', function(evt) {
console.log('dblclick');
cy.add({
group: 'nodes',
data: {
id: nid,
faveColor: 'red'
},
position: {
x: evt.x,
y: evt.y
}
});
nid++;
});
cy.bind('click', 'node', function(evt) {
console.log('node clicked: ', evt.target.id());
});
body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 100%;
width: 100%;
float: right;
position: absolute;
}
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
<script src="https://unpkg.com/cytoscape#3.3.0/dist/cytoscape.min.js">
</script>
<!-- cyposcape dagre -->
<script src="https://unpkg.com/dagre#0.7.4/dist/dagre.js"></script>
<script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.5.0/cytoscape-dagre.js"></script>
<script src="https://unpkg.com/cytoscape-dblclick/dist/index.js"></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>
I have a cytoscape.js model, where edges between nodes represent different relations.
I want to have possibility to display something like round shape or button in the middle of the edge, where user could click and get popup to change the relationship type.
So far I see in base package there is no option to display round shape.
I am using dagre layout, and this is my current edge configuration:
{
selector: "edge",
style: {
width: 1,
"font-size": "20px",
//opacity: "0.5",
label: "data(type)",
color: function(ele) {
return getEdgeColor(ele.data("type"));
},
"line-color": function(ele) {
return getEdgeColor(ele.data("type"));
},
"target-arrow-color": function(ele) {
return getEdgeColor(ele.data("type"));
},
"curve-style": "straight",
"target-arrow-shape": "triangle"
}
},
Could you recommend me any easy solution?
I have a workaround for this (the editation works on the whole edge, the dot is just for the looks:
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
style: [{
selector: 'node',
css: {
'content': 'data(id)',
'text-valign': 'center',
'text-halign': 'center',
'height': '60px',
'width': '60px'
}
},
{
selector: 'edge',
css: {
'font-size': "40px",
'label': "\u2022",
'curve-style': 'bezier',
'target-arrow-shape': 'data(arrow)'
}
}
],
elements: {
nodes: [{
data: {
id: 'n0'
}
},
{
data: {
id: 'n1'
}
},
{
data: {
id: 'n2'
}
},
{
data: {
id: 'n3'
}
}
],
edges: [{
data: {
source: 'n0',
target: 'n1',
arrow: 'triangle'
}
},
{
data: {
source: 'n1',
target: 'n2',
arrow: 'triangle'
}
},
{
data: {
source: 'n1',
target: 'n3',
arrow: 'triangle'
}
},
]
},
layout: {
name: 'concentric',
minNodeSpacing: 140,
}
});
cy.cxtmenu({
selector: 'edge',
menuRadius: 90,
commands: [{
content: 'Direction',
select: function(edge) {
edge.move({
source: edge.target().id(),
target: edge.source().id()
});
}
}]
});
body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 100%;
width: 100%;
left: 0;
top: 0;
float: left;
position: absolute;
}
.cxtmenu-disabled {
opacity: 0.333;
}
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
<script src="https://cdn.jsdelivr.net/npm/cytoscape#3.10.1/dist/cytoscape.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cytoscape-cxtmenu#3.1.1/cytoscape-cxtmenu.min.js"></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>
I use the ctx-menu extension here (right click on edge to open menu) and the dot is just an unicode character.
I first create a graph with 100's of connected nodes. After all the nodes have been added I call
cy.layout({name: "dagre"});
Next, I'm creating 5 or so additional connected nodes I call layout on the nodes added but it doesn't lay them out as expected. Instead of being more like a tree all the nodes are in a straight line.
It looks like this:
var collection = cy.collection();
collection.merge(eles);
...
// I merge in another 5 newly created nodes.
// Next I call layout
collection.layout({
name: "dagre", fit: false,
boundingBox: {
x1: mousex - width / 2, y1: mousey - height / 2, x2: mousex + width, y2: mousey + height
},
nodeSep: 30
}).run();
But I expect it to look like the image below.
In order to get it to look like the above, I call layout shown below.
cy.layout({name: "dagre"});
I've looked through all the options for a dagre layout and can't find anything to make it create the tree.
Edit: The dagre layout needs nodes and edges to calculate the right positions for the nodes, the way you use it, dagre thinks you give it 5 seperate nodes, which explains your wrong layout. The mistake lies here:
collection.merge(eles); // here you should add all relevant nodes and edges
End
I have an example for you --->here<---, just copy that and add your real data:
var cy = (window.cy = cytoscape({
container: document.getElementById("cy"),
boxSelectionEnabled: false,
autounselectify: true,
style: [
{
selector: "node",
css: {
content: "data(id)",
"text-valign": "center",
"text-halign": "center",
height: "60px",
width: "100px",
shape: "rectangle",
"background-color": "data(faveColor)"
}
},
{
selector: "edge",
css: {
"curve-style": "bezier",
"control-point-step-size": 40,
"target-arrow-shape": "triangle"
}
}
],
elements: {
nodes: [
{ data: { id: "Top", faveColor: "#2763c4" } },
{ data: { id: "yes", faveColor: "#37a32d" } },
{ data: { id: "no", faveColor: "#2763c4" } },
{ data: { id: "Third", faveColor: "#2763c4" } },
{ data: { id: "Fourth", faveColor: "#56a9f7" } }
],
edges: [
{ data: { source: "Top", target: "yes" } },
{ data: { source: "Top", target: "no" } },
{ data: { source: "no", target: "Third" } },
{ data: { source: "Third", target: "Fourth" } },
{ data: { source: "Fourth", target: "Third" } }
]
},
layout: {
name: "random"
}
}));
cy.ready(function () {
setTimeout(function () {
cy.nodes().layout({ name: 'dagre' }).run(); // this is what you do!!
setTimeout(function () {
cy.elements().layout({ name: 'dagre' }).run(); // this is what you should do!!
},5000);
}, 5000);
});
body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 100%;
width: 100%;
left: 0;
top: 0;
float: left;
position: absolute;
}
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.2.17/cytoscape.min.js">
</script>
<!-- cyposcape dagre -->
<script src="https://unpkg.com/dagre#0.7.4/dist/dagre.js"></script>
<script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.5.0/cytoscape-dagre.js"></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>
I'm new in Vis.js and JavaScript but I'm willing to learn. I'm using nodes that change their color when they're hovered or selected. If I use shapes like 'dot' or 'square' it is ok, but I would like to get the same behaviour with icons like ionicons. The following code shows how I expected to get it work (using options settings). I'm planning to use selectNode and hoverNode events and updating the group (require creation of specific groups for selected or hovered nodes) but I think there is an easier way to accomplish it. Could you give me some advice? Here is my code:
// create an array with nodes
var nodes = new vis.DataSet([{
id: 1002,
label: 'Juan',
title: 'Juan Diaz Salizar',
group: 'group_1'
},
{
id: 1003,
label: 'Martin',
title: 'Sin datos',
group: 'group_2'
},
{
id: 1004,
label: 'Pedro',
title: 'Pedro Diaz Alcaraz',
group: 'group_2'
},
{
id: 1007,
label: 'Vanessa',
title: 'Juan Diaz Salizar',
group: 'group_1'
}
]);
// create an array with edges
var edges = new vis.DataSet([{
from: 1003,
to: 1002,
label: 'tc 1',
arrows: 'to'
},
{
from: 1004,
to: 1003,
label: 'tc 2',
arrows: 'to'
},
{
from: 1007,
to: 1003,
label: 'tc 2',
arrows: 'to'
},
{
from: 1007,
to: 1004,
label: 'tc',
arrows: 'to'
}
]);
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
interaction: {
hover: true
},
edges: {
font: {
size: 11,
color: 'rgb(46,117,182)'
},
color: {
color: 'rgb(189,215,238)',
hover: 'rgb(46,117,182)'
}
},
nodes: {
size: 10
},
groups: {
group_1: {
shape: 'dot',
color: {
background: 'rgb(189,215,238)',
border: 'rgb(46,117,182)',
hover: {
background: 'rgb(46,117,182)',
border: 'rgb(46,117,182)'
},
highlight: {
background: 'rgb(46,117,182)',
border: 'rgb(46,117,182)'
}
},
font: {
size: 11,
color: 'rgb(46,117,182)'
}
},
group_2: {
shape: 'icon',
icon: {
face: 'Ionicons',
code: '\uf2d2',
size: 20,
color: {
background: 'rgb(189,215,238)',
border: 'rgb(46,117,182)',
hover: {
background: 'rgb(46,117,182)',
border: 'rgb(46,117,182)'
},
highlight: {
background: 'rgb(46,117,182)',
border: 'rgb(46,117,182)'
}
}
},
font: {
size: 11,
color: 'rgb(46,117,182)'
}
}
}
};
var network = new vis.Network(container, data, options);
#mynetwork {
width: 85%;
height: 600px;
border: 1px solid lightgray;
}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<div id="mynetwork"></div>
Well, as you can see from docs, for image and circularImage shapes you can set image.unselected and image.selected options, although there's no image.hover or alike. There's also chosen option of nodes but according to docs, it can't contain anything that affects node images. So I think using events that you mentioned is a proper solution, somewhat straight-forward.
I Serialized my data in code behind as;
Dim classes As List(Of SerializedJsonDT) = SerializedJsonDT.GetJsonFriendlyClasses(dt)
jsonNTMS = JsonConvert.SerializeObject(classes)
Then I received this data from aspx page as;
<script type="text/javascript">
var obj = JSON.parse('<%=jsonNTMS%>');
var catName = obj[0].name;
var ser1Name = obj[1].name;
var ser2Name = obj[2].name;
var catData = obj[0].data;
var ser1Data = obj[1].data;
var ser2Data = obj[2].data;
var cSstopHere2 = 2;
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
height: 400,
width: 600,
spacingRight: 20,
type: 'spline',
backgroundColor: '#1a1818',
events: {
load: function () {
this.series[1].setData(eval(ser1Data), true, true);
this.series[0].setData(eval(ser2Data), true, true);
}
}
},
title: {
text: 'GÜNLÜK DÖVİZ STATİĞİ - USD',
style: {
color: '#ffffff',
font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
}
},
xAxis: {
categories: catData,
labels: {
style: {
color: '#ffffff',
fontSize: '10px'
}
},
tickInterval: 1,
gridLineWidth: 0.2,
lineColor: '#ffffff'
},
yAxis: {
title: {
text: '1 USD = ? TL',
style: {
color: '#ffffff',
font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
},
},
min: 2.1,
gridLineWidth: 0.2,
lineColor: '#ffffff'
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
style: {
color: '#ffffff'
}
},
lineWidth: 2
}
},
series: [{
name: "USD: " + ser1Name,
data: []
},{
name: "USD: " + ser2Name,
data: []
}],
});
chart.redraw
});
</script>
I can see my chart container but only the categories shown. I cant see my series in my highchart.
The web form I have;
<body>
<script src="http://code.highcharts.com/highcharts.js" type="text/javascript"></script>
<script src="http://code.highcharts.com/modules/exporting.js" type="text/javascript"></script>
<form id="form1" runat="server">
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</form>
</body>
Does anyone knows how to make my highcharts shows my series?
My categories was time values and I convert them to string before serialized. (08:17, 09:45 etc). And my series data originally was decimal values and I convert them to string before serialized. I did place ser1Data first and didn't work. So I try to use set data events. I guess I have to convert my series data in javascript to decimal. But I rather use this process in my custom "Public Class SerializedJsonDT" class. mason help me to build the class.
Kind Regards...