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>
Related
I need get chart with images in bars (i using pattern and script Highstocks) and put in a tag Canvas, but when i send SVG to tag Canvas the images in bar disappear. Do you can help me? Follow bellow that i did until here:
http://jsfiddle.net/Posture/7aLzdej4/
<!DOCTYPE html>
<html>
<head>
<title>Pattern Fill in Canvas</title>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!-- Highcharts -->
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/modules/offline-exporting.js"></script>
<!-- Canvg -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/canvg/1.4/rgbcolor.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stackblur-canvas/1.4.1/stackblur.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/canvg/dist/browser/canvg.min.js"></script>
</head>
<body>
<br>
<div style="background-color: #ffffff;">
<div id="graf-teste" style="min-width: 80%; height: 200px; max-width: 100%; margin: 0 auto"></div>
<button id='btn_capt'>Capturar Gráfico</button>
</div>
<script type="text/javascript">
var redrawEnabled = true,
ctr = 0;
ctr1 = 1;
Highcharts.chart('graf-teste', {
// $('#graf-teste').highcharts({
chart: {
events: {
render: function() {
if (redrawEnabled) {
redrawEnabled = false;
var chart = this,
renderer = chart.renderer;
chart.series[0].points.forEach(function(p) {
console.log(p);
var widthRatio = p.shapeArgs.width / p.shapeArgs.height,
id = 'pattern-' + p.index + '-' + ctr;
var pattern = renderer.createElement('pattern').add(renderer.defs).attr({
width: 1,
height: widthRatio,
id: id,
patternContentUnits: 'objectBoundingBox'
});
renderer.image('https://i.pinimg.com/originals/6c/38/66/6c38667a1977cbcac6f94b92decd7927.png', 0, 0, 1, widthRatio).attr({
}).add(pattern);
p.update({
color: 'url(#' + id + ')'
}, false);
});
chart.series[1].points.forEach(function(q) {
console.log(q);
var widthRatio = q.shapeArgs.width / q.shapeArgs.height,
id = 'pattern-' + q.index + '-' + ctr1;
var pattern = renderer.createElement('pattern').add(renderer.defs).attr({
width: 1,
height: widthRatio,
id: id,
patternContentUnits: 'objectBoundingBox'
});
renderer.image('https://s2.glbimg.com/GFHUa5KeFPDTmwtAVjWl1A7oqTQ=/695x0/s.glbimg.com/po/tt2/f/original/2014/07/14/imagem0.jpg', 0, 0, 1, widthRatio).attr({
}).add(pattern);
q.update({
color: 'url(#' + id + ')'
}, false);
});
ctr++;
ctr1++;
chart.redraw();
redrawEnabled = true;
}
}
}
},
title: {
text: 'Gráfico Teste'
},
exporting: {
enabled: false
},
xAxis: {
categories: ['']
},
yAxis: {
min: 0,
title: {
text: ''
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
stacking: 'percent',
dataLabels: {
enabled: true,
format: '<b>{point.percentage:.0f}%</b>',
//point.percentage:.1f
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
type: 'bar',
name: 'Serie 1',
enableMouseTracking: false,
// borderWidth: 1,
// borderColor: '#000000',
data: [250]
}, {
type: 'bar',
name: 'Serie 2',
enableMouseTracking: false,
// borderWidth: 1,
// borderColor: '#000000',
data: [100]
}],
credits: {
enabled: false
}
});
</script>
<canvas id="graf"></canvas>
<script type="text/javascript">
$("#btn_capt").on('click',function(e){
var svg = $('#graf-teste').highcharts().getSVG();
canvg(document.getElementById('graf'),svg);
var img = graf.toDataURL("image/png"); //img is data:image/png;base64
img = img.replace('data:image/png;base64,', '');
});
</script>
</body>
</html>
Comments: It's totally necessary use highstock, because of others charts in page.
Take a look at this demo: http://jsfiddle.net/BlackLabel/u20c8vhL/
I created a new div for the chart and render the SVG there by this method:
$("#btn_capt").on('click', function(e) {
var svg = chart.getSVG();
$('#containerContainer').prepend(svg);
});
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.
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.
I have a 2x2 button grid. Now I'd like to shrink the buttons to
200x200, place each in a container as a space place holder, then center
each button in its respective container.
In my image, I've only
shrunk the two top buttons so you can see the spacing on the page.
How can I go from the first image to the second image, which was
Photoshop'ed?
The goal: (actually, all 4 centered buttons is the goal)
File: app.js
Ext.application({
launch: function() {
var view = Ext.create('Ext.Container', {
layout: {
type: 'vbox'
},
items: [
{
xtype: 'container',
layout: 'hbox',
flex: 1,
items:[
{
xtype: 'container',
layout: 'hbox',
flex: 1,
items:[
{
xtype:'button',
text: 'Home',
ui: 'plain',
style: 'background-color: #c9c9c9',
height: 200,
width: 200
}
]
},
{
xtype: 'container',
layout: 'hbox',
flex: 1,
items:[
{
xtype:'button',
text: 'News',
ui: 'plain',
style: 'background-color: #b9b9cb',
height: 200,
width: 200
}
]
}
]
},
{
xtype: 'container',
layout: 'hbox',
flex: 1,
items:[
{
xtype:'button',
text: 'Mail',
ui: 'plain',
style: 'background-color: #a9c9c9',
flex: 1
},
{
xtype:'button',
text: 'Search',
ui: 'Search',
style: 'background-color: #c9c9c9',
flex: 1
}
]
}
]
});
Ext.Viewport.add(view);
}
});
File: index.html
<!doctype html>
<html manifest="" lang="en-US">
<head>
<meta charset="UTF-8">
<title>Sencha</title>
<link rel="stylesheet" href="http://extjs.cachefly.net/touch/sencha-touch-2.0.0/resources/css/sencha-touch.css" type="text/css">
<script type="text/javascript"
src="http://extjs.cachefly.net/touch/sencha-touch-2.0.0/sencha-touch-all-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
<body>
</body>
</html>
Simply add centered:true to the configuration of all your buttons.
Good luck.
P/S: that config actually set your component to the center (horizontally & vertically) of its parent component.