We Keep Coding

JsPlumb, How to save connector labels?

Could someone help me out with what I am missing?
The scenario is: there are several nodes. Among them, one node can connect with 3 other nodes and those connections should be labeled.
The codes are connecting multiple nodes with labels, but on save it doesn't save the labels. On page load, it shows the connections but not the labels.
Here are my codes.
let connector = [
"EditableBezier",
{
cornerRadius: 0,
curviness: 30,
},
];
let paintStyle = {
strokeWidth: 2,
stroke: "rgb(217,217,217)",
outlineWidth: 3,
outlineStroke: "transparent",
};
let paintStyle = {
strokeWidth: 2,
stroke: "rgb(217,217,217)",
outlineWidth: 3,
outlineStroke: "transparent",
};
let hoverStyle = {
strokeWidth: 2,
stroke: "rgb(67,67,67)",
};
let abLabelCounter = 1;
function abSplitConnections(params) {
var source = params.connection.source;
var target = params.connection.target;
if (source.id === target.id) return false;
var conn = jsPlumb.getInstance();
let c = conn.connect({
source: source,
target: target,
editable: true,
anchor: "AutoDefault",
endpoint: "Blank",
connector: connector,
paintStyle: paintStyle,
hoverPaintStyle: hoverStyle,
overlays: [
[
"Arrow",
{
location: 1,
width: 10,
length: 10,
},
],
[
"Label",
{
location: 0.5,
label: () => {
if (abLabelCounter === 1) {
abLabelCounter++;
return "A";
}
if (abLabelCounter === 2) {
abLabelCounter++;
return "B";
}
if (abLabelCounter === 3) {
abLabelCounter = 1;
return "C";
}
},
id: "partition",
},
],
],
});
}

Highmaps: Change periods to commas when setOptions wont work

I have built a customized map using Highmaps by Highcharts. I need to change the periods (decimal point) to commas. I know how to do it normally using setOptions, like this:
Highcharts.setOptions({
lang: {
drillUpText: "< < Regresar",
decimalPoint: ',',
thousandsSep: '.'
},
});
However, the map's code has been customized to change the tooltip information and setOptions is no longer working to change the periods to commas. I suspect its an easy fix for someone more advanced that I. Are there any JavaScript experts out there that can help me out with this? Here's a jsfiddle: http://jsfiddle.net/sstoker/L60jg274/
Here's the relevant JS code:
$(function() { //For point links
(function(H) {
H.Legend.prototype.setItemEvents = null;
})(Highcharts)
// Prepare demo data
// Data is joined to map using value of 'hc-key' property by default.
// See API docs for 'joinBy' for more info on linking data and map.
const data = [
['mx-3622', 0.00],
['mx-bc', 5.59],
['mx-bs', 4.05],
['mx-so', 4.77],
['mx-cl', 6.91],
['mx-na', 8.88],
['mx-cm', 8.01],
['mx-qr', 4.87],
['mx-mx', 5.01],
['mx-mo', 0.089],
['mx-df', 8.12],
['mx-qt', 7.32],
['mx-tb', 3.17],
['mx-cs', 1.15],
['mx-nl', 6.88],
['mx-si', 6.64],
['mx-ch', 2.19],
['mx-ve', 0.66],
['mx-za', 8.03],
['mx-ag', 10],
['mx-ja', 3.35],
['mx-mi', 3.91],
['mx-oa', 0.8],
['mx-pu', 1.53],
['mx-gr', 0.0],
['mx-tl', 2.95],
['mx-tm', 5.47],
['mx-co', 9.46],
['mx-yu', 8.62],
['mx-dg', 4.47],
['mx-gj', 8.33],
['mx-sl', 4.35],
['mx-hg', 4.75]
];
const data1 = [
['mx-3622', 0.0],
['mx-bc', 13],
['mx-bs', 21],
['mx-so', 17],
['mx-cl', 10],
['mx-na', 3],
['mx-cm', 8],
['mx-qr', 16],
['mx-mx', 15],
['mx-mo', 31],
['mx-df', 6],
['mx-qt', 9],
['mx-tb', 24],
['mx-cs', 28],
['mx-nl', 11],
['mx-si', 12],
['mx-ch', 26],
['mx-ve', 30],
['mx-za', 7],
['mx-ag', 1],
['mx-ja', 23],
['mx-mi', 22],
['mx-oa', 29],
['mx-pu', 27],
['mx-gr', 32],
['mx-tl', 25],
['mx-tm', 14],
['mx-co', 2],
['mx-yu', 4],
['mx-dg', 19],
['mx-gj', 5],
['mx-sl', 20],
['mx-hg', 18]
];
// Create the chart
var chart = Highcharts.mapChart('container', {
chart: {
backgroundColor: '#f3f7fa',
map: 'countries/mx/mx-all',
},
title: {
text: ''
},
subtitle: {
text: ''
},
plotOptions: { //For point links
series: {
events: {
legendItemClick: function(e) {
return false;
}
}
},
map: {
point: {
events: {
click: function() {
$('#map1').trigger(this['hc-key']);
}
}
}
}
},
exporting: {
buttons: {
contextButton: {
align: 'center',
x: 0
}
},
chartOptions: {
chart: {
events: {
load: function() {
this.renderer.image('http://165.22.82.145/wp-content/uploads/2019/09/IDDMEX-Logo.svg',
480, // x
335, // y
75, // width
40, // height
).add();
}
}
}
}
},
mapNavigation: {
enabled: false,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
min: 0,
maxColor: 'blue',
events: {
legendItemClick: function() {
console.log(this)
}
},
dataClasses: [{
from: 0,
to: 3.000,
color: '#6497b1'
}, {
from: 3.001,
to: 4.500,
color: '#005b96'
}, {
from: 4.510,
to: 7.000,
color: '#03396c'
}, {
from: 7.001,
to: 10.000,
color: '#011f4b'
}]
},
legend: {
title: {
text: 'Desarrollo',
style: {
color: ( // theme
Highcharts.defaultOptions &&
Highcharts.defaultOptions.legend &&
Highcharts.defaultOptions.legend.title &&
Highcharts.defaultOptions.legend.title.style &&
Highcharts.defaultOptions.legend.title.style.color
) || 'black'
}
},
align: 'left',
verticalAlign: 'bottom',
floating: true,
layout: 'vertical',
valueDecimals: 3,
symbolRadius: 5,
symbolHeight: 14
},
series: [{
keys: ['hc-key', 'value', 'rank'],
data: data,
name: 'Índice 2018',
states: {
hover: {
color: '#f3bbd3'
},
},
dataLabels: {
enabled: false,
format: '{point.name}'
}
}],
tooltip: {
pointFormat: ' {point.name} {point.value} <br>Ranking: {point.rank}',
pointFormatter: function() {
var firstRow = (this['hc-key'] === 'mx-df') ?
"CDMX" :
this.name;
firstRow = firstRow + " " + this.value;
var secondRow = "Ranking: " + this.rank;
return (firstRow + "<br />" + secondRow);
}
},
});
});

setOptions usage is the correct solution. Next step is to use Highcharts.numberFormat function.
Demo: http://jsfiddle.net/BlackLabel/ay8m4pug/
Relevant code:
Highcharts.setOptions({
lang: {
decimalPoint: ',',
...
}
});
...
tooltip: {
...
pointFormatter: function() {
...
firstRow = firstRow + " " + Highcharts.numberFormat(this.value);
...
}
},

flot chart hoverable markings

I made a few graphs with the possibility of putting a mark inside, but I don't understand how to make the mark hoverable with the y-axis value.
$.plot($("#flot-chart-#ControlID"), series_#ControlID, {
series: {
lines: {
lineWidth: 2,
fill: #((Model.Series.Count() == 1).ToString().ToLower()),
},
bars: {
barWidth: 0.6,
align: "center"
},
points: {
fill: #((Model.Series.Count() == 1).ToString().ToLower()),
}
},
xaxis: {
ticks: xlabels_#ControlID,
tickDecimals: 0
},
colors: #Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.Series.Select(o => o.Color).ToArray())),
grid: {
color: "#999999",
hoverable: true,
clickable: true,
borderWidth: 0,
#if (Model.LimitLine != null)
{
<text>
markings: [
{ color: '#000', lineWidth: 1, yaxis: { from: #Model.LimitLine, to: #Model.LimitLine }},
]
</text>
}
},
legend: {
show: true
},
tooltip: true,
tooltipOpts: {
content: function(label, xval, yval) {
var content = getLabel_#(ControlID)(xval) + ": " + yval;
return content;
},
}
});
How can i show a tooltip with the value?
Graph example:

You can't do that with the tooltips plugin, but it is possible when doing the tooltips yourself. Something like this:
$("#placeholder").bind("plothover", function (event, pos, item) {
if (item) { // hovering over a datapoint
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
$("#tooltip").html(item.series.label + " of " + x + " = " + y)
.css({top: item.pageY+5, left: item.pageX+5}).fadeIn(200);
} else {
var hideTooltip = true;
// you need to save the Flot object for this (here as "plot")
$.each(plot.getOptions().grid.markings, function(idx, marking) {
if (Math.abs(pos.y - marking.yaxis.to) < 10) {
$("#tooltip").html("Limit: " + marking.yaxis.to)
.css({top: pos.pageY + 5, left: pos.pageX + 5}).fadeIn(200);
hideTooltip = false;
return false;
}
});
if (hideTooltip) {
$("#tooltip").hide();
}
}
});
Based on this example.

JointJS creating links from magnet not working

I managed to create a diagram with elements, in port, and multiple out ports.
All the elements are connected using links from the in port to an out port.
When I try to play with the links I already have (loaded from JSON), it works properly.
For some reason when I try to create a new link by pressing the ports, it drags the element instead.
How can I make the ports create new links when I press on them?
joint.shapes.Question = joint.shapes.basic.Generic.extend(_.extend({}, joint.shapes.basic.PortsModelInterface, {
markup: '<g class="rotatable">' +
'<g class=""><g class="inPorts" /><rect class="question-wrapper" /><rect class="question-title" /><rect class="options-body" /><g class="outPorts" /></g>' +
'<text class="question" /><g class="options" />' +
'</g>',
portMarkup: '<g class="port port-<%= port.type %> port-<%= port.id %>"><circle class="port-body" /><text class="port-label" /></g>',
optionMarkup: '<g class="option-wrapper"><text class="option"/></g>',
defaults: joint.util.deepSupplement({
type: 'Question',
minWidth: 200,
optionHeight: 25,
inPorts: [{"id": "in", "label": "IN"}],
attrs: {
'.': {
magnet: false
},
'.question-wrapper': {
width: 200,
height: 95,
fill: '#f2f2f2',
rx: 10,
ry: 10,
ref: '.paper'
},
'.question-title': {
height: 30,
fill: '#ffffff',
rx: 5,
ry: 5,
ref: '.question-wrapper',
'ref-x': 5,
'ref-y': 5,
'ref-width': -10
},
'.question': {
fill: '#000000',
'font-size': 14,
'y-alignment': 'middle',
'x-alignment': 'middle',
ref: '.question-title',
'ref-x': .5,
'ref-y': .5,
},
'.options-body': {
height: 50,
fill: '#ffffff',
rx: 5,
ry: 5,
ref: '.question-wrapper',
'ref-x': 5,
'ref-y': 40,
'ref-width': -10
},
'.options': {
ref: '.options-body',
'ref-x': 5,
'ref-y': 5
},
'.option-wrapper': {
ref: '.options'
},
'.option': {
fill: '#000000',
'font-size': 14
},
'.port-in': {
ref: '.question-wrapper',
'ref-y': 0,
'ref-x': .5,
magnet: true,
type: 'in'
},
'.port-in .port-body': {
r: 15,
fill: '#75caeb',
ref: '.port-in'
},
'.port-in .port-label': {
'font-size': 10,
fill: '#ffffff',
'x-alignment': 'middle',
'y-alignment': -10,
ref: '.port-in .port-body'
},
'.port-out': {
ref: '.question-wrapper',
magnet: true,
type: 'out'
},
'.port-out .port-body': {
r: 10,
ref: '.question-wrapper',
'ref-dy': 15,
'ref-x': .5,
fill: '#158cba',
'y-alignment': 'middle'
},
'.port-out .port-label': {
'text': 'R',
'font-size': 10,
'y-alignment': 'middle',
'x-alignment': 'middle',
fill: '#ffffff',
ref: '.port-out .port-body',
'ref-x': .5,
'ref-y': 15,
'pointer-events': 'none'
}
}
}, joint.shapes.basic.Generic.prototype.defaults),
initialize: function () {
this.attr('.question/text', this.get('question'), {silent: true});
this.onChangePosition();
this.onChangeOptions();
joint.shapes.basic.PortsModelInterface.initialize.apply(this, arguments);
},
onChangePosition: function () {
var timer;
var timer_interval = 500;
this.on('change:position', function (cellView, position) {
clearTimeout(timer);
timer = setTimeout(function () {
$.ajax({
url: routes.questionPosition.replace(':question', cellView.id),
data: position,
method: 'post',
headers: {'X-CSRF-TOKEN': $('[name="csrf_token"]').attr('content')}
});
}, timer_interval);
});
},
onChangeOptions: function () {
var options = this.get('options');
var size = this.get('size');
var optionHeight = this.get('optionHeight');
// First clean up the previously set attrs for the old options object.
// We mark every new attribute object with the `dynamic` flag set to `true`.
// This is how we recognize previously set attributes.
var attrs = this.get('attrs');
_.each(attrs, function (attrs, selector) {
if (attrs.dynamic) {
// Remove silently because we're going to update `attrs`
// later in this method anyway.
this.removeAttr(selector, {silent: true});
}
}, this);
// Collect new attrs for the new options.
var offsetY = 0;
var attrsUpdate = {};
_.each(options, function (option) {
var selector = '.option-' + option.id;
attrsUpdate[selector] = {transform: 'translate(0, ' + offsetY + ')', dynamic: true};
attrsUpdate[selector + ' .option'] = {text: option.text, dynamic: true};
offsetY += optionHeight;
}, this);
this.attr(attrsUpdate);
this.autoresize();
},
autoresize: function () {
var options = this.get('options') || [];
var gap = this.get('paddingBottom') || 15;
var height = options.length * this.get('optionHeight');
var wrapperHeight = height + this.attr('.question-title/height') + gap;
var width = joint.util.measureText(this.get('question'), {
fontSize: this.attr('.question/font-size')
}).width + (this.attr('.question-title/rx') * 6);
this.attr('.options-body/height', height);
this.resize(Math.max(this.get('minWidth'), width), wrapperHeight);
this.attr('.question-wrapper/width', width);
this.attr('.question-wrapper/height', wrapperHeight);
},
getPortAttrs: function (port, index, total, selector, type) {
var attrs = {};
var portSelector = selector + ' .port-' + type;
attrs[portSelector + ' .port-label'] = {text: port.label};
attrs[portSelector + ' .port-body'] = {
port: {
id: port.id,
type: type
}
};
if (selector === '.outPorts') {
attrs[portSelector] = {'ref-x': ((total / 2) * 30 * -1) + (index * 30) + 15};
}
return attrs;
}
}));
joint.shapes.QuestionView = joint.dia.ElementView.extend(_.extend({}, joint.shapes.basic.PortsViewInterface, {
initialize: function () {
joint.shapes.basic.PortsViewInterface.initialize.apply(this, arguments);
},
renderMarkup: function () {
joint.dia.ElementView.prototype.renderMarkup.apply(this, arguments);
// A holder for all the options.
this.$options = this.$('.options');
// Create an SVG element representing one option. This element will
// be cloned in order to create more options.
this.elOption = V(this.model.optionMarkup);
this.renderOptions();
},
renderOptions: function () {
this.$options.empty();
_.each(this.model.get('options'), function (option, index) {
var className = 'option-' + option.id;
var elOption = this.elOption.clone().addClass(className);
elOption.attr('option-id', option.id);
this.$options.append(elOption.node);
}, this);
// Apply `attrs` to the newly created SVG elements.
this.update();
}
}));

Flowchart with jsPlumb

I'm trying to create a flowchart with jsPlumb. I have two elements and I want to connect them with a line. I want a line, but not a huge dot as I currently have. I've tried setting the radius of the dot everywhere I can, but it seems unaffected and remains at the default 20px. What am I doing wrong?
<div id="start">Start</div>
<div id="msgtype">Lorem ipsum dolor sit amet</div>
jsPlumb.importDefaults({
Endpoints : [ [ 'Dot', {radius:1} ], [ 'Dot', { radius:1 } ]]
});
var connectorPaintStyle = {
lineWidth:4,
fillStyle:'#333333',
joinstyle:'round',
outlineWidth:0,
radius: 1,
}
var eleStart = jsPlumb.addEndpoint('start', {
isSource:true,
isTarget:false
});
var eleMsgtypeTop = jsPlumb.addEndpoint('msgtype', {
isTarget:true,
parameters:{
endpoint:'dot',
radius: 1
},
anchor: 'TopCenter',
radius: 1,
connectorStyle:connectorPaintStyle
});
jsPlumb.connect({ source:eleStart,
target:eleMsgtypeTop,
connectorStyle:connectorPaintStyle,
endpoint:[ 'Dot', { radius:1, hoverClass:'myEndpointHover' }],
connectorStyle:connectorPaintStyle
});
Producing this:
JSFiddle Demo

Try this: http://jsfiddle.net/GT884/1/
;(function () {
window.jsPlumbDemo = {
init: function () {
jsPlumb.importDefaults({
DragOptions: {
cursor: "pointer",
zIndex: 2000
},
HoverClass: "connector-hover"
});
var connectorStrokeColor = "rgba(50, 50, 200, 1)",
connectorHighlightStrokeColor = "rgba(180, 180, 200, 1)",
hoverPaintStyle = {
strokeStyle: "#7ec3d9"
};
var connection1 = jsPlumb.connect({
source: "start",
target: "msgtype",
connector: "Bezier",
cssClass: "c1",
endpoint: "Blank",
endpointClass: "c1Endpoint",
anchors: ["BottomCenter", [0.75, 0, 0, -1]],
paintStyle: {
lineWidth: 6,
strokeStyle: "#a7b04b",
outlineWidth: 1,
outlineColor: "#666"
},
endpointStyle: {
fillStyle: "#a7b04b"
},
hoverPaintStyle: hoverPaintStyle
});
// make all .window divs draggable
jsPlumb.draggable(jsPlumb.getSelector(".window"));
}
};
})();
jsPlumb.bind("ready", function () {
jsPlumb.init();
// chrome fix.
document.onselectstart = function () {
return false;
};
// render mode
var resetRenderMode = function (desiredMode) {
var newMode = jsPlumb.setRenderMode(desiredMode);
$(".rmode").removeClass("selected");
$(".rmode[mode='" + newMode + "']").addClass("selected");
$(".rmode[mode='canvas']").attr("disabled", !jsPlumb.isCanvasAvailable());
$(".rmode[mode='svg']").attr("disabled", !jsPlumb.isSVGAvailable());
$(".rmode[mode='vml']").attr("disabled", !jsPlumb.isVMLAvailable());
//var disableList = (newMode === jsPlumb.VML) ? ",.rmode[mode='svg']" : ".rmode[mode='vml']";
// $(disableList).attr("disabled", true);
jsPlumbDemo.init();
};
$(".rmode").bind("click", function () {
var desiredMode = $(this).attr("mode");
if (jsPlumbDemo.reset) jsPlumbDemo.reset();
jsPlumb.reset();
resetRenderMode(desiredMode);
});
// explanation div is draggable
$("#explanation,.renderMode").draggable();
resetRenderMode(jsPlumb.SVG);
});

The full, final solution was:
;(function () {
window.plumbify = {
init: function () {
jsPlumb.importDefaults({
DragOptions: {
cursor: 'pointer',
zIndex: 2000
},
HoverClass: 'connector-hover'
});
var connectorStrokeColor = 'rgba(50, 50, 200, 1)',
connectorHighlightStrokeColor = 'rgba(180, 180, 200, 1)',
paintStyle = {
lineWidth: 3,
strokeStyle: '#a7b04b',
outlineWidth: 1,
outlineColor: '#666'
},
hoverPaintStyle = {
strokeStyle: '#7ec3d9'
};
var connection1 = jsPlumb.connect({
source: 'start',
target: 'msgtype',
connector: 'Bezier',
cssClass: 'c1',
endpoint: 'Blank',
anchors: [[0.25, 1, 0, 0.5], [0.75, 0, 0, -0.5]],
paintStyle: paintStyle,
endpointStyle: {
fillStyle: '#a7b04b'
},
overlays:[
[ 'Arrow', { width:20, length:30, location:0.5, paintStyle: paintStyle } ],
],
hoverPaintStyle: hoverPaintStyle
});
// make all .window divs draggable
jsPlumb.draggable(jsPlumb.getSelector('.window'));
}
};
})();
jsPlumb.bind('ready', function () {
jsPlumb.init();
// chrome fix.
document.onselectstart = function () {
return false;
};
// render mode
var resetRenderMode = function (desiredMode) {
var newMode = jsPlumb.setRenderMode(desiredMode);
plumbify.init();
};
resetRenderMode(jsPlumb.SVG);
});
Resulting in:

jsPlumb.addEndpoint(element.id,{
...
paintStyle:{radius:1};
});