I am using cytoscape.js version 3.7.0 to show a relation graph.The desired effect is when click one node, the other nodes and edges turn to unusable state.I do not find one attribute to achieve the goal.I am trying to another way: add click event to node, when the node is clicked, set all element "opacity":"0.2", "text-opacity":"0", then set the current node "opacity":"1", "text-opacity":"1", the opacity attribute is work, but the text-opacity is not, only scroll the mouse to zoom-in the graph, the label text on nodes and edges are invisible, scroll the mouse to zoom-out the graph the label text visible again.In my submission, when "text-opacity":"0" been setted, whether zoom or not, the label text should be invisible.
cytoscape.js version is 3.7.0.
I tried to added click event to node, when the node is clicked, set all element "opacity":"0.2", "text-opacity":"0", then set the current node "opacity":"1", "text-opacity":"1", only scroll the mouse to zoom-in the graph the "text-opacity":"0", it worked.
<!DOCTYPE html>
<html>
<head>
<title>Learning Cytoscape.js</title>
<style type="text/css">
/* cytoscape graph */
#cy {
height: 600px;
width: 1200px;
background-color: #00f9f9;
}
</style>
<script src="jquery-2.1.4.min.js"></script>
<script src="cytoscape.min.js"></script>
<script>
let highlightLineWidth = "3px";
let normalLineWidth = "1px";
$(function () {
let edgeMouseOverHandler = function (evt) {
evt.target.style('width', highlightLineWidth);
};
let edgeMouseOutHandler = function (evt) {
evt.target.style('width', normalLineWidth);
};
let nodeMouseOverHandler = function (evt) {
evt.target.connectedEdges().style('width', highlightLineWidth);
};
let nodeMouseOutHandler = function (evt) {
evt.target.connectedEdges().style('width', normalLineWidth);
};
let cy = cytoscape({
container: document.getElementById('cy'),
style: [
{
selector: 'node[label = "Person"]',
css: {
'background-color': '#6FB1FC', 'content': 'data(name)', "font-size": "5px",
"overlay-opacity": "0",
"text-valign": "center",
"text-halign": "center",
"width": "50px",
"height": "50px",
"shape": "circle"
}
},
{
selector: 'node[label = "Movie"]',
css: {
'background-color': '#F5A45D', 'content': 'data(title)', "font-size": "5px",
"text-valign": "center",
"text-halign": "center",
"width": "50px",
"height": "50px",
"shape": "circle",
"overlay-opacity": "0"
}
},
{
selector: 'edge',
css: {
'content': 'data(relationship)', 'target-arrow-shape': 'vee', "font-size": "5px",
'curve-style': 'bezier',
"line-style": "solid",
"width": normalLineWidth,
"overlay-opacity": "0",
}
}
],
elements: {
nodes: [
{data: {id: '172', name: 'Tom', label: 'Person'}, position: { x: 300, y: 300 }},
{data: {id: '173', name: 'Jack', label: 'Person'}, position: { x: 400, y: 230 }},
{data: {id: '174', name: 'Mike', label: 'Person'}, position: { x: 210, y: 350 }},
{data: {id: '175', name: 'Lucy', label: 'Person'}, position: { x: 80, y: 60 }},
{data: {id: '183', title: 'ABC', label: 'Movie'}, position: { x: 370, y: 390 }},
{data: {id: '184', title: 'EFG', label: 'Movie'}, position: { x: 200, y: 100 }},
{data: {id: '185', title: 'movie3', label: 'Movie'}, position: { x: 130, y: 165 }},
{data: {id: '186', title: 'movie4', label: 'Movie'}, position: { x: 278, y: 55 }},
{data: {id: '187', title: 'movie5', label: 'Movie'}, position: { x: 180, y: 30 }},
{data: {id: '188', title: 'movie6', label: 'Movie'}, position: { x: 90, y: 290 }},
{data: {id: '189', title: 'movie7', label: 'Movie'}, position: { x: 45, y: 150 }},
{data: {id: '190', title: 'movie8', label: 'Movie'}, position: { x: 250, y: 200 }},
{data: {id: '191', title: 'movie9', label: 'Movie'}, position: { x: 300, y: 400 }},
{data: {id: '192', title: 'movie10', label: 'Movie'}, position: { x: 500, y: 300 }},
{data: {id: '193', title: 'movie11', label: 'Movie'}, position: { x: 280, y: 120 }},
{data: {id: '194', title: 'movie112', label: 'Movie'}, position: { x: 80, y: 196 }},
],
edges: [{data: {source: '172', target: '183', relationship: 'like'}},
{data: {source: '172', target: '185', relationship: 'like'}},
{data: {source: '173', target: '187', relationship: 'like'}},
{data: {source: '174', target: '188', relationship: 'like'}},
{data: {source: '175', target: '184', relationship: 'like'}},
{data: {source: '172', target: '183', relationship: 'like'}},
{data: {source: '172', target: '192', relationship: 'like'}},
{data: {source: '172', target: '194', relationship: 'like'}},
{data: {source: '172', target: '190', relationship: 'like'}},
{data: {source: '172', target: '183', relationship: 'like'}},
]
},
layout: {
name: 'preset',
}
});
bindEventHandler();
console.log("--------------------------");
cy.on('click', function (event) {
if (event.target === cy) {
cy.elements()
.style("opacity", 1)
.style("events", "yes");
console.log('tap on background');
} else {
console.log('tap on some element');
}
});
cy.on('click', 'node', function (evt) {
console.log("======================");
console.log(evt.target.style());
let toHighlightElements = getToHighlightElements(evt);
// cy.startBatch();
cy.elements().style({"events":"no", "opacity":"0.2", "text-opacity":"0"});
console.log("+++++++++++++++++++++++");
console.log(evt.target.style());
toHighlightElements
.style("opacity", 1);
evt.target.connectedEdges().style("width", highlightLineWidth);
// cy.endBatch();
});
function getToHighlightElements(evt) {
let result = cy.collection();
let tapNode = evt.target;
result.merge(tapNode).merge(tapNode.neighborhood());
return result;
}
function getToIgnoreElements(eles) {
if (eles) {
return cy.elements().unmerge(eles);
} else {
return cy.elements();
}
}
function bindEventHandler() {
cy.on('mouseover', 'edge', edgeMouseOverHandler);
cy.on('mouseout', 'edge', edgeMouseOutHandler);
cy.on('mouseover', 'node', nodeMouseOverHandler);
cy.on('mouseout', 'node', nodeMouseOutHandler);
}
});
</script>
</head>
<body>
<div id="cy"></div>
</body>
</html>
Describe expected : when set "text-opacity":"0" the label text on element is invisible.
Actual results: after set the style, scroll the mouse to zoom-in the graph, text invisible, scroll the mouse to zoom-out the graph, the text visible again.
Related
Hi I want to create a rectangular bar chart in my react native app. Something like below image
I used react-native-chart-kit but its having only one color configuration. I was googling through other carts but did not find the right one to satisfy the referred image. Is there any example with any bar chart library which can be helpful to me
Excuse my code formatting, navigating my way in Stackoverflow.
This is a code example I have used before, change of padding and color is up too you.
/* App.js */
var React = require('react');
var Component = React.Component;
var CanvasJSReact = require('./canvasjs.react');
var CanvasJS = CanvasJSReact.CanvasJS;
var CanvasJSChart = CanvasJSReact.CanvasJSChart;
class App extends Component {
constructor() {
super();
this.toggleDataSeries = this.toggleDataSeries.bind(this);
}
toggleDataSeries(e){
if (typeof(e.dataSeries.visible) === "undefined" || e.dazaSeries.visible) {
e.dataSeries.visible = false;
}
else{
e.dataSeries.visible = true;
}
this.chart.render();
}
render() {
const options = {
animationEnabled: true,
title:{
text: "All Time Summer Olympic Medals"
},
legend: {
verticalAlign: "center",
horizontalAlign: "right",
reversed: true,
cursor: "pointer",
fontSize: 16,
itemclick: this.toggleDataSeries
},
toolTip: {
shared: true
},
data: [
{
type: "stackedColumn100",
name: "Gold",
showInLegend: true,
color: "#D4AF37",
dataPoints: [
{ label: "United States", y:1118},
{ label: "Soviet Union", y:473},
{ label: "Great Britain", y:273},
{ label: "France", y:243},
{ label: "Germany", y:269},
{ label: "Italy", y:243},
{ label: "Sweden", y:195},
{ label: "China", y:236},
{ label: "Russia", y:194},
{ label: "East Germany", y:192}
]
},
{
type: "stackedColumn100",
name: "Silver",
showInLegend: true,
color: "#C0C0C0",
dataPoints: [
{ label: "United States", y: 897},
{ label: "Soviet Union", y: 376},
{ label: "Great Britain", y: 299},
{ label: "France", y: 272},
{ label: "Germany", y: 272},
{ label: "Italy", y: 212},
{ label: "Sweden", y: 210},
{ label: "China", y: 189},
{ label: "Russia", y: 156},
{ label: "East Germany", y: 165}
]
},
{
type: "stackedColumn100",
name: "Bronze",
showInLegend: true,
color: "#CD7F32",
dataPoints: [
{ label: "United States", y: 789},
{ label: "Soviet Union", y: 355},
{ label: "Great Britain", y: 303},
{ label: "France", y: 310},
{ label: "Germany", y: 283},
{ label: "Italy", y: 236},
{ label: "Sweden", y: 233},
{ label: "China", y: 174},
{ label: "Russia", y: 187},
{ label: "East Germany", y: 162}
]
}
]
}
return (
<div>
<CanvasJSChart options = {options}
onRef={ref => this.chart = ref}
/>
{/*You can get reference to the chart instance as shown above using onRef. This allows you to access all chart properties and methods*/}
</div>
);
}
}
module.exports = App;
I want to draw a simple graph with Nodes and Links between Nodes. The thing is that I want the thickness of the Links to be set depending on a variable, so I cannot pre-determine a CSS class for that.
The code is from the example http://js.cytoscape.org/demos/dagre-layout/
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' } },
{ data: { id: 'n1' } },
{ data: { id: 'n2' } }
],
edges: [
{ data: { source: 'n0', target: 'n1' } },
{ data: { source: 'n1', target: 'n2' } },
]
},
});
How to add this kind of feature to the { data } ?
You can always reference the data of the edges like this:
// Initialize cytoscape
cy = window.cy = cytoscape({
container: $('.cy'),
boxSelectionEnabled: false,
autounselectify: true,
layout: {
name: 'yourLayout'
},
style: [
{
selector: 'node',
style: {
'shape': 'data(faveShape)',
'content': 'data(DisplayName)',
'height': 'data(faveHeight)',
'width': 'data(faveWidth)',
'background-color': 'data(faveColor)',
'line-color': '#a8eae5',
'font-family': 'Segoe UI,Helvetica Neue,Helvetica,Arial,Verdana',
'font-size': '15px',
}
},
{
selector: 'edge',
style: {
'curve-style': 'bezier',
'width': data(myWidth),
'target-arrow-shape': 'triangle',
'line-color': '#9dbaea',
'target-arrow-color': '#9dbaea'
}
}
],
});
When you defined the style of your nodes, you used data(id) as the nodes name, so when you want to define the style of your edges, you can always get the data of the edges for their style by using the same method data(whateverYouWantToGet).
When you define the edge, you can do it like this maybe:
var x = 0; // This is your variable, alter it like you want
var i = 0;
cy.add({
data: {
id: ('edge' + (i)),
source: n0, // first node for example
target: n1,
myWidth: x
},
position: {},
group: 'edges',
removed: false,
selected: false,
selectable: true,
locked: false,
grabbed: false,
grabbable: true,
classes: 'autorotate'
});
I have an app that worked great for 2.0p5. I was able to set the various columns in the chart specific colors. In the chart config, I added
colors: [
'#89A54E',
'#4572A7',
'#AA4643'
],
When I upgraded to 2.0rc1, the colors no longer seem to get set. My chart config is:
Ext.create('Rally.ui.chart.Chart', {
animate: true,
chartData: {
series: [{
type: 'column',
name: 'Data1',
data: data1
},
{
type: 'column',
name: 'Data2',
data: data2
},
{
type: 'column',
name: 'Data3',
data: data3
}],
categories: xAxisData
},
chartConfig: {
chart: {
type: 'column'
},
title: {
text: 'Show Data'
},
yAxis: {
min: 0,
title: {
text: 'yAxis Info'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: 'gray'
}
}
},
legend: {
align: 'right',
x: -100,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
this.series.name +': '+ this.y +'<br/>'+
'Total: '+ this.point.stackTotal;
}
},
colors: [
'#89A54E',
'#4572A7',
'#AA4643'
],
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: 'white'
}
}
}
}
});
Any ideas why I lost my color setting capabilities in 2.0rc1?
An example from one of my apps:
var series = [{
name : 'Col 1',
data : [],
showInLegend : false
},{
name : 'Col 2',
data : [],
showInLegend : false
},{
name : 'Col 3',
data : [],
showInLegend : false
}];
Ext.Array.each(records, function(record) {
//HighCharts Data
record.set('name', ...);
record.set('y', ...);
record.set('color', ...);
//Add record to series
series[index].data.push(record.data);
// Add to chartData
});
Hope this helps/works for you!
can anybody tell how to change color of bar in column chart .I have tried with style but its not working
style : {
fill : ['red', 'green'],
width : 30
},
Thanks
Use color renderer function for series onReady method like this on custom example;
Ext.onReady(function () {
var chart = Ext.create('Ext.chart.Chart', {
xtype: 'chart',
animate: true,
style: 'background:#fff',
shadow: false,
store: store1,
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['data1'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Number of Hits',
minimum: 0
}, {
type: 'Category',
position: 'left',
fields: ['name'],
title: 'Month of the Year'
}],
series: [{
type: 'bar',
axis: 'bottom',
label: {
display: 'insideEnd',
field: 'data1',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal',
color: '#333',
'text-anchor': 'middle',
contrast: true
},
xField: 'name',
yField: ['data1'],
//color renderer
renderer: function(sprite, record, attr, index, store) {
var fieldValue = Math.random() * 20 + 10;
var value = (record.get('data1') >> 0) % 5;
var color = ['rgb(213, 70, 121)',
'rgb(44, 153, 201)',
'rgb(146, 6, 157)',
'rgb(49, 149, 0)',
'rgb(249, 153, 0)'][value];
return Ext.apply(attr, {
fill: color
});
}
}]
});
var win = Ext.create('Ext.Window', {
width: 800,
height: 600,
minHeight: 400,
minWidth: 550,
hidden: false,
maximizable: true,
title: 'Bar Renderer',
renderTo: Ext.getBody(),
layout: 'fit',
tbar: [{
text: 'Save Chart',
handler: function() {
Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function(choice){
if(choice == 'yes'){
chart.save({
type: 'image/png'
});
}
});
}
}, {
text: 'Reload Data',
handler: function() {
store1.loadData(generateData());
}
}],
items: chart
});
});
Good Luck!
var colors = ['url(#v-1)',
'url(#v-2)',
'url(#v-3)',
'url(#v-4)',
'url(#v-5)'];
var baseColor = '#eee';
Ext.define('Ext.chart.theme.Fancy', {
extend: 'Ext.chart.theme.Base',
constructor: function(config) {
this.callParent([Ext.apply({
axis: {
fill: baseColor,
stroke: baseColor
},
axisLabelLeft: {
fill: baseColor
},
axisLabelBottom: {
fill: baseColor
},
axisTitleLeft: {
fill: baseColor
},
axisTitleBottom: {
fill: baseColor
},
colors: colors
}, config)]);
}
});
var win = Ext.create('Ext.Panel', {
width: 1000,
height: 300,
hidden: false,
maximizable: true,
title: 'Column Chart',
renderTo: Ext.getBody(),
enableToggle: true,
pressed: true,
layout: 'fit',
items: {
id: 'chartCmp',
xtype: 'chart',
theme: 'Fancy',
animate: {
easing: 'bounceOut',
duration: 750
},
store: store,
background: {
fill: 'rgb(17, 17, 17)'
},
gradients: [
{
'id': 'v-1',
'angle': 0,
stops: {
0: {
color: 'rgb(212, 40, 40)'
},
100: {
color: 'rgb(117, 14, 14)'
}
}
},
{
'id': 'v-2',
'angle': 0,
stops: {
0: {
color: 'rgb(180, 216, 42)'
},
100: {
color: 'rgb(94, 114, 13)'
}
}
},
{
'id': 'v-3',
'angle': 0,
stops: {
0: {
color: 'rgb(43, 221, 115)'
},
100: {
color: 'rgb(14, 117, 56)'
}
}
},
{
'id': 'v-4',
'angle': 0,
stops: {
0: {
color: 'rgb(45, 117, 226)'
},
100: {
color: 'rgb(14, 56, 117)'
}
}
},
{
'id': 'v-5',
'angle': 0,
stops: {
0: {
color: 'rgb(187, 45, 222)'
},
100: {
color: 'rgb(85, 10, 103)'
}
}
}],
axes: [{
type: 'Numeric',
position: 'left',
fields: ['Quantidade'],
minimum: 0,
// maximum: 100,
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Numero de Processos',
grid: {
odd: {
stroke: '#555'
},
even: {
stroke: '#555'
}
}
}, {
type: 'Category',
position: 'bottom',
fields: 'Range',
title: 'Espaço temporal'
}],
series: [{
type: 'column',
axis: 'left',
highlight: true,
highlightCfg: {
fill: '#a2b5ca'
},
label: {
display: 'insideEnd',
'text-anchor': 'middle',
//Numero que aparece em cima da barra
field: 'Quantidade',
orientation: 'horizontal',
fill: '#fff',
font: '17px Arial'
},
renderer: function(sprite, storeItem, barAttr, i, store) {
barAttr.fill = colors[i % colors.length];
return barAttr;
},
style: {
opacity: 0.95
},
listeners: {
'itemmousedown': function(item) {
if(!flag) return flag;
flag = false;
var cmp = Ext.getCmp('chartCmp');
var series = cmp.series.get(0);
index = Ext.Array.indexOf(series.items, item);
selectionModel = grid.getSelectionModel();
selectedStoreItem = item.storeItem;
var as = selectedStoreItem.data.Range;
storeDadosFiltrados.proxy.extraParams.range = as;
storeDadosFiltrados.load();
}
},
xField: 'Range',
yField: ['Quantidade']
}]
},
renderTo:'grafico'
});
});
image of the chart--> http://alojaimagens.com/viewer.php?file=zz7slhsprnopuoui1mpv.jpg
I am selecting the first column, and i don't click it, just with the mouse over it. The higlight color is a variante of blue. But in the code i use itemmousedown, and i don't understand why the bar changed color only by passing by the mouse? how can i put it only highlight only in mouse click?
What about highlight: false?
If you just want the bar to be highlighted by a click, you should add a listener which highlights it on clicking the bar.