I'm new with getorgchart, i'm working on making an orgchart and i came across this badge reporter counter. it displays 0 when there are no reporters in your demos, what i need is that when there are no reporters, the badge should be hidden or remove.
<!DOCTYPE html>
<html>
<head>
<title>OrgChart | Create Your Own Theme</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="/orgChart/getorgchart/getorgchart.js"></script>
<link href="/orgChart/getorgchart/getorgchart.css" rel="stylesheet" />
<script src="/orgChart/getorgchart/jspdf.debug.js"></script>
<script src="/orgChart/getorgchart/saveSvgAsPng.js"></script>
<script src="/orgChart/getorgchart/svg_to_pdf.js"></script>
<style type="text/css">
html, body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
#people {
width: 100%;
height: 100%;
}
.get-text {
fill: #ffffff !important;
}
.myCustomTheme-box {
fill: #FF8F32;
}
.reporters {
fill: #0072C6;
}
.reporters-text {
fill: #ffffff;
font-size: 20px;
}
</style>
</head>
<body>
<div id="container">
<div id="people"></div>
</div>
<p><button>Download</button></p>
<script type="text/javascript">
getOrgChart.themes.myCustomTheme =
{
size: [500, 200],
toolbarHeight: 46,
textPoints: [
{ x: 10, y: 180, width: 490 },
{ x: 200, y: 40, width: 300 },
{ x: 210, y: 65, width: 290 },
{ x: 210, y: 90, width: 290 }
],
textPointsNoImage: [
{ x: 10, y: 180, width: 490 },
{ x: 10, y: 40, width: 300 },
{ x: 10, y: 65, width: 290 },
{ x: 10, y: 90, width: 290 }
],
expandCollapseBtnRadius: 20,
defs: '<filter id="f1" x="0" y="0" width="200%" height="200%"><feOffset result="offOut" in="SourceAlpha" dx="5" dy="5" /><feGaussianBlur result="blurOut" in="offOut" stdDeviation="5" /><feBlend in="SourceGraphic" in2="blurOut" mode="normal" /></filter>',
box: '<rect x="0" y="0" height="200" width="500" rx="10" ry="10" class="myCustomTheme-box" filter="url(#f1)" />',
text: '<text width="[width]" class="get-text get-text-[index]" x="[x]" y="[y]">[text]</text>',
image: '<clipPath id="getMonicaClip"><circle cx="105" cy="65" r="85" /></clipPath><image preserveAspectRatio="xMidYMid slice" clip-path="url(#getMonicaClip)" xlink:href="[href]" x="20" y="-20" height="170" width="170"/>',
reporters: '<circle cx="290" cy="230" r="20" class="reporters"></circle><text class="reporters-text" text-anchor="middle" width="120" x="290" y="237">[reporters]</text>'
};
var peopleElement = document.getElementById("people");
var orgChart = new getOrgChart(peopleElement, {
theme: "myCustomTheme",
gridView: true,
linkType: "M",
orientation: getOrgChart.RO_TOP,
enableEdit: true,
enableDetailsView: true,
enableGridView: true,
//enableExportToImage: true,
renderNodeEvent: renderNodHandler,
enablePrint: true,
scale: 0.5,
primaryFields: ["name", "title", "phone", "mail"],
photoFields: ["image"],
dataSource: [
{ id: 1, parentId: null, name: "Amber McKenzie", title: "CEO", phone: "678-772-470", mail: "lemmons#jourrapide.com", adress: "Atlanta, GA 30303", image: "/orgChart/getorgchart/images/f-11.jpg" },
{ id: 2, parentId: 1, name: "Ava Field", title: "Paper goods machine setter", phone: "937-912-4971", mail: "anderson#jourrapide.com", image: "/orgChart/getorgchart/images/f-10.jpg" },
{ id: 3, parentId: 1, name: "Evie Johnson", title: "Employer relations representative", phone: "314-722-6164", mail: "thornton#armyspy.com", image: "/orgChart/getorgchart/images/f-9.jpg" },
{ id: 4, parentId: 1, name: "Paul Shetler", title: "Teaching assistant", phone: "330-263-6439", mail: "shetler#rhyta.com", image: "/orgChart/getorgchart/images/f-5.jpg" },
{ id: 5, parentId: 2, name: "Rebecca Francis", title: "Welding machine setter", phone: "408-460-0589", image: "/orgChart/getorgchart/images/f-4.jpg" },
{ id: 6, parentId: 2, name: "Rebecca Randall", title: "Optometrist", phone: "801-920-9842", mail: "JasonWGoodman#armyspy.com", image: "/orgChart/getorgchart/images/f-8.jpg" },
{ id: 7, parentId: 3, name: "Spencer May", title: "System operator", phone: "Conservation scientist", mail: "hodges#teleworm.us", image: "/orgChart/getorgchart/images/f-7.jpg" },
{ id: 8, parentId: 6, name: "Max Ford", title: "Budget manager", phone: "989-474-8325", mail: "hunter#teleworm.us", image: "/orgChart/getorgchart/images/f-6.jpg" },
{ id: 9, parentId: 7, name: "Riley Bray", title: "Structural metal fabricator", phone: "479-359-2159", image: "/orgChart/getorgchart/images/f-3.jpg" },
{ id: 10, parentId: 7, name: "Callum Whitehouse", title: "Radar controller", phone: "847-474-8775", image: "/orgChart/getorgchart/images/f-2.jpg" }
]
});
function renderNodHandler(sender, args) {
for (var i = 0; i < args.content.length; i++) {
if (args.content[i].indexOf("[reporters]") != -1) {
args.content[i] = args.content[i].replace("[reporters]", args.node.children.length);
}
}
}
document.querySelector("button").addEventListener("click", function () {
svg_to_pdf(document.querySelector("svg"), function (pdf) {
download_pdf('SVG.pdf', pdf.output('dataurlstring'));
});
});
</script>
</body>
</html>
any ideas how i can achieve it? please help. thank you
localhost/createyourtheme_test
I "resolve" your problem. In the function <>, you have to print <> to see the structure of the arrays, I did this:
console.log("ARGS");
console.log(args);
then, into the browser console, you have to check in which position are the elements, in my case is the position number 6, when you identify that, inside the <> you have "clean" the position, like this:
if(args.node.children.length==0)
{
args.content[6] = ""
}
And, that's it. I "fix" the issue that way.
Related
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>
I'm working with Google Core charts to plot my data. I had specific custom requirement for the chart, which is donet chart with labeled legends.
I have achieved the same but the issue is when there are certain value on the pie close to each other the one of the legend goes missing.
Below is the jsfiddle example :
https://jsfiddle.net/mudass1rk/270cdraq/1/
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 98],
['Eat', 2],
['Commute', 4],
['Watch TV', 5]
]);
var options = {
pieHole: 0.75,
backgroundColor: { fill: 'transparent'},
pieSliceBorderColor: "black",
legend: {
position: 'labeled',
textStyle:{
color: 'white'
},
alignment: 'center'
},
pieSliceText: 'none',
pieStartAngle: 0,
height: 300,
//width: 300,
chartArea:{top:40},
// tooltip: {trigger: 'selection'},
slices: [{color: '#00DBD1'}, {color: '#61F28F'}, {color: '#61F28F'}, {color: '#FFD100'}, {color: '#FF6B1A'}, {color: '#EB1212'}]
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="piechart" style="width: 900px; height: 500px;"></div>
Thanks a lot in advance.
this is a limitation of the chart.
not much you can do but make the chart bigger.
the chart does not automatically adjust to the max size available on the container.
in this case, you have the container set to 900 x 500.
you can adjust the chart area option to provide more room,
along with the height and width options...
chartArea: {
top: 40,
height: '100%',
width: '100%',
left: 100,
right: 100
},
height: '100%',
width: '100%',
see following working snippet...
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 98],
['Eat', 2],
['Commute', 4],
['Watch TV', 5]
]);
var options = {
pieHole: 0.75,
backgroundColor: {
fill: 'transparent'
},
pieSliceBorderColor: "black",
legend: {
position: 'labeled',
textStyle: {
color: 'white'
},
alignment: 'center'
},
pieSliceText: 'none',
pieStartAngle: 0,
chartArea: {
top: 40,
height: '100%',
width: '100%',
left: 100,
right: 100
},
height: '100%',
width: '100%',
slices: [{
color: '#00DBD1'
}, {
color: '#61F28F'
}, {
color: '#61F28F'
}, {
color: '#FFD100'
}, {
color: '#FF6B1A'
}, {
color: '#EB1212'
}],
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
#piechart {
height: 500px;
width: 900px;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="piechart"></div>
I'm trying to make a highchart donut with a legend on the side,
I'm really struggling to get the data labels to be more centered. At the moment each of them are in a different place,
an image of intended result:
https://codepen.io/mattdavidson/pen/qgqZyV
Highcharts.chart('container', {
credits: { enabled: false },
chart: { height: 300, width: 500, animation: false },
title: {
align: 'center',
verticalAlign: 'middle',
text: 10,
y: 25,
x: 55,
style: { color: '#333333', fontSize: '72px', fontWeight:'bold'},
},
plotOptions: {
pie: {
dataLabels: {
enabled: true,
format: '{point.y}',
distance: -25,
style: { fontSize: '32px', textOutline: 0 },
},
animation: false,
showInLegend: true,
},
},
legend: {
layout: 'vertical',
verticalAlign: 'middle',
align: 'left',
symbolHeight: 25,
symbolRadius: 5,
itemMarginTop: 10,
itemMarginBottom: 10,
},
series: [
{
type: 'pie',
innerSize: '55%',
colors: ['rgb(212,33,71)', 'rgb(250,189,43)', 'rgb(60,168,74)'],
data: [['Category 1', 4], ['Category 2', 5], ['Category 3', 1]],
},
],
});
There is an issue reported on Highcharts github about donut labels position. Check it here: https://github.com/highcharts/highcharts/issues/9005.
I've changed some options and added custom text using Highcharts.SVGRenderer#text (dynamic sum of all values) on the donut center. Perhaps it will help you: https://jsfiddle.net/BlackLabel/2jmqext9/.
Code:
Highcharts.chart('container', {
credits: {
enabled: false
},
chart: {
height: 300,
width: 500,
animation: false,
events: {
load: function() {
var chart = this,
offsetLeft = -20,
offsetTop = 10,
x = chart.plotLeft + chart.plotWidth / 2 + offsetLeft,
y = chart.plotTop + chart.plotHeight / 2 + offsetTop,
value = 0;
chart.series[0].yData.forEach(function(point) {
value += point;
});
chart.renderer.text(value, x, y).add().css({
fontSize: '30px'
}).toFront();
}
}
},
plotOptions: {
pie: {
dataLabels: {
enabled: true,
color: '#fff',
format: '{point.y}',
distance: -25,
style: {
fontSize: '20px',
textOutline: 0
},
},
animation: false,
showInLegend: true,
},
},
legend: {
layout: 'vertical',
verticalAlign: 'middle',
align: 'left',
symbolHeight: 15,
symbolRadius: 5,
symbolPadding: 10,
itemMarginTop: 10,
itemMarginBottom: 10,
itemStyle: {
fontSize: '15px'
}
},
series: [{
type: 'pie',
innerSize: '55%',
colors: ['rgb(212,33,71)', 'rgb(250,189,43)', 'rgb(60,168,74)'],
data: [
['Category 1', 4],
['Category 2', 2],
['Category 3', 12]
],
}, ],
});
image = new joint.shapes.basic.Image({
position : {
x : 250,
y : 250
},
size : {
width : 90,
height : 90
},
attrs : {
image : {
"xlink:href" : image_link,
width : 100,
height : 100
}
}
});
I want to add ports to image element of joint js
You can use the below code which is in one of the examples in the demo folder of jointjs npm package.
joint.shapes.devs.MyImageModel = joint.shapes.devs.Model.extend({
markup: '<g class="rotatable"><g class="scalable"><rect class="body"/></g><image/><text class="label"/><g class="inPorts"/><g class="outPorts"/></g>',
defaults: joint.util.deepSupplement({
type: 'devs.MyImageModel',
size: { width: 70, height: 50 },
attrs: {
'.port-body': {
r: 5,
magnet: true,
stroke: '#000000'
},
// rect: { stroke: '#d1d1d1', fill: { type: 'linearGradient', stops: [{offset: '0%', color: 'white'}, {offset: '50%', color: '#d1d1d1'}], attrs: { x1: '0%', y1: '0%', x2: '0%', y2: '100%' } } },
// circle: { stroke: 'gray' },
'.inPorts circle': { fill: '' },
'.outPorts circle': { fill: '' },
image: { 'xlink:href': '/images/rout6.gif', width: 70, height: 50, 'ref-x': .5, 'ref-y': .5, ref: 'rect', 'x-alignment': 'middle', 'y-alignment': 'middle' }
}
}, joint.shapes.devs.Model.prototype.defaults)
});
joint.shapes.devs.MyImageModelView = joint.shapes.devs.ModelView;
// Usage:
var imageModel = new joint.shapes.devs.MyImageModel({
position: { x: 10, y: 190 },
size: { width: 70, height: 50 },
inPorts: [''],
outPorts: ['']
});
stencilGraph.addCell(imageModel);
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.