When I set node background-image to a SVG file zoom in/out changes background image. This makes ugly visuals. PNG does not have that problem.
This is a node with SVG background
This is the same node when I zoom in. You can see image is also zoomed in
This is a runnable code to demonstrate the use of background-image with SVG graphic. The SVG code must be appropriately encoded before use. Try to run the code below then zoom in and out (press control key and use scroll wheel on the mouse). The SVG graphic will scale correctly with the node.
const svg_pin =
'<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z" fill="yellow"></path></svg>';
const svgpin_Url = encodeURI("data:image/svg+xml;utf-8," + svg_pin);
var cy = cytoscape({
container: document.getElementById("cy"),
elements: {
nodes: [{
data: {
id: "j",
name: "John"
},
position: {
x: 100,
y: 100
}
},
{
data: {
id: "e",
name: "Elena"
},
position: {
x: 100,
y: 500
}
},
{
data: {
id: "k",
name: "Kim"
},
position: {
x: 600,
y: 500
}
},
{
data: {
id: "g",
name: "Gordon"
},
position: {
x: 550,
y: 80
}
}
],
edges: [{
data: {
source: "j",
target: "e",
label: "JE"
}
},
{
data: {
source: "j",
target: "g",
label: "JG"
}
},
{
data: {
source: "e",
target: "j"
}
},
{
data: {
source: "k",
target: "j"
}
},
{
data: {
source: "k",
target: "e",
label: "KE"
}
},
{
data: {
source: "k",
target: "g"
}
},
{
data: {
source: "g",
target: "j"
}
}
]
},
style: [{
selector: "node",
style: {
shape: "hexagon",
"background-color": "blue",
"background-image": svgpin_Url,
label: "data(name)",
opacity: 0.55
}
},
{
selector: "edge",
style: {
label: "data(label)",
width: 3,
"line-color": "#c0c",
"target-arrow-color": "#00c",
"curve-style": "bezier",
"target-arrow-shape": "triangle",
"target-arrow-fill": "#c00",
"arrow-scale": 20
}
},
{
selector: ".highlight",
css: {
"background-color": "yellow"
}
}
],
layout: {
name: "preset"
}
});
#cy {
width: 100%;
height: 80%;
position: absolute;
top: 10px;
left: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/2.7.10/cytoscape.min.js"></script>
<div id="cy"></div>
Some SVGs aren't always handled properly by the browser. Make your SVG as robust as possible and test as much as possible. There are hints in the documentation to make your SVG as compatible as possible: https://js.cytoscape.org/#style/background-image
Try
.element {
background-image: url(/images/image.svg);
}
Related
I have some problems rendering some data from a JSON in my apexchart series.
Here is the example of my chart with the data that I want to be in my JSON, and i don't know how to write it.
var _seed = 42;
Math.random = function() {
_seed = _seed * 16807 % 2147483647;
return (_seed - 1) / 2147483646;
};
var options = {
series: [{
name: "Q",
data: [0, 4800, 9500, null],
},
{
name: "Q - 1",
data: [0, 6500, 12000, 16000]
},{
name: "Q Target",
data: [15500, 15500, 15500, 15500]
},
],
chart: {
height: 350,
type: 'line',
zoom: {
enabled: false
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'straight'
},
title: {
text: 'Clicks',
align: 'left'
},
grid: {
row: {
colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
opacity: 0.5
},
},
xaxis: {
categories: [' ', 'Month1', 'Month2', 'Month3'],
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
#chart {
max-width: 450px;
margin: 35px auto;
}
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill#8/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/eligrey-classlist-js-polyfill"></script>
<script src="https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise#4/dist/es6-promise.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise#4/dist/es6-promise.auto.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart"></div>
If someone could give me a hint, is kindly appreciated.
The JSON looks like this , for retrieving data for the apexchart
{
"data_clicks":[
{
"name":"Q",
"data":[
{
"x":" ",
"y":0
},
{
"x":"Month1",
"y":2400
},
{
"x":"Month2",
"y":5200
},
{
"x":"Month3",
"y":null
}
]
},
{
"name":"Q - 1",
"data":[
{
"x":" ",
"y":0
},
{
"x":"Month1",
"y":1800
},
{
"x":"Month2",
"y":7150
},
{
"x":"Month3",
"y":10200
}
]
},
{
"name":"Q Target",
"data":[
{
"x":" ",
"y":11000
},
{
"x":"Month1",
"y":11000
},
{
"x":"Month2",
"y":11000
},
{
"x":"Month3",
"y":11000
}
]
}
],
I have a pie ZingChart I'm using to show simple data. It happens to be using angular and updates the series object as the user drills down.
Everything is working fine except...the tooltip does not display? It doesn't display at any point, regardless of interaction or series assignment. The standard mouseover highlights work, and clicking nodes is fine, but no tooltip. Any ideas? Can't work out what I'm missing!
My chart config is:
{
type: "pie",
id: 'chart-1',
title: {
textAlign: 'center',
text: "Loading..."
},
"legend":{
"border-width":1,
"border-color":"gray",
"border-radius":"5px",
"marker":{
"type":"circle"
},
"toggle-action":"remove",
"icon":{
"line-color":"#9999ff"
}
},
"plot": {
"animation":{
"on-legend-toggle": true,
"effect": 5,
"method": 1,
"sequence": 1,
"speed": 0.7
},
"value-box": {
"text": "$%v",
"negation": "currency",
"thousands-separator": ",",
"font-color": "black",
"placement":"in",
"offset-r":"50%",
"font-size":"12"
},
"tooltip":{
"text":"%t: %v (%npv%)"
},
"decimals": "0",
"detach": false
},
series: [],
shapes: [{
type: 'triangle',
backgroundColor: '#66ccff',
size: 10,
angle: -90,
x: 20,
y: 20,
cursor: 'hand',
id: 'backwards'
}]
};
The - in chart-1 is causing an issue with our parse/selector process. If you change the id to chart_1 everything will work fine.
var myConfig = {
"graphset":[
{
"type":"pie",
"id":"chart_1",
"title":{
"textAlign":"center",
"text":"Loading..."
},
"legend":{
"border-width":1,
"border-color":"gray",
"border-radius":"5px",
"marker":{
"type":"circle"
},
"toggle-action":"remove",
"icon":{
"line-color":"#9999ff"
}
},
"plot":{
"animation":{
"on-legend-toggle":true,
"effect":5,
"method":1,
"sequence":1,
"speed":0.7
},
"value-box":{
"text":"$%v",
"negation":"currency",
"thousands-separator":",",
"font-color":"black",
"placement":"in",
"offset-r":"50%",
"font-size":"12"
},
"decimals":"0",
"detach":false
},
"tooltip":{
"text":"%t: %v (%npv%)"
},
"series":[
{
"values":[118],
"text":"0-30"
},
{
"values":[118],
"text":"0-30"
},
{
"values":[118],
"text":"0-30"
}
],
"shapes":[
{
"type":"triangle",
"backgroundColor":"#66ccff",
"size":10,
"angle":-90,
"x":20,
"y":20,
"cursor":"hand",
"id":"backwards"
}
]
}
]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: '100%',
width: '100%'
});
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
#myChart {
height:100%;
width:100%;
min-height:150px;
}
<!DOCTYPE html>
<html>
<head>
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id="myChart"></div>
</body>
</html>
I have a problem with some code.
It only runs in jsfiddle and i dont know why it's not working in codepen or in files.
Why does this code only works in jsfiddle?
I tried it in codepen and just in files but it doesnt show anything
http://jsfiddle.net/auagufL8/
<script src="http://code.highcharts.com/maps/highmaps.js"></script>
<script src="http://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="http://code.highcharts.com/mapdata/countries/nl/nl-all.js"> </script>
<div id="container"></div>
$(function () {
// Prepare demo data
var data = [
{
"hc-key": "nl-fr",
"value": 0
},
{
"hc-key": "nl-gr",
"value": 1
},
{
"hc-key": "nl-fl",
"value": 2
},
{
"hc-key": "nl-ze",
"value": 3
},
{
"hc-key": "nl-nh",
"value": 4
},
{
"hc-key": "nl-zh",
"value": 5
},
{
"hc-key": "nl-dr",
"value": 6
},
{
"hc-key": "nl-ge",
"value": 7
},
{
"hc-key": "nl-li",
"value": 8
},
{
"hc-key": "nl-ov",
"value": 9
},
{
"hc-key": "nl-nb",
"value": 10
},
{
"hc-key": "nl-ut",
"value": 11
}
];
// Initiate the chart
$('#container').highcharts('Map', {
title : {
text : 'Highmaps basic demo'
},
subtitle : {
text : 'Source map: The Netherlands'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
min: 0
},
series : [{
data : data,
mapData: Highcharts.maps['countries/nl/nl-all'],
joinBy: 'hc-key',
name: 'Random data',
states: {
hover: {
color: '#BADA55'
}
},
dataLabels: {
enabled: true,
format: '{point.name}'
}
}]
});
});
#container {
height: 500px;
min-width: 310px;
max-width: 800px;
margin: 0 auto;
}
.loading {
margin-top: 10em;
text-align: center;
color: gray;
}
Oh!
This code perfectly works everywhere.
To get it to work in Codepen, you need to add all your JS resources via the little cog inside JS panel, and check that Latest version of jQuery is selected. <script> tags are ignored in HTML panel.
$(function () {
// Prepare demo data
var data = [
{"hc-key": "nl-fr","value": 0},
{"hc-key": "nl-gr","value": 1},
{"hc-key": "nl-fl","value": 2},
{"hc-key": "nl-ze","value": 3},
{"hc-key": "nl-nh","value": 4},
{"hc-key": "nl-zh","value": 5},
{"hc-key": "nl-dr","value": 6},
{"hc-key": "nl-ge","value": 7},
{"hc-key": "nl-li","value": 8},
{"hc-key": "nl-ov","value": 9},
{"hc-key": "nl-nb","value": 10},
{"hc-key": "nl-ut","value": 11}
];
// Initiate the chart
$('#container').highcharts('Map', {
title : {
text : 'Highmaps basic demo'
},
subtitle : {
text : 'Source map: The Netherlands'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
min: 0
},
series : [{
data : data,
mapData: Highcharts.maps['countries/nl/nl-all'],
joinBy: 'hc-key',
name: 'Random data',
states: {
hover: {
color: '#BADA55'
}
},
dataLabels: {
enabled: true,
format: '{point.name}'
}
}]
});
});
#container {
height: 500px;
min-width: 310px;
max-width: 800px;
margin: 0 auto;
}
.loading {
margin-top: 10em;
text-align: center;
color: gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/maps/highmaps.js"></script>
<script src="http://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="http://code.highcharts.com/mapdata/countries/nl/nl-all.js"></script>
<div id="container"></div>
To run code is a browser, you need to put it inside a <script> //Your code goes here </script> tag
this ->
#container {
height: 500px;
min-width: 310px;
max-width: 800px;
margin: 0 auto;
}
.loading {
margin-top: 10em;
text-align: center;
color: gray;
}
Is CSS, it must be inside a <style> tag.
this ->
$(function () {
// Prepare demo data
var data = [
{
"hc-key": "nl-fr",
"value": 0
},
{
"hc-key": "nl-gr",
"value": 1
},
{
"hc-key": "nl-fl",
"value": 2
},
{
"hc-key": "nl-ze",
"value": 3
},
{
"hc-key": "nl-nh",
"value": 4
},
{
"hc-key": "nl-zh",
"value": 5
},
{
"hc-key": "nl-dr",
"value": 6
},
{
"hc-key": "nl-ge",
"value": 7
},
{
"hc-key": "nl-li",
"value": 8
},
{
"hc-key": "nl-ov",
"value": 9
},
{
"hc-key": "nl-nb",
"value": 10
},
{
"hc-key": "nl-ut",
"value": 11
}
];
// Initiate the chart
$('#container').highcharts('Map', {
title : {
text : 'Highmaps basic demo'
},
subtitle : {
text : 'Source map: The Netherlands'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
min: 0
},
series : [{
data : data,
mapData: Highcharts.maps['countries/nl/nl-all'],
joinBy: 'hc-key',
name: 'Random data',
states: {
hover: {
color: '#BADA55'
}
},
dataLabels: {
enabled: true,
format: '{point.name}'
}
}]
});
});
Is Javascript, it must be inside a <script> tag.
Put all your CSS related files either in a separate .css file or put it under tag in your HTML file. Also put all the scripts inside a .js file or embed it under tag in your HTML file.
for more reference you can visit this older post.
I have having a problem with flot pie chart, its not showing correct percent value in tooltip, for example it shows series1:%p.0%
js code
var data = [{
label: "Series 0",
data: 1
}, {
label: "Series 1",
data: 3
}, {
label: "Series 2",
data: 9
}, {
label: "Series 3",
data: 20
}];
var plotObj = $.plot($("#flot-pie-chart"), data, {
series: {
pie: {
show: true
}
},
grid: {
hoverable: true
},
colors: ["#99c7ce","#efb3e6","#a48ad4","#AEC785","#fdd752"],
tooltip: true,
tooltipOpts: {
content: "%p.0%, %s", // show percentages, rounding to 2 decimal places
shifts: {
x: 20,
y: 0
},
defaultTheme: false
}
});
Please help to resolve this.
thanks
You Need to include jquery.flot.tooltip.min.jsand change few setting as per below working example to display the tooltip with value.
datapie = [
{label: "Running", data: 19.5, color: '#e1ab0b'},
{label: "Stopped", data: 4.5, color: '#fe0000'},
{label: "Terminated", data: 36.6, color: '#93b40f'}
];
function legendFormatter(label, series) {
return '<div ' +
'style="font-size:8pt;text-align:center;padding:2px;">' +
label + ' ' + Math.round(series.percent)+'%</div>';
};
$.plot($("#placeholder"), datapie, {
series: {
pie: {show: true, threshold: 0.1,
// label: {show: true}
}
},
grid: {
hoverable: true
},
tooltip: true,
tooltipOpts: {
cssClass: "flotTip",
content: "%p.0%, %s",
shifts: {
x: 20,
y: 0
},
defaultTheme: false
},
legend: {show: true, labelFormatter: legendFormatter}
});
#flotTip {
padding: 3px 5px;
background-color: #000;
z-index: 100;
color: #fff;
opacity: .80;
filter: alpha(opacity=85);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://envato.stammtec.de/themeforest/melon/plugins/flot/jquery.flot.min.js"></script>
<script src="https://envato.stammtec.de/themeforest/melon/plugins/flot/jquery.flot.pie.min.js"></script>
<script src="https://envato.stammtec.de/themeforest/melon/plugins/flot/jquery.flot.tooltip.min.js"></script>
<div id="placeholder" style="width:500px;height:400px;"></div>
Working Example Link : http://jsfiddle.net/Rnusy/335/
You need the Tooltip plugin.
See a complete list of available plugins here: Flot plugins
I have a json data structure like this for example :
var json1 = {
"places": [ { "id":0, "x":0.0, "y":0.0, "width":10.0, "height":10.0 },
{ "id":1, "x":50.0, "y":0, "width":10.0, "height":10.0 },
{ "id":2, "x":0.0, "y":30.0, "width":10.0, "height":10.0 },
{ "id":3, "x":50.0, "y":30.0, "width":10.0, "height":10.0 } ],
"transitions": [ { "id":0, "x":20.0, "y":20.0, "width":20.0, "height":10.0, "label":"Hello" } ],
"ptlinks": [ { "src":0, "dst":0, "expr":"x=0" },
{ "src":1, "dst":0, "expr":"y=0" } ],
"tplinks": [ { "src":0, "dst":1 },
{ "src":0, "dst":3 } ],
"name"": "Client"
}
I want to use these data to draw a graph with element transition as a rectangle and place as a circle with the links ....
<script language="javascript">
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: $('#main_petri'),
width: 960,
height: 500,
model: graph
});
var rect = new joint.shapes.basic.Rect({
position: { x: 100, y: 30 },
size: { width: 100, height: 30 },
attrs: { rect: { fill: '#FFFFFF' }, text: { text: '#', fill: '#000000' } }
});
var rect2 = rect.clone();
rect2.translate(0,50);
var link = new joint.dia.Link({
source: { id: rect.id },
target: { id: rect2.id }
});
graph.addCells([rect, rect2, link]);
How can I use JSON (position, size ...) into jointjs ?
You can just loop over your places/transitions and links and create JointJS elements/links. Something like:
_.each(json1.places, function(p) {
graph.addCell(new joint.shapes.pn.Place({
id: 'place' + p.id,
position: { x: p.x, y: p.y },
size: { width: p.width, height: p.height }
}));
});
_.each(json1.transitions, function(t) {
graph.addCell(new joint.shapes.pn.Transition({
id: 'transition' + t.id,
position: { x: t.x, y: t.y },
size: { width: t.width, height: t.height },
attrs: { '.label': { text: t.label } }
}));
});
_.each(json1.ptlinks, function(l) {
graph.addCell(new joint.dia.Link({
source: { id: 'place' + l.src },
target: { id: 'transition' + l.dst },
labels: [ { position: .5, attrs: { text: { text: l.expr } } } ]
}));
});
_.each(json1.tplinks, function(l) {
graph.addCell(new joint.dia.Link({
source: { id: 'transition' + l.src },
target: { id: 'place' + l.dst },
labels: [ { position: .5 } ]
}));
});