When adding a scale marker to a ZingChart plot, by default the marker is drawn beneath the other plotted data, which isn't always so easy to see (e.g., a line marker beneath a series of bars).
var chartConfig = {
type: 'bar',
title: { text: 'Scale-Y Marker' },
scaleY: {
markers: [
{
type: 'line',
range: [40],
lineColor: '#DE7DA9',
label:{
text: 'Marker',
backgroundColor: 'white',
alpha: 0.7,
textAlpha: 1,
offsetX: 10,
offsetY: -1
}
}
]
},
series: [
{
values: [50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75],
backgroundColor: '#B7D977'
}
]
};
zingchart.render({
id : 'chartCanvas',
data : chartConfig,
height: 400,
width: '750'
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Scale-Y Marker</title>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id='chartCanvas'></div>
</body>
</html>
With no z-index-like attribute currently available for scale-y markers (v2.6.8), is there a way to draw Scale-Y Markers on top of the plotted data?
You can use the placement attribute and set it equal to 'top'.
var chartConfig = {
type: 'bar',
title: { text: 'Scale-Y Marker On Top' },
scaleY: {
markers: [
{
type: 'line',
range: [40],
lineColor: '#DE7DA9',
placement: 'top',
label:{
text: 'Marker',
backgroundColor: 'white',
alpha: 0.7,
textAlpha: 1,
offsetX: 10,
offsetY: -1
}
}
]
},
series: [
{
values: [50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75,50,55,60,65,70,75],
backgroundColor: '#B7D977'
}
]
};
zingchart.render({
id : 'chartCanvas',
data : chartConfig,
height: 400,
width: '750'
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Scale-Y Marker On Top</title>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id='chartCanvas'></div>
</body>
</html>
Related
I am using ArcGIS API for Javascript in a Nuxt application and I would like to find the max and min values of a field in a feature layer hosted on ArcGIS. How to do that ?? Here is the code. The values for the stops for the visualVariables are hard coded and I would like them to be dynamic and take the min and max values of the field.
buildRenderer(fieldName) {
this.renderer = {
type: 'simple', // autocasts as new SimpleRenderer()
symbol: {
type: 'simple-line', // autocasts as new SimpleFillSymbol()
width: '1px',
},
label: 'GIMM',
visualVariables: [
{
type: 'color',
valueExpression: `$feature.${fieldName}`,
legendOptions: {
title: '% KBA stuff',
},
stops: [
{
value: 10,
color: '#bef264',
label: 'minimum',
},
{
value: 600000,
color: '#881337',
label: 'maximum',
},
],
},
],
}
You can make an statistic query requesting min and max of the field you need.
Look at this example I put for you,
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>
Intro to FeatureLayer | Sample | ArcGIS API for JavaScript 4.23
</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.23/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/rest/support/Query"
], (
Map,
MapView,
FeatureLayer,
Query
) => {
const featureLayer = new FeatureLayer({
url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/subway_tcl_stations_center_wgs84/FeatureServer/0"
});
const minXCoord = {
onStatisticField: "XCoord",
outStatisticFieldName: "minXCoord",
statisticType: "min"
};
const maxXCoord = {
onStatisticField: "XCoord",
outStatisticFieldName: "maxXCoord",
statisticType: "max"
};
let query = featureLayer.createQuery();
query.outStatistics = [ minXCoord, maxXCoord ];
featureLayer.queryFeatures(query)
.then(function (response) {
const stats = response.features[0].attributes;
console.log(stats);
document.getElementById("response").innerText =
`X Coord (min, max): ${stats.minXCoord}, ${stats.maxXCoord}`;
});
});
</script>
</head>
<body>
<div id="response"></div>
</body>
</html>
I am creating a graph using cytoscape.js and I have compounded nodes which are inside the parent node. I would like to have the title of the main/parent node at the top of the node but inside the node. Is that possible in cytoscape?
I have tried using using halign and valign. Whenever I use top value, it shows outside the box.
Is there a extension or a plugin that lets us do it?
Example with child node: https://stackblitz.com/edit/cytoscape-call-method-child-efmbaj?file=src%2Fapp%2FstylesheetObject.ts
As you can read here, you can only place labels inside a node with the center option, a good configuration (label inside at the top) requires a margin to be added to your label:
.selector(':parent')
.css({
'text-valign': 'center',
// the next line moves the parents label up to the top of the node and 5px down to create a padding
'text-margin-y': function (node) { return -node.height() + 5 }
})
Here is a working example:
var cy = cytoscape({
container: document.getElementById('cy'),
style: cytoscape.stylesheet()
.selector(':parent')
.css({
'text-valign': 'center',
'text-margin-y': function(node) {
return -node.height() + 5
}
})
.selector('node')
.css({
'height': 'data(size)',
'width': 'data(size)',
'border-color': '#000',
'border-width': '1',
'content': 'data(name)'
})
.selector('edge')
.css({
'width': 'data(strength)'
})
.selector('#1')
.css({
'background-color': 'red'
})
.selector('#4')
.css({
'background-color': 'green'
}),
elements: {
nodes: [{
data: {
id: '1',
size: 50,
name: 'a'
}
},
{
data: {
id: '2',
size: 20,
name: 'b',
parent: '1'
}
},
{
data: {
id: '3',
size: 40,
name: 'c',
parent: '1'
}
},
{
data: {
id: '4',
size: 50,
name: 'd'
}
},
{
data: {
id: '5',
size: 20,
name: 'e',
parent: '4'
}
},
{
data: {
id: '6',
size: 40,
name: 'f',
parent: '4'
}
}
],
},
});
body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 100%;
width: 75%;
position: absolute;
left: 0;
top: 0;
float: left;
}
<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>
<script src="https://unpkg.com/jquery#3.3.1/dist/jquery.js"></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>
What I understand is that you want to put the parent label inside the box above child? apologies if I'm wrong
If so, My solution will be to add a padding and then apply margin for alignment.
Modified your example
Styles updated:
'padding-top':60
selector: 'node',
css: {
content: 'data(label)',
'text-valign': 'center',
'text-halign': 'center',
'font-size': 28,
'padding-top':60
}
'text-valign': 'top', and 'text-margin-y': function(node) {
return node.height() - 10;
}
selector: 'node[type="parent"]',
style: {
shape: 'rectangle',
'background-color': 'grey',
width: 300,
height: 100,
'font-size': 25.5,
'font-family': 'Lato, Helvetica Neue, Helvetica, Arial, sans-serif',
color: 'black',
'text-valign': 'top',
'text-halign': 'center',
'text-margin-y': function(node) {
return node.height() - 10;
}
}
I'm trying to make the label displayed in the middle position, say source --<sometext>--> target.
I'm reading the official document but I can't find an answer.
Can this be implemented?
as you can see here, there is a simple solution to this provided by cytoscape:
window.cy = cytoscape({
container: document.getElementById('cy'),
layout: {
name: 'grid',
cols: 2
},
style: [{
"selector": "node[label]",
"style": {
"label": "data(label)"
}
},
{
"selector": "edge[label]",
"style": {
"label": "data(label)",
"width": 3,
"text-background-opacity": 1,
"text-background-color": "#fff"
}
},
{
"selector": ".autorotate",
"style": {
"edge-text-rotation": "autorotate",
}
}
],
elements: [{
data: {
id: 'one'
}
},
{
data: {
id: 'two'
}
}, {
data: {
source: 'one',
target: 'two',
label: 'autorotate (move my nodes)'
},
classes: 'autorotate'
}
]
});
body {
font-family: helvetica, sans-serif;
font-size: 14px;
}
#cy {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 999;
}
<html>
<head>
<title>Labels demo</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<script src="https://unpkg.com/cytoscape#3.3.0/dist/cytoscape.min.js"></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>
There are several posts about edge or edge label overlaps in Cytoscape.js but the answers given there, like smaller labels and more spaced out nodes, don't help for a multigraph, i.e. a graph where two nodes can have multiple edges between them.
Is there a way to spread out edge labels even if they all belong to edges between the same two nodes? The edge pairs occur both in the same direction and in the reverse one.
As my graph is verly large, I would prefer a solution with haystack edges as the performance is already low.
Well you can rotate the text with "text-rotation": "autorotate" in the labels css. You can also define the "text-margin-x/y" for each node itself, but how do you plan on defining the position for each and every label? Lets assume, you did that perfectly: you would still need to do a reposition event after moving just one node, because the offsets will be off by then:
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: "60px",
"border-color": "black",
"border-opacity": "1",
"border-width": "10px"
}
},
{
selector: "$node > node",
css: {
"padding-top": "10px",
"padding-left": "10px",
"padding-bottom": "10px",
"padding-right": "10px",
"text-valign": "top",
"text-halign": "center",
"background-color": "#bbb"
}
},
{
selector: "edge",
css: {
"target-arrow-shape": "triangle"
}
},
{
selector: "edge[label]",
css: {
"label": "data(label)",
"text-rotation": "autorotate",
"text-margin-x": "data(xalign)",
"text-margin-y": "data(yalign)"
}
},
{
selector: ":selected",
css: {
"background-color": "black",
"line-color": "black",
"target-arrow-color": "black",
"source-arrow-color": "black"
}
}
],
layout: {
name: "circle"
}
}));
var info = [{
name: "Peter",
next_op_name: "Claire"
},
{
name: "Claire",
next_op_name: "Mike"
},
{
name: "Mike",
next_op_name: "Rosa"
},
{
name: "Rosa",
next_op_name: "Peter"
}
];
cy.ready(function() {
var array = [];
// iterate over info once
for (var i = 0; i < info.length; i++) {
array.push({
group: "nodes",
data: {
id: info[i].name, // id is name!!!
label: info[i].name
}
});
array.push({
group: "edges",
data: {
id: "e" + i,
source: info[i].name,
target: info[i].next_op_name,
label: "e" + i,
xalign: (i == 0 || i == 1 ? '15px' : '-15px'),
yalign: (i == 0 || i == 3 ? '15px' : '-15px')
}
});
}
cy.add(array);
cy.layout({
name: "circle"
}).run();
});
cy.on("mouseover", "node", function(event) {
var node = event.target;
node.qtip({
content: "hello",
show: {
event: event.type,
ready: true
},
hide: {
event: "mouseout unfocus"
}
},
event
);
});
cy.on("tapdrag", "node", function(event) {
// update all relevant labels
var labels = event.target.connectedEdges();
for (var i = 0; i < labels.length; i++) {
// render with the right positions?
}
});
body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 100%;
width: 75%;
position: absolute;
left: 0;
top: 0;
float: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
<!-- qtip imports -->
<script src="https://unpkg.com/jquery#3.3.1/dist/jquery.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-qtip/2.7.0/cytoscape-qtip.js"></script>
<!-- dagre imports -->
<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>
The problem breaks down to this: the task seems simple, but keeping track of the positions of all nodes and the edges aaaaand your rendered labels is a sisyphean task.
How to use dagre layout in cytoscape.js to draw a simple tree. I am putting layout{ name: ‘dagre’} and added dagre.js but not works.With arbor.js it works but I would like to use dagre to see the tree results. I'm newbie with javascript. Many thanks and sorry for my Englihs! My code:
<!DOCTYPE html>
<!--
-->
<meta name="robots" content="noindex">
<html>
<head>
<meta name="description" content="[An example of getting started with Cytoscape.js]" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Cytoscape.js initialisation</title>
<script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>
<script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/arbor.js"></script>
<script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/springy.js"></script>
<script src="C:/Users/USER/Downloads/dagre.js"></script>
<style id="jsbin-css">
body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div id="cy"></div>
<script id="jsbin-javascript">
var options = {
name: 'dagre',
// dagre algo options, uses default value on undefined
nodeSep: undefined, // the separation between adjacent nodes in the same rank
edgeSep: undefined, // the separation between adjacent edges in the same rank
rankSep: undefined, // the separation between adjacent nodes in the same rank
rankDir: undefined, // 'TB' for top to bottom flow, 'LR' for left to right
minLen: function( edge ){ return 1; }, // number of ranks to keep between the source and target of the edge
edgeWeight: function( edge ){ return 1; }, // higher weight edges are generally made shorter and straighter than lower weight edges
// general layout options
fit: true, // whether to fit to viewport
padding: 30, // fit padding
animate: false, // whether to transition the node positions
animationDuration: 500, // duration of animation in ms if enabled
boundingBox: undefined, // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
ready: function(){}, // on layoutready
stop: function(){} // on layoutstop
};
$('#cy').cytoscape({
style: cytoscape.stylesheet()
.selector('node')
.css({
'content': 'data(name)',
'text-valign': 'center',
'color': 'white',
'text-outline-width': 2,
'text-outline-color': '#888'
})
.selector('edge')
.css({
'target-arrow-shape': 'triangle'
})
.selector(':selected')
.css({
'background-color': 'black',
'line-color': 'black',
'target-arrow-color': 'black',
'source-arrow-color': 'black'
})
.selector('.faded')
.css({
'opacity': 0.25,
'text-opacity': 0
}),
elements: {
nodes: [
{ data: { id:'job.000.174.479.001.sh', name: '479' } },
{ data: { id:'job.000.174.822.001.sh', name: '822' } },
..............
] ,
edges: [
{ data: { source: 'DUM_DWH_000_VANTIVE', target: 'job.000.174.773.001.sh' } },
{ data: { source: 'job.000.174.800.001.sh', target: 'job.000.174.806.001.sh' } },
............
]
},
ready: function(){
window.cy = this;
// giddy up...
cy.elements().unselectify();
cy.layout( options );
cy.on('tap', 'node', function(e){
var node = e.cyTarget;
var neighborhood = node.neighborhood().add(node);
cy.elements().addClass('faded');
neighborhood.removeClass('faded');
});
cy.on('tap', function(e){
if( e.cyTarget === cy ){
cy.elements().removeClass('faded');
}
});
}
});
</script>
</body>
</html>
(1) You shouldn't reference your JS file from your local drive. Use a http:// or https:// URL.
(2) You haven't specified 'dagre' to run at init. Set layout: { ... }.