I'm trying to learn cytoscape.js and I'm pretty new to it. I took the code from pie-style graph demo and playing with it. I just added parents to all the nodes and noticed that the node shape for all the parent nodes changed to 'square'. I even tried adding the shape style to 'circle' in the css initialization, but no use. I would like to use this kind of graph in my project. Any help is appreciated. Thanks!.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[Cytoscape.js pie style]" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Cytoscape.js pie style</title>
<script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.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">
$(function(){ // on dom ready
$('#cy').cytoscape({
style: cytoscape.stylesheet()
.selector('node')
.css({
'width': '60px',
'height': '60px',
'content': 'data(id)',
'pie-size': '80%',
'shape':'circle',
'pie-1-background-color': '#E8747C',
'pie-1-background-size': 'mapData(foo, 0, 10, 0, 100)',
'pie-2-background-color': '#74CBE8',
'pie-2-background-size': 'mapData(bar, 0, 10, 0, 100)',
'pie-3-background-color': '#74E883',
'pie-3-background-size': 'mapData(baz, 0, 10, 0, 100)'
})
.selector('edge')
.css({
'width': 4,
'target-arrow-shape': 'triangle',
'opacity': 0.5
})
.selector(':selected')
.css({
'background-color': 'black',
'line-color': 'black',
'target-arrow-color': 'black',
'source-arrow-color': 'black',
'opacity': 1
})
.selector('.faded')
.css({
'opacity': 0.25,
'text-opacity': 0
}),
elements: {
nodes: [
{ data: { id: 'a', foo: 3, bar: 5, baz: 2 } },
{ data: { id: 'b',parent:'a', foo: 6, bar: 1, baz: 3 } },
{ data: { id: 'c',parent:'b', foo: 2, bar: 3, baz: 5 } },
{ data: { id: 'd',parent:'c', foo: 7, bar: 1, baz: 2 } },
{ data: { id: 'e',parent:'d', foo: 2, bar: 3, baz: 5 } }
],
edges: [
{ data: { id: 'ae', weight: 1, source: 'a', target: 'e' } },
{ data: { id: 'ab', weight: 3, source: 'a', target: 'b' } },
{ data: { id: 'be', weight: 4, source: 'b', target: 'e' } },
{ data: { id: 'bc', weight: 5, source: 'b', target: 'c' } },
{ data: { id: 'ce', weight: 6, source: 'c', target: 'e' } },
{ data: { id: 'cd', weight: 2, source: 'c', target: 'd' } },
{ data: { id: 'de', weight: 7, source: 'd', target: 'e' } }
]
},
layout: {
name: 'circle',
padding: 10
},
ready: function(){
window.cy = this;
}
});
}); // on dom ready
</script>
</body>
</html>
A compound parent node may only be a rectangle, because it must be able to accommodate child nodes. If you're interested in changing the presentation but not the containment logic of parent nodes, you can style them with a transparent background colour and a background image or similar.
Related
As shown in the screenshot, there are days where I have a null value... I would like to connect the dataset with a line regardless of a particular day being null. Is this possible in chart.js 2.x?
You can set spangaps to true:
const options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, null, 2, 3],
borderColor: 'pink',
fill: false,
spanGaps: true
},
{
label: '# of Points',
data: [7, null, null, 8, 3, 7],
borderColor: 'orange',
fill: false,
spanGaps: true
}
]
},
options: {}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
</body>
I need advise on how can I load SigmaJS v2 on a html document?
Here are the steps I did, but it is not working
Step 1) I created a new folder and open a cmd window, then execute the below command
npm install graphology sigma
Step 2) I download the require.js in cdn and put inside the node_modules/sigma/require.js
Step 3) I created a new file called index.html in the node_modules/sigma/index.html.
Below is my code for index.html
<html>
<head>
<script>var exports = {};</script>
<script>var module = {};</script>
<script src="require.js"></script>
<style>
html { height:100%; color: #fff!important;}
body {height: 100%; margin:0; color: #fff!important;}
#sigma-container { width:100%; height:100%; color: #fff!important;}
#sigma-mouse{
background: transparent;
}
</style>
<script type="text/javascript">
function onload(){
require([
"sigma.js",
"../events/events.js"
], function(){
var s = new sigma(
{
renderer: {
container: document.getElementById('sigma-container'),
type: 'canvas'
},
settings: {
labelColor: 'node',
minEdgeSize: 0.1,
maxEdgeSize: 2,
minNodeSize: 5,
maxNodeSize: 5,
}
}
);
var graph = {
nodes: [
{ id: "n0", label: "node 1", x: 0, y: 0, size: 3, color: '#00BCD4' },
{ id: "n1", label: "node 2", x: 3, y: 1, size: 2, color: '#00BCD4' },
{ id: "n2", label: "node 3", x: 1, y: 3, size: 1, color: '#00BCD4' },
{ id: "n3", label: "node 4", x: 6, y: 0, size: 3, color: '#00BCD4' },
{ id: "n4", label: "node 5", x: 5, y: 1, size: 2, color: '#00BCD4' },
{ id: "n5", label: "node 6", x: 4, y: 3, size: 1, color: '#00BCD4' }
],
edges: [
{ id: "e0", source: "n0", target: "n1", color: '#545454', type:'line'},
{ id: "e1", source: "n1", target: "n2", color: '#545454', type:'line'},
{ id: "e2", source: "n1", target: "n3", color: '#545454', type:'line'},
{ id: "e3", source: "n1", target: "n4", color: '#545454', type:'line'},
{ id: "e4", source: "n2", target: "n0", color: '#545454', type:'line'},
{ id: "e5", source: "n2", target: "n3", color: '#545454', type:'line'},
{ id: "e6", source: "n3", target: "n2", color: '#545454', type:'line'},
{ id: "e7", source: "n4", target: "n5", color: '#545454', type:'line'},
{ id: "e8", source: "n4", target: "n3", color: '#545454', type:'line'},
{ id: "e9", source: "n5", target: "n0", color: '#545454', type:'line'}
]
}
s.graph.read(graph);
s.refresh();
});
}
</script>
</head>
<body onload="onload()">
<div id='sigma-container'></div>
</body>
</html>
I encountered error below, when I browse to index.html.
Can anyone please help?
I've checked the source of the Sigma and the minified version is compatible with AMD modules, here is your example, slightly modified, but working:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js" integrity="sha512-c3Nl8+7g4LMSTdrm621y7kf9v3SDPnhxLNhcjFJbKECVnmZHTdo+IRO05sNLTH/D3vA6u1X32ehoLC7WFVdheg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
html { height:100%; color: #fff!important;}
body {height: 100%; margin:0; color: #fff!important;}
#sigma-container { width:100%; height:100%; color: #fff!important;}
#sigma-mouse{
background: transparent;
}
</style>
<script type="text/javascript">
function onload(){
require([
"https://cdnjs.cloudflare.com/ajax/libs/sigma.js/2.1.2/sigma.min.js"
], function(sigma){
console.log(sigma);
});
}
</script>
</head>
<body onload="onload()">
<div id='sigma-container'></div>
</body>
</html>
In JointJS the remove link SVG that appears is a red circle with a white X in it. I would like to change the colour of the red circle for all remove link icons. Anyone know how to do this?
Thanks!
Tried reading the following but couldn't find what I wanted:
https://resources.jointjs.com/demos/kitchensink
I want to do something like this:
defaultLink: new joint.shapes.app.Link({
attrs: {
remove: {
circle: {
fill: '#634ee9'
}
}
}
}),
I want the red 'remove link' circle to change to a blue/purple one
You can implement your own remove button
this.paper.on({
'link:mouseenter': function (linkView) {
linkView.addTools(new joint.dia.ToolsView({
tools: [
new joint.linkTools.Vertices({ snapRadius: 0 }),
new joint.linkTools.Remove({
distance: 20
}),
new joint.linkTools.Button({
markup: [{
tagName: 'circle',
selector: 'button',
attributes: {
'r': 15,
'stroke': '#fe854f',
'stroke-width': 1,
'fill': 'white',
'cursor': 'pointer'
}
}, {
tagName: 'text',
textContent: 'X',
selector: 'icon',
attributes: {
'fill': '#fe854f',
'font-size': 8,
'text-anchor': 'middle',
'font-weight': 'bold',
'pointer-events': 'none',
'y': '0.3em'
}
}],
distance: -50,
action: function () {
var link = this.model;
link.remove();
}
})
]
}));
}
})
I'm trying to export a chart created with chartjs without an actual site it's just a node backend app that creates the chart, I then need to export it and send it to slack api.
I figured I would try to create a virtual dom and then export from there but is it not working. I'm open to other approaches or fixes to this code. I'm getting an error that says window is undefined, but if I console.log(window) it says it's a window object, and everything looks normal.
const JSDOM = require("jsdom");
const Chart = require("chart.js");
const dom = new JSDOM.JSDOM(`<!DOCTYPE html><canvas id="myChart" width="400" height="400"></canvas>`);
const canvas = dom.window.document.getElementById('myChart');
const ctx = canvas.getContext('2d');
const chart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Standing costs', 'Running costs'],
datasets: [{
label: 'Washing and cleaning',
data: [0, 8],
backgroundColor: '#22aa99'
}, {
label: 'Traffic tickets',
data: [0, 2],
backgroundColor: '#994499'
}, {
label: 'Tolls',
data: [0, 1],
backgroundColor: '#316395'
}, {
label: 'Parking',
data: [5, 2],
backgroundColor: '#b82e2e'
}, {
label: 'Car tax',
data: [0, 1],
backgroundColor: '#66aa00'
}, {
label: 'Repairs and improvements',
data: [0, 2],
backgroundColor: '#dd4477'
}, {
label: 'Maintenance',
data: [6, 1],
backgroundColor: '#0099c6'
}, {
label: 'Inspection',
data: [0, 2],
backgroundColor: '#990099'
}, {
label: 'Loan interest',
data: [0, 3],
backgroundColor: '#109618'
}, {
label: 'Depreciation of the vehicle',
data: [0, 2],
backgroundColor: '#109618'
}, {
label: 'Fuel',
data: [0, 1],
backgroundColor: '#dc3912'
}, {
label: 'Insurance and Breakdown cover',
data: [4, 0],
backgroundColor: '#3366cc'
}]
},
options: {
onAnimationComplete: animationDone,
responsive: false,
legend: {
position: 'right'
},
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: true
}]
}
}
});
function animationDone() {
return canvas.toDataUrl("image/jpg");
}
I just want an image file or url that I can send to slack api.
Use chartjs-node-canvas, this is a Node JS renderer for Chart.js using canvas.
It provides and alternative to chartjs-node that does not require jsdom (or the global variables that this requires) and allows chartJS as a peer dependency, so you can manage its version yourself.
This is how it will work with your code:
const { CanvasRenderService } = require('chartjs-node-canvas');
const width = 400;
const height = 400;
const chartCallback = (ChartJS) => {
// Global config example: https://www.chartjs.org/docs/latest/configuration/
ChartJS.defaults.global.elements.rectangle.borderWidth = 2;
// Global plugin example: https://www.chartjs.org/docs/latest/developers/plugins.html
ChartJS.plugins.register({
// plugin implementation
});
// New chart type example: https://www.chartjs.org/docs/latest/developers/charts.html
ChartJS.controllers.MyType = ChartJS.DatasetController.extend({
// chart implementation
});
};
const canvasRenderService = new CanvasRenderService(width, height, chartCallback);
(async () => {
const configuration = {
type: 'line',
data: {
labels: ['Standing costs', 'Running costs'],
datasets: [{
label: 'Washing and cleaning',
data: [0, 8],
backgroundColor: '#22aa99'
}, {
label: 'Traffic tickets',
data: [0, 2],
backgroundColor: '#994499'
}, {
label: 'Tolls',
data: [0, 1],
backgroundColor: '#316395'
}, {
label: 'Parking',
data: [5, 2],
backgroundColor: '#b82e2e'
}, {
label: 'Car tax',
data: [0, 1],
backgroundColor: '#66aa00'
}, {
label: 'Repairs and improvements',
data: [0, 2],
backgroundColor: '#dd4477'
}, {
label: 'Maintenance',
data: [6, 1],
backgroundColor: '#0099c6'
}, {
label: 'Inspection',
data: [0, 2],
backgroundColor: '#990099'
}, {
label: 'Loan interest',
data: [0, 3],
backgroundColor: '#109618'
}, {
label: 'Depreciation of the vehicle',
data: [0, 2],
backgroundColor: '#109618'
}, {
label: 'Fuel',
data: [0, 1],
backgroundColor: '#dc3912'
}, {
label: 'Insurance and Breakdown cover',
data: [4, 0],
backgroundColor: '#3366cc'
}]
},
options: {
responsive: false,
legend: {
position: 'right'
},
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: true
}]
}
}
};
const dataUrl = await canvasRenderService.renderToDataURL(configuration);
})();
dataUrl variable will contain the image you can pass to Slack API
I'm looking for advice on how I should/can configure Flotcharts using the Fillbetween and Threshold pluggins to create a chart that accomplishes the following:
Plot a line chart. (done)
Set some threshold values. (done)
Set and fill values that are outside of the threshold values. (not quite done)
Here's what I've accomplished so far,
https://jsfiddle.net/gstoa/utv4kvw2/
$(function() {
var values = {
'avgBottom': [
[1, -2],
[2, -2],
[3, -2],
[4, -2],
[5, -2]
],
'avgTop': [
[1, 3],
[2, 3],
[3, 3],
[4, 3],
[5, 3]
],
'values': [
[1, .5],
[2, -3],
[3, .8],
[4, 4.5],
[5, 6.6]
]
};
var dataset = [{
data: values['values'],
lines: {
show: true
},
color: "rgb(50,50,255)"
}, {
id: 'avgBottom',
data: values['avgBottom'],
lines: {
show: true,
lineWidth: 0,
fill: false
},
color: "rgb(50,50,255)"
}, {
id: 'values',
data: values['values'],
lines: {
show: true,
lineWidth: 0.5,
fill: 0.2,
shadowSize: 0
},
color: "rgb(50,50,255)",
fillBetween: 'avgBottom'
}, {
id: 'avgTop',
data: values['avgTop'],
lines: {
show: true,
lineWidth: 0,
fill: 0.2
},
color: "rgb(50,50,255)",
fillBetween: 'values'
}];
$.plot($("#placeholder"), dataset, {
xaxis: {
tickDecimals: 0
},
series: {
lines: {
show: true,
fill: true
},
points: {
show: false,
radius: 4
},
color: "#62CB31",
// threshold: {
// below: -2,
// color: "rgb(255,0,0)"
// }
},
yaxis: {
tickFormatter: function(v) {
return v;
}
}
});
$.plot($("#placeholder"), [d1, d2, d3]);
});
I'd like this line chart to look like the following:
Any advice is greatly appreciated.
To do this, I had to switch from the fillbetween to the fillbelow flot plugin. I then had to modify the source of the fillbelow plugin to look at a new fillColor property of the series (I've got a pull request to merge these changes back into the main branch).
All in all, your new data set looks like the code snippet below (this JSFiddle demonstrates how to get the chart to look like your example image).
var dataset = [{
id: 'topValues',
data: values['values'],
lines: {
show: true,
},
color: "rgb(50,50,255)",
fillBelowTo: 'avgTop',
fillBelowUseSeriesObjectFillColor: false,
fillColor: "#FF0000"
}, {
id: 'avgTop',
data: values['avgTop'],
lines: {
show: true,
lineWidth: 0,
fill: true
},
color: "rgb(50,50,255)"
}, {
id: 'bottomValues',
data: values['values'],
lines: {
show: true,
lineWidth: 0,
shadowSize: 0
},
color: "rgb(50,50,255)"
}, {
id: 'avgBottom',
data: values['avgBottom'],
lines: {
show: true,
lineWidth: 0,
fill: true,
},
fillBelowTo: 'bottomValues',
fillBelowUseSeriesObjectFillColor: false,
fillColor: "#FF0000",
color: "rgb(50,50,255)"
}];
The fillBelowTo property acts similarly to the fillBetween
property of the fillbetween plugin - it denotes to which series you'd
like to fill below to.
The fillBelowUseSeriesObjectFillColor
property (set to false) tells us to not use the lines.fillColor
color and instead use the fillColor value. If fillBelowUseSeriesObjectFillColor was true, the lines.fillColor color would be used (which in this case would be blue).