We Keep Coding

How to add number to port in GoJS?

Hi I need to add number to each of ports as you see in the picture below.
Ps. How ever I looking for resolve the problem on this site https://gojs.net/latest/intro/ports.html and I check solution with portId and TextBlock but it doesn't work :/

You are using a Shape for a port, but any GoJS object can be a port, and you really want to use a Panel (Auto Panel) with a Shape and a TextBlock as your port.
I suggest you read: https://gojs.net/latest/intro/buildingObjects.html

Hi thank you for your Answer :) hmm I try to use a Panel but I don't see change :/ What I do wrong?
this.$(go.Panel, 'Horizontal',
new go.Binding('itemArray', 'bottomArray'),
{
row: 2, column: 1,
itemTemplate:
this.$(go.Panel, 'Vertical',
{
_side: 'bottom',
fromSpot: go.Spot.Bottom, toSpot: go.Spot.Bottom, fromMaxLinks: 1,
fromLinkable: true, toLinkable: false, cursor: 'pointer'
},
new go.Binding('portId', 'portId'),
this.$(go.Shape, 'RoundedRectangle',
{
stroke: null, strokeWidth: 0,
desiredSize: portSize,
margin: new go.Margin(2, 1, 0, 1)
},
new go.Binding('fill', 'portColor')),
this.$(go.TextBlock,
new go.Binding('text', 'name'))
)
}
),

Google Table Chart Styling

It seems like the styling on google table chart not working very well. Even on their own examples on the webpage https://developers.google.com/chart/interactive/docs/examples (Customized Table Example) does not work? Like the golden border? I can´t see any?
I want to style my own google table chart and remove the border around the cells? Anyone how can get that to work I would be so happy. My code look like this.
CSS:
.remove-cell-border{
border: none;
}
chartService.js
var drawTableChart = function (data, type) {
var cssClassNames = {
'headerRow': "header-grey-font",
'tableRow': "remove-cell-border",
'headerCell': "remove-cell-border",
'tableCell': "remove-cell-border",
};
var chartObject = {
"type": type,
"display": false,
"data": data,
"options": {
"allowHtml": true,
"isStacked": "true",
"fill": 20,
"displayExactValues": false,
"cssClassNames": cssClassNames
},
"formatters": {}
};
return chartObject;
};
return {
drawTableChart: drawTableChart
};

The thing was that some other CSS was overriding my border-style. So now it is working when I changed my CSS to !important.
.remove-cell-border{
border: none !important;
}

jsPlumb Endpoint offset

First of all let me say I'm kind of new to jQuery and I'm definately new to jsPlumb altough I have checked the official documentation I've not been able to get a solution to this problem.
I have 2 draggable div elements that each have an endpoint so I can connect them to each other. The problem is when I make the connection and then drag any of the div elements around the arrow image I'm using isn't properly placed where it should be (I'm using ["RightMiddle", "LeftMiddle"] for the anchors).
Is there a way to make the images stick at the middle-right (or left) side of the div elements and not get out of place?
Here's the jsFiddle link for what I have so far, and here's the code:
$(document).ready(function () {
jsPlumb.draggable($('.table'), {
containment: '#schema'
});
var endpointOptions = {
isSource: true,
isTarget: true,
endpoint: ["Image", {
url: "http://i43.tinypic.com/1z31ac2.gif"
}],
style: {
fillStyle: 'gray'
},
maxConnections: -1,
connector: ["Flowchart", {
curviness: 5
}],
connectorStyle: {
lineWidth: 3,
strokeStyle: 'gray'
},
anchors: ["RightMiddle", "LeftMiddle"],
scope: "gray"
};
var ep01 = jsPlumb.addEndpoint("container0", endpointOptions);
var ep02 = jsPlumb.addEndpoint("container1", endpointOptions);
jsPlumb.connect({
source: ep01,
target: ep02
});
});

To make the images stick at the middle-right (or left) side of the div elements, instead of specifying both RightMiddle and LeftMiddle you can simply specify any one.
anchors: "RightMiddle", // For your image Right position suits the best

How do I access the triggering element using QTip?

I have a QTip assigned to an element as follows:
$('#myDiv').qtip({
show: { when: { event: 'click', } },
hide: { when: { event: 'unfocus' } },
style: {
border: {
width: 5,
radius: 10
},
padding: 10,
textAlign: 'center',
tip: true, // Give it a speech bubble tip with automatic corner detection
name: 'red' // Style it according to the preset 'cream' style
},
position: {
corner: {
tooltip: 'topMiddle', // Use the corner...
target: 'bottomMiddle' // ...and opposite corner
}
},
content: {
text: self.parent('.qtip').html(),
title: { text: 'My Title' }
},
});
Under 'text' in 'content', I am trying to access the innerHTML of the element that triggered this QTip to appear after being clicked on.
However, my current means of self.parent('.qtip').html(), as displayed above, is not working.
What is the standard way to do this? Thanks.

I later found the solution to this question.
To access properties of the element that triggered the QTip, one must structure the code in this way:
$("#container a").each(function() {
$(this).qtip({ // QTip code });
});
That way, one can use $(this) to access data such as innerHTML of the element that triggered the QTip.

Maybe you could set it before:
var text = $('#myDiv').text();
And use it inside the object:
text: text,

Is it possible to tell qTip 2.0 to use other attribute than 'title' as default?

How do i tell qTip to use another attribute than 'title' as default?
The reason i need to use another attribute, is because when i disable qtip and dynamically add elements with "title", the title will show when i hover my mouse over the element. Which i dont want to happen.
Thanks

In our project, we also use qTip and force it to use content of a children instead of Title attribute. The children content is hidden by default (CSS -> display:none;)
$('.tipped').each(function()
{
$elem = $(this);
$elem .qtip({
content: $elem.children('.tiptext').html(),
show: 'mouseover',
hide: 'mouseout',
position: {
corner: {
target: 'bottomMiddle',
tooltip: 'topMiddle'
}
},
style: {
tip: true,
name: 'blue',
color: '#A04242',
background: '#EEEEEE',
border: {
width: 1,
radius: 3,
color: '#4F81BD'
}
}
});
});