I want to align my cytoscape graph on the center of the canvass, can anyone help?
This is the result i get:
Heres my layout code:
var cy = window.cy = cytoscape({
// Contenedor
container: document.getElementById('graficaCytoscape'),
// Layout
layout: {
name: 'cose',
idealEdgeLength: 100,
nodeOverlap: 20,
refresh: 20,
padding: 30,
randomize: false,
componentSpacing: 100,
nodeRepulsion: 400000,
edgeElasticity: 100,
nestingFactor: 5,
gravity: 80,
numIter: 1000,
initialTemp: 200,
coolingFactor: 0.95,
minTemp: 1.0
},
// Styles
style: [{
"selector": "node",
"style": {
"width": "mapData(score, 0, 25, 30, 70)",
"height": "mapData(score, 0, 25, 30, 70)",
"content": "data(name)",
"font-size": "12px",
"background-color": "#c2c2c2",
"text-outline-color": "#555",
"text-outline-width": "2px",
"color": "#fff",
"overlay-padding": "6px",
"z-index": "10"
}
}, {
"selector": "edge",
"style": {
"curve-style": "haystack",
"haystack-radius": "0.5",
"opacity": "0.4",
"line-color": "#EC0000",
"width": "mapData(weight, 0, 1, 1, 8)",
"overlay-padding": "3px"
}
}],
// Data
elements: data
});
So what i need is that the graph goes to the center of its container.
I think its a easy question but i never worked before with cytoescape and im stucked in this.
Thanks.
You may try to use cy.center() when you in .js file while rendering your graph.
Cytoscape.js documentation: https://js.cytoscape.org/#cy.center
You can try to add cy.center() in script.js file to see the effect in this example: http://embed.plnkr.co/O7mWEfZuIhhtahdAhsAM/
Alternatively, from your code, you can also try to add cy.center() at the end of the cy variable declaration.
At last i could do it with:
pan: { x: 400, y: 100 },
Related
As you can see below not all the node style that i declare are working. I want to make the text inside the node larger and in the documentation i found the code: 'labelFontSize': 100. Than, i want to make the edge weight (that you cannot see in the picture but are present) white, and the code "labelFontColor": "white" isn't working. I am using CytoscapeJs.
Can someone explain to me why this happen?
My code is the following:
var json_obj = response.Cy_json_archi_prima_di_chiusura_atk_supp
var cy = cytoscape({
container: document.getElementById('cy_atk_supp'),
elements: JSON.parse(json_obj),
style: [
{
selector: 'node',
style: {
'shape': 'circle',
'labelFontSize': 100,
'label': 'data(label)',
'text-valign': 'center',
'text-halign': 'center',
'color': 'black',
"height": 150,
"width": 150,
'border-width': '2px',
'border-color': 'black',
'background-color': '#399AF9'
//'font-size': 20
}
},
{
selector: 'edge',
style:{
'label': 'data(weight)',
'labelFontSize': 300,
"labelFontColor": "white",
'labelFontWeight': 'bold',
'lineColor': 'data(color)',
'width': 3,
'target-arrow-color': 'data(color)',
"curve-style": "bezier",
'target-arrow-shape': 'triangle',
}
}
],
layout: {
name : 'circle'
}
});
And this is the resulting Graph:
I was checking the wrong library.
For cytoscapeJS these is the correct style option: https://js.cytoscape.org/#style/labels
I have a node js application that visualises a graph using Cytoscape JS. I wanted to use the new feature of taxi edge style in 3.5.2, but everytime I render the graph the page freezes and crashes after a while with version 3.5.2. Also the CPU usage spikes to ~100%. I use the Cytoscape instance as part of a class.
I have traced it back to the migration from Cytoscape JS 3.2.22 to 3.3.0. But that is all I could find. I examined the changelogs in the Cytoscape JS repo, but couldn't find anything that seemed relevant, except: https://github.com/cytoscape/cytoscape.js/issues/2311. This leads to #2295, the fix there didn't help either. So I guess that was not related either.
this.renderedGraph = Cytoscape({
container: $(`#${graphID}`),
style: Cytoscape.stylesheet()
.selector("node")
.css({
"content": "data(graphAbbrev)",
"text-wrap": "wrap",
"padding": "4px",
"width": "label",
"height": "label",
"text-valign": "center",
"text-halign": "center",
"shape": "roundrectangle",
"background-color": `mapData(weight, 0, ${
this.maxNodeWeight
}, #1cb5e0, #000046)`,
"color": "white"
})
.selector("edge")
.css({
"line-fill": "linear-gradient",
"text-margin-x": "20px",
"text-rotation": "autorotate",
"label": "data(weight)",
// "curve-style": "taxi",
// "taxi-direction": "downward",
// "taxi-turn": 20,
// "taxi-turn-min-distance": 5,
"target-arrow-shape": "triangle",
"target-arrow-color": `mapData(weight, 0, ${
this.maxEdgeWeight
}, #E6DADA, #274046)`,
"line-color": `mapData(weight, 0, ${
this.maxEdgeWeight
}, #E6DADA, #274046)`
}),
layout: {
name: "preset",
fit: true,
padding: 30
},
elements: {
nodes: this.nodes,
edges: this.edges
}
});
I would expect this to render the usual graph as it does in 3.2.22, but no luck with anything from 3.3.0 and above.
Using amcharts, I am plotting a chart with 3 kinds of data. But these two creates problem.
Job execution duration - The value actually should be in 'hh:mm'
format, for example 03:30 (can be read as 3 hours, 30 minutes)
Time of the day - The value should be in 'hh:mm' format, for example 08:30 (can be read as 8:30 am)
I tried, but i am not getting them working as expected(I want the axis values in above format). Here is my JSfiddle. Any suggestions/corrections would be highly appreciated!
code is under JS part : var chart = AmCharts.makeChart
Please find below code
return {
'type': 'serial',
'theme': 'light',
'marginTop': 0,
"autoMarginOffset": 20,
'marginRight': 80,
"mouseWheelZoomEnabled":true,
"legend": {
"align": "center",
"listeners": [ {
"event": "hideItem",
"method": this.legendHandler
}, {
"event": "showItem",
"method": this.legendHandler
} ]
},
'dataProvider': dataProvider,
'valueAxes': [{
"minimum": 0,
"axisColor":"#FFFFFF",
"titleColor":"#FFFFFF",
"color":"#FFFFFF",
"strictMinMax": true,
'axisAlpha': 0,
'position': 'left',
// "title":selectedParameter +" Level ("+type+")"
},
{
"logarithmic": true,
"dashLength": 1,
position: "left",
}
],
'graphs': graphlinelist,
'chartScrollbar': {
'graph': 'g1',
'gridAlpha': 0,
'color': '#888888',
'scrollbarHeight': 55,
'backgroundAlpha': 0,
'selectedBackgroundAlpha': 0.1,
'selectedBackgroundColor': '#888888',
'graphFillAlpha': 0,
'autoGridCount': true,
'selectedGraphFillAlpha': 0,
'graphLineAlpha': 0.2,
'graphLineColor': '#c2c2c2',
'selectedGraphLineColor': '#888888',
'selectedGraphLineAlpha': 1
},
'chartCursor': {
'categoryBalloonDateFormat': 'YYYY-MM-DD JJ:NN:SS',
'cursorAlpha': 0,
'valueLineEnabled': true,
'valueLineBalloonEnabled': true,
'valueLineAlpha': 0.5,
'fullWidth': true
},
'dataDateFormat': 'YYYY-MM-DD JJ:NN:SS',
'categoryField': 'Date',
'categoryAxis': {
'minPeriod': 'ss',
"labelColorField":"#FFFFFF",
'parseDates': true,
"axisColor":"#FFFFFF",
"titleColor":"#FFFFFF",
"color":"#FFFFFF",
'minorGridAlpha': 0.1,
"title": "Time(24 hours)",
'minorGridEnabled': true
},
'export': {
'enabled': true
}
};
}
You can either use 'dataDateFormat': 'YYYY-MM-DD JJ:NN:SS',
or
'dataDateFormat': 'NN:SS',
I'm using amCharts to display a map. I'm aiming to change the color of a specify country using Javascript.
I do use the following line to change the color inside my web browser :
document.getElementsByClassName("amcharts-map-area-FR")[0].setAttribute("fill", color);
But when I use it inside my html page, this does not work.
Here is the full html page :
<!DOCTYPE html>
<html>
<head>
<title>map created with amCharts | amCharts</title>
<meta name="description" content="map created using amCharts pixel map generator" />
<!--
This map was created using Pixel Map Generator by amCharts and is licensed under the Creative Commons Attribution 4.0 International License.
You may use this map the way you see fit as long as proper attribution to the name of amCharts is given in the form of link to http://pixelmap.amcharts.com/
To view a copy of this license, visit http://creativecommons.org/licenses/by/4.0/
If you would like to use this map without any attribution, you can acquire a commercial license for the JavaScript Maps - a tool that was used to produce this map.
To do so, visit amCharts Online Store: http://www.amcharts.com/online-store/
-->
<!-- amCharts javascript sources -->
<script type="text/javascript" src="http://www.amcharts.com/lib/3/ammap.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
<!-- amCharts javascript code -->
<script type="text/javascript">
AmCharts.makeChart("map",{
"type": "map",
"pathToImages": "http://www.amcharts.com/lib/3/images/",
"addClassNames": true,
"fontSize": 15,
"color": "#FFFFFF",
"backgroundAlpha": 1,
"backgroundColor": "rgba(80,80,80,1)",
"dataProvider": {
"map": "worldLow",
"getAreasFromMap": true,
"images": [
{
"top": 40,
"left": 60,
"width": 80,
"height": 40,
"pixelMapperLogo": true,
"imageURL": "http://pixelmap.amcharts.com/static/img/logo.svg",
"url": "http://www.amcharts.com"
}
]
},
"balloon": {
"horizontalPadding": 15,
"borderAlpha": 0,
"borderThickness": 1,
"verticalPadding": 15
},
"areasSettings": {
"color": "rgba(129,129,129,1)",
"outlineColor": "rgba(80,80,80,1)",
"rollOverOutlineColor": "rgba(80,80,80,1)",
"rollOverBrightness": 20,
"selectedBrightness": 20,
"selectable": true,
"unlistedAreasAlpha": 0,
"unlistedAreasOutlineAlpha": 0
},
"imagesSettings": {
"alpha": 1,
"color": "rgba(129,129,129,1)",
"outlineAlpha": 0,
"rollOverOutlineAlpha": 0,
"outlineColor": "rgba(80,80,80,1)",
"rollOverBrightness": 20,
"selectedBrightness": 20,
"selectable": true
},
"linesSettings": {
"color": "rgba(129,129,129,1)",
"selectable": true,
"rollOverBrightness": 20,
"selectedBrightness": 20
},
"zoomControl": {
"zoomControlEnabled": true,
"homeButtonEnabled": false,
"panControlEnabled": false,
"right": 38,
"bottom": 30,
"minZoomLevel": 0.25,
"gridHeight": 100,
"gridAlpha": 0.1,
"gridBackgroundAlpha": 0,
"gridColor": "#FFFFFF",
"draggerAlpha": 1,
"buttonCornerRadius": 2
}
});
</script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$( document ).ready(function() {
console.log( "document loaded" );
color = "#000000";
document.getElementsByClassName("amcharts-map-area-FR")[0].setAttribute("fill", color);
}
);
$( window ).load(function() {
console.log( "window loaded" );
});
</script>
</head>
<body style="margin: 0;background-color: rgba(80,80,80,1);">
<div id="map" style="width: 100%; height: 767px;"></div>
</body>
</html>
Hope this problem can be solved !
Thanks !
Your code to manipulate fill color of the area is correct. However, it executes immediately on page load. At that point the map is still initializing, meaning there's no such element yet, hence it not working.
There are a number of ways to go about it.
If you just need to load the map with certain areas (countries) colored, you could do that with map's config:
"dataProvider": {
"map": "worldLow",
"getAreasFromMap": true,
"areas": [ {
"id": "FR",
"color": "#00FF00"
} ],
"images": [ {
"top": 40,
"left": 60,
"width": 80,
"height": 40,
"pixelMapperLogo": true,
"imageURL": "http://pixelmap.amcharts.com/static/img/logo.svg",
"url": "http://www.amcharts.com"
} ]
}
If that is not acceptable, or if you need to manipulate the map after it's built, I suggest you use map's API functions (getObjectById() to get area object, then validate() to refresh it) to manipulate area colors, rather than CSS.
You would also need to ensure that map is initialized before doing so. We can use init event for that.
Consider the following code:
AmCharts.makeChart("map", {
"type": "map",
// ...
"listeners": [{
"event": "init",
"method": function(event) {
var area = event.chart.getObjectById("FR");
area.color = "#000000";
area.validate();
}
}]
});
Here's a working example.
You could use the same event to manipulate color of the area using your CSS code, however I strongly suggest using API functions. While manipulating CSS directly may work, the changes might be reset when there's something going on on the map, such as when you hover the area.
I am using the excellent Fabric.js to draw some text in a canvas. When I specify a custom size ( let's say a 200x200 rectangle) to my IText Object, it seems that Farbric.js force the width and the height of the object to fit around the text.
var t = new fabric.IText("Hello world !", {
top: 100,
left: 100,
width: 200,
height:200,
backgroundColor: '#FFFFFF',
fill: '#000000',
fontSize: 12,
lockScalingX: true,
lockScalingY: true,
hasRotatingPoint: false,
transparentCorners: false,
cornerSize: 7
});
Here is a Fiddle with my problem : http://jsfiddle.net/K52jG/4/
In this example, I want the "Hello World!" text to be in a 200x200 box. Is it possible to do that, and how ?
OK, so because it is not possible, the best way I found to is to nest the IText box in a Rectangle object, using a Group
var r = new fabric.Rect({
width: 200,
height: 200,
fill: '#FFFFFF',
});
// create a rectangle object
var t = new fabric.IText("Hello world !", {
backgroundColor: '#FFFFFF',
fill: '#000000',
fontSize: 12,
top : 3,
});
var group = new fabric.Group([ r, t ], {
left: 100,
top: 100,
lockScalingX: true,
lockScalingY: true,
hasRotatingPoint: false,
transparentCorners: false,
cornerSize: 7
});
Example in this Fiddle : http://jsfiddle.net/4HE3U/1/
Note : I have to set a "top" value to the text because it goes out of the box. The value seem to be : fontSize / 4