I am using js.cytoscape, and need to generate a graph from left to right.
when I use the layouts, it generate the chart from top to the bottom
code.js file is as follows
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
boxSelectionEnabled: false,
autounselectify: true,
layout: {
name: 'dagre'
},
style: [
{
selector: 'node',
style: {
'content': 'data(id)',
'text-opacity': 0.5,
'text-valign': 'center',
'text-halign': 'right',
'background-color': '#11479e'
}
},
{
selector: 'edge',
style: {
'curve-style': 'bezier',
'width': 4,
'target-arrow-shape': 'triangle',
'line-color': '#9dbaea',
'target-arrow-color': '#9dbaea'
}
}
],
elements: {
nodes: [
{ data: { id: 'n0' } , position: { x: 0, y: 0 } },
{ data: { id: 'n1' } , position: { x: 100, y: 0 } },
{ data: { id: 'n2' } , position: { x: 200, y: 0 } }
],
edges: [
{ data: { source: 'n0', target: 'n1' } },
{ data: { source: 'n1', target: 'n2' } },
]
},
});
When you set the layout to 'preset' the chat is generated from left to right with the given positions. But it is not possible to position all the nodes when it supposed to generate chart dynamically using user given data.
Please suggest a solution.
Thank you
As of cytoscape.js-dagre documentation, there's a layout option that can change the direction of your graph. Simply add to layout:
layout: {
name: 'dagre'
rankDir: 'LR', // 'TB' for top to bottom flow, 'LR' for left to right. default is undefined, making it plot top-bottom
},
Related
I'm traying to contain the objects inside of cytoscape canvas without moving outside of max width and height, but if i drag the objects inside of canvas , they go outside of canvas border:
Actually i'm not using the canvas from HTML5, instead im using the canvas from cytoscape.js plugin so this makes more complicated to fix it.
I already saw cystoscape documentation to see if there are any kind of option to make the borders fixed and make the content inside resposive,but didnt found anything.
I would like to kow if there any way to trick this.
my code test:
cystoscape box test
``
$(document).ready(function () {
// document.addEventListener('DOMContentLoaded', function() {
$('#cyto').attr("title", "try clicking and dragging around the canvas and nodes");
tippy('#cyto')
cy = cytoscape({
container: document.getElementById('cyto'),
style: cytoscape.stylesheet()
// style for the nodes
.selector('node')
.css({
'width': 70,
'height': 70,
'content': 'data(id)',
'text-align': 'center',
'color': '#506874',
'background-color': '#20b2aa',
'font-family': 'Oswald',
'shape': 'roundrectangle',
'font-size': 20
})
// style for the connecting lines
.selector('edge')
.css({
'width': .9,
'height': 0.2,
'curve-style': 'bezier',
'target-arrow-shape': 'triangle',
'target-arrow-color': '#F3A712',
'line-color': '#F3A712',
// 'line-color': '#C40E0E',
})
.selector(':selected')
.css({
'background-color': '#428bca',
'line-color': '#C40E0E',
'target-arrow-color': '#C40E0E',
'source-arrow-color': '#C40E0E'
})
.selector('.faded')
.css({
'opacity': 1,
'text-opacity': 0
}),
elements: [
{
group: 'nodes',
data: {
id: 'WORDS'
}
}, {
group: 'nodes',
data: {
id: 'REALITY'
}
},
{
group: 'nodes',
data: {
id: 'THE WORLD'
}
},
{
group: 'nodes',
data: {
id: 'PEOPLE'
}
},
{
group: 'nodes',
data: {
id: 'ME'
}
},
{
group: 'edges',
data: {
id: 'edge1',
source: 'PEOPLE',
target: 'WORDS'
}
},
{
group: 'edges',
data: {
id: 'edge2',
source: 'PEOPLE',
target: 'REALITY'
}
},
{
group: 'edges',
data: {
id: 'edge3',
source: 'ME',
target: 'WORDS'
}
},
{
group: 'edges',
data: {
id: 'edge4',
source: 'WORDS',
target: 'THE WORLD'
}
},
{
group: 'edges',
data: {
id: 'edge',
source: 'THE WORLD',
target: 'ME'
}
},
{
group: 'edges',
data: {
id: 'edge6',
source: 'PEOPLE',
target: 'THE WORLD'
}
},
{
group: 'edges',
data: {
id: 'edge7',
source: 'ME',
target: 'THE WORLD'
}
},
{
group: 'edges',
data: {
id: 'edge9',
source: 'WORDS',
target: 'REALITY'
}
},
{
group: 'edges',
data: {
id: 'edge5',
source: 'REALITY',
target: 'ME'
}
}
],
}); // end cytoscape
}, false);
``
Just like with any canvas object, you need to "listen" to the drag event and take action based on the position.
The code below is a push in the right direction, I'm just showing the position of the element as it is dragged, next you need to set your area boundaries and prevent the element from moving outside
tippy("#cyto");
cy = cytoscape({
container: document.getElementById("cyto"),
style: cytoscape
.stylesheet()
.selector("node")
.css({content: "data(id)"}),
elements: [
{data: { id: "WORDS" }},
{data: { id: "REALITY" }}
]
});
cy.on('drag', 'node', function (evt) {
var node = evt.target;
var point = node.point();
console.log(node.id() + " " + point.x + " " + point.y);
if (point.y < 10)
node.style({ 'background-color': 'red' });
else
node.style({ 'background-color': 'blue' });
});
.container {
display: grid;
border: 2px blue solid;
height: 160px;
width: 400px;
}
#cyto {
grid-row: 2/ span 1;
grid-column: 1/ span 6;
}
<script src="https://unpkg.com/tippy.js#2.0.8/dist/tippy.all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.14.1/cytoscape.min.js"></script>
<div class="container">
<div id="cyto">
</div>
</div>
You could use the https://github.com/cytoscape/cytoscape.js-automove but I strongly recommend you to understand this clearly before you start using extensions
I am using echarts. I want to assign my own color palette for the generated pie chart. I write the following code;
var myChart = echarts.init(document.getElementById('EAR-charts'));
var colorPalette = ['#00b04f', '#ffbf00', 'ff0000']
optionEAR = {
title: {
text: 'Element at Risk',
subtext: 'Pie chart',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['Agriculture', 'Builtup', 'Roads']
},
series: [
{
name: 'Element at Risk',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: [
{ value: 335, name: 'Agriculture' },
{ value: 310, name: 'Builtup' },
{ value: 234, name: 'Roads' }
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
],
graph: {
color: colorPalette
}
};
myChart.setOption(optionEAR);
But the color is not changing. But the output shows the default color of pie chart. How can I change the color of the pie charts to my unique color palette?
adding it this way changes the colors.
series: [
...
color: colorPalette,
...
]
pen
adding it two way changes the colors.
the first is :
series: [
...
color: colorPalette,
...
]
the second is:
series: [
...
],
color: colorPalette,
...
Key Words: vue echarts graph drag
I want to make a graph chart with draggable nodes.
I use graphic to create circles with the dragging function on nodes.
there are two bugs:
When I move one node, the other nodes will move too.
Although I update the option immediately when the data change, but the chart always change a few seconds later.
You can init a vue-project with vue-cli3 and npm install echarts.
Then you can copy the codes to instead of the App.vue.
<template>
<div id="app">
<div id="charts" ref="chart" style="height:70vh;"></div>
</div>
</template>
<script>
import echarts from 'echarts'
export default {
data () {
return {
myChart: null,
option: {},
graph: {
nodes: [
{
name: 'Node1',
x: 300,
y: 300
},
{
name: 'Node2',
x: 800,
y: 300
},
{
name: 'Node3',
x: 550,
y: 100
},
{
name: 'Node4',
x: 550,
y: 500
}
],
links: [
{
source: 0,
target: 1,
symbolSize: [5, 20],
label: {
normal: {
show: true
}
},
lineStyle: {
normal: {
width: 5,
curveness: 0.2
}
}
},
{
source: 'Node2',
target: 'Node1',
label: {
normal: {
show: true
}
},
lineStyle: {
normal: { curveness: 0.2 }
}
},
{
source: 'Node1',
target: 'Node3'
},
{
source: 'Node2',
target: 'Node3'
},
{
source: 'Node2',
target: 'Node4'
},
{
source: 'Node1',
target: 'Node4'
}
]
}
}
},
mounted () {
this.initChart()
this.renderChart()
},
methods: {
initChart () {
this.myChart = echarts.init(document.getElementById('charts'));
},
renderChart() {
this.myChart.showLoading();
this.formatOption();
this.initDrag();
},
formatOption () {
this.option = {
title: {
text: 'Graph 简单示例'
},
tooltip: {},
animationDurationUpdate: 1500,
animationEasingUpdate: 'quinticInOut',
series : [
{
type: 'graph',
layout: 'none',
symbolSize: 50,
roam: 'scale',
label: {
normal: {
show: true
}
},
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [4, 10],
edgeLabel: {
normal: {
textStyle: {
fontSize: 20
}
}
},
nodes: this.graph.nodes,
links: this.graph.links,
lineStyle: {
normal: {
opacity: 0.9,
width: 2,
curveness: 0
}
}
}
]
};
this.myChart.hideLoading();
this.myChart.setOption(this.option, true);
},
initDrag () {
this.option.graphic = echarts.util.map(this.graph.nodes, (item, dataIndex) => {
return {
type: 'circle',
position: this.myChart.convertToPixel({seriesIndex: 0}, [item.x, item.y]),
shape: {
r: 10
},
// invisible: true,
style: {
fill: 'blue'
},
draggable: true,
ondrag: echarts.util.curry(this.onPointDragging, dataIndex),
z: 100
}
});
this.myChart.setOption(this.option);
window.addEventListener('resize', this.updatePosition);
},
updatePosition () {
this.myChart.setOption({
graphic: echarts.util.map(this.graph.nodes, (item, dataIndex) => {
return {
position: this.myChart.convertToPixel({seriesIndex: 0}, [item.x, item.y])
};
})
});
},
onPointDragging (dataIndex, event) {
let pos = this.myChart.convertFromPixel({seriesIndex: 0}, [event.offsetX, event.offsetY]) // 将graphic的像素坐标转化为坐标系坐标
this.graph.nodes[dataIndex].x = pos[0] // 将新的坐标系坐标赋值给node
this.graph.nodes[dataIndex].y = pos[1]
this.myChart.setOption({
series: {
nodes: this.graph.nodes
}
})
this.updatePosition()
}
}
}
</script>
<style scoped>
#charts {
flex: 1;
border: 1px solid;
box-shadow: 0 0 20px rgba(18,208,253,.5);
}
</style>
I have a chart retrieving data from my store, the four bits of information are the following
Model Code
Ext.define('QvidiApp.model.ClipsViews', {
extend: 'Ext.data.Model',
requires: [
'Ext.data.Field'
],
config: {
fields: [
{
name: 'meta_id'
},
{
name: 'title'
},
{
name: 'viewed'
},
{
name: 'glances'
}
]
}
});
Now I have the viewed field and the glances field as the numeric fields in the chart, and the title field as the category title in the chart.
I want to render the title name of the field when I hover over it, reason id this. The titles are too long to fit in the x-axis of the chart so in place of the titles I am putting 'meta_id'. So when I hover over the x-axis meta_id field I want the title name to be shown
so for example
meta_id 100 will equal title value ###
Here's is my chart code so far
{
xtype: 'chart',
centered: true,
height: '150%',
colors: [
'#24ad9a',
'#7c7474',
'#a66111'
],
store: 'ClipsViewed',
axes: [
{
type: 'category',
fields: [
'meta_id'
],
grid: true,
label: {
rotate: {
degrees: 0
},
font: '7px'
},
title: 'Clips'
},
{
type: 'numeric',
fields: [
'viewed'
],
grid: true,
position: 'left',
title: 'Amount'
}
],
series: [
{
type: 'bar',
renderer: function(sprite, config, rendererData, index) {
},
style: {
minGapWidth: 1,
minBarWidth: 60,
maxBarWidth: 70,
opacity: 0.80
},
xField: 'meta_id',
yField: [
'viewed',
'glances'
]
}
],
interactions: [
{
type: 'panzoom'
}
],
legend: {
xtype: 'legend'
}
}
As you can see in the above code I have a render function but I dont know what to put into it
Use tips for series
series: [
{
type: 'bar',
tips: {
trackMouse: true,
width: 74,
height: 38,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('meta_id') + '<br />' + storeItem.get('title'));
}
},
style: {
minGapWidth: 1,
minBarWidth: 60,
maxBarWidth: 70,
opacity: 0.80
},
xField: 'meta_id',
yField: [
'viewed',
'glances'
]
}
]
I'm trying to make this http://gcuculi.com/cda/imagens/grafico.png with Cytoscape.js. I'm using the circle layout, but it isn't working. I will add more items dynamically. The first node always be closer than the second and so on for the others.
Here is the code:
$(function(){
var cy = cytoscape({
container: document.getElementById('grafico-constelacao'),
style: cytoscape.stylesheet()
.selector('node')
.css({
'content': 'data(name)',
'text-valign' : 'center',
'color' : 'white',
})
.selector('edge')
.css({
'width': 2,
'line-color': '#000'
})
.selector('#p')
.css({
'background-color': '#fff',
'width': '60px',
'height': '60px',
'border-width': '2px',
'border-style': 'solid',
'border-color ': '#888',
}),
elements: {
nodes: [
{
data: {id: 'p', weight: 1 },
group: 'nodes',
position: {
x: 500,
y: 150
},
classes: 'principal',
selected: false,
selectable: false,
locked: true,
grabbable: false
},
{ data: { id: 'atr1', name : 'A'} },
{ data: { id: 'atr2', name : 'B' } },
{ data: { id: 'atr3', name : 'C' } },
{ data: { id: 'atr4', name : 'D' } },
{ data: { id: 'atr5', name : 'E' } }
],
edges: [
{ data: { id: 'p-atr1', weight: 1, source: 'p', target: 'atr1' } },
{ data: { id: 'p-atr2', weight: 10, source: 'p', target: 'atr2' } },
{ data: { id: 'p-atr3', weight: 50, source: 'p', target: 'atr3' } },
{ data: { id: 'p-atr4', weight: 100, source: 'p', target: 'atr4' } },
{ data: { id: 'p-atr5', weight: 250, source: 'p', target: 'atr5' } }
]
},
layout: {
name: 'circle',
fit: true,
padding: 30,
boundingBox: undefined,
avoidOverlap: true,
radius: undefined,
startAngle: 10 * Math.PI,
counterclockwise: true,
sort: undefined,
animate: false,
animationDuration: 500,
ready: undefined,
stop: undefined
},
// interaction options:
zoomingEnabled: false,
userZoomingEnabled: false,
panningEnabled: false,
userPanningEnabled: false,
boxSelectionEnabled: false,
selectionType: 'single',
touchTapThreshold: 8,
desktopTapThreshold: 4,
autolock: false,
autoungrabify: false,
autounselectify: false,
});
});
There is a way to control the size of the edges forcing a value?
Run the circle layout on the outside nodes only, specifying your radius as desired and the bounding box centred around the centre node. Run whatever layout you like on the other nodes after init, so you have initial positions to base the secondary layouts on.
http://js.cytoscape.org/#collection/layout