How to make multiple endpoint from the source connection in jsplumb - jsplumb

I'm using jsPlumb to connect divs with multiple endpoints. I'm trying to prevent multiple connectors between the same two divs. So for example, if I have divs A, B, C, I would like to have different end points so I can connect A to B and A to C from different end points, There is nothing given about this in the documentation
Does anyone know how to do this?
Thanks!

Un grouping the drop point and the actual link creation point and defining Multiple Anchors resolved the issue
if (sd && td) {
var width = 1 / parentCount;
var left = width * idx;
var anchors = parentCount > 1 ? ["BottomCenter", [left,0,0,0]] : ["BottomCenter", "TopCenter" ],
connection = window.jsPlumb.connect({
source: s, target: t, newConnection:true, anchors: anchors
, deleteEndpointsOnDetach: true
});

Related

DC.js - Select Menu as a filter for Composite charts

My dataset is similar to this.
name,code,proc,subP,date,m,a,b,o,t
BW,1333,29,1,2015-12-29 02:30:00,10,0,0,0,10
BW,1333,29,1,2015-12-29 12:00:00,25,0,0,0,25
BW,1333,29,1,2015-12-30 12:00:00,26,0,0,0,26
BW,1333,29,2,2015-12-31 12:00:00,27,0,0,0,27
BW,1333,29,2,2016-01-01 12:00:00,26.1,4.9,1.8,0,32.8
BW,1333,29,2,2016-01-02 12:00:00,26.4,4.9,1.9,0,33.2
BW,1333,29,2,2016-01-03 12:00:00,26.2,4.9,1.9,0,33
...
NS,1212,11,1,2016-07-28 15:30:00,1.6,3.7,4.4,0,9.7
NS,1212,11,1,2016-07-29 12:00:00,17.4,2.3,0,0,19.7
NS,1212,11,1,2016-07-30 12:00:00,21,5,14.1,0,40.1
NS,1212,11,2,2016-07-31 11:12:00,18.1,3.5,6.1,0,27.7
NS,1212,11,2,2016-07-31 12:00:00,0.1,0.2,0.2,0,0.5
NS,1212,11,2,2016-08-01 12:00:00,0.1,2.7,2.6,0,5.4
I'm using a composite line chart to represent this data.
I'm using selectMenu to filter 'BW' and 'NS' records. But the composite chart remains unchanged when I use selectmenu.
I split the data into two seperate files (one with 'BW' records and the other with 'NS' records) to try to implement the data selection functionality provided in dc.js Series Chart example . That didnt work either.
Here is a fiddle with one of the charts.
Ultimately, I would like to filter multiple charts(composite, series and bubble) by 'BW' and 'NS' records with or without a select menu.
How can I implement this?
The problem isn't with your selectMenu or your composite chart, it's with the way you are reducing data.
The first parameter to group.reduce() is the add function, the second parameter is the remove function, and the final one is the initialize function.
You usually don't want to set p directly from v as you are doing:
var grp = dim.group().reduce(
function(p,v){
p.m = +v.m;
p.a = +v.a;
p.b = +v.b;
return p;
},
function(p,v){
p.m = +v.m;
p.a = +v.a;
p.b = +v.b;
return p;
},
function(){return {m:0, a:0, b:0}; });
That will only work if every key is perfectly unique and no two items ever fall in the same bin.
And you almost never want to set p from v in the remove function. That will prevent anything from ever being removed.
Instead, add and subtract the values like so:
var grp = dim.group().reduce(
function(p,v){
p.m = p.m + +v.m;
p.a = p.a + +v.a;
p.b = p.b + +v.b;
return p;
},
function(p,v){
p.m = p.m - +v.m;
p.a = p.a - +v.a;
p.b = p.b - +v.b;
return p;
},
function(){return {m:0, a:0, b:0}; });
Here's a working fork of your fiddle.

Terminal dashboard in golang using "termui"

I am working on drawing graphs on the terminal itself from inside a go code.I found this (https://github.com/gizak/termui) in golang. And used this(https://github.com/gizak/termui/blob/master/_example/gauge.go) to draw graph in my code.
Problem is this , as we can see in the code( https://github.com/gizak/termui/blob/master/_example/gauge.go ), they are passing g0,g1,g2,g3 all together in the end "termui.Render(g0, g1, g2, g3, g4)".
In my case I don't know how many gauges to draw before hand so I used a list to store gauge objects and then tried to pass list to render.
termui.Render(chartList...)
But it creates only one gauge.
This is how I am appending elements in the list.
for i := 0; i < 5; i++ {
g0 := termui.NewGauge()
g0.Percent = i
g0.Width = 50
g0.Height = 3
g0.BorderLabel = "Slim Gauge"
chartList = append(chartList, g0)
}
what I am getting is a gauge for i=4 only. when I am doing termui.Render(chartList...)
Am I doing something wrong?
PS - I have modified question based on the answer I got in this question.
Here is a good read on Variadic Functions
Take a look at the function signature of Render, https://github.com/gizak/termui/blob/master/render.go#L161
func Render(bs ...Bufferer) {
All you need to do is
termui.Render(chatList...)
assuming chartList is a []Bufferer
Edit
You are only seeing one because they are stacking on top of one-another. To see this add
g0.Height = 3
g0.Y = i * g0.Height // <-- add this line
g0.BorderLabel = "Slim Gauge"
From a quick review of the project, it appears there are ways for auto-arranging that have to do with creating rows (and probably columns). So you might want to explore that, or you will need to manually position your elements.

Is it possible to use a conditional validation rule as a custom formula in validation box in Google Spreadsheet?

I would like to set a validation in Column D (please see the published spreadsheet at the link below [1]) in such a way that it only shows the items of either column A (A3:A) or B (B3:B) (but not all the items of both columns together) depending upon the Service which is put in Col. C.
So, if somebody put "Typing Services" in C3, the cell D3 has a validation having all the items of column A (A3:A) only. And similarly, if somebody put "Translation Services" in C3, the cell D3 has a validation having all the items of column B (B3:B) only.
I believe a custom formula in validation box in column D can do it. However, i am unable to produce it.
Thank you for your solution!
[1]https://docs.google.com/spreadsheets/d/1XdcKbxKvIOSFK37zwULZns6giE9ounHPS5iHrRFkvIk/edit#gid=697587372 [1]
This should do what you want. Add this to your script editor:
function onEdit(event){
var ss=SpreadsheetApp.getActiveSpreadsheet()
var s=ss.getSheetByName("custom formula in validation")
var sheet = event.source.getActiveSheet().getName();
var lr=event.source.getActiveSheet().getLastRow()
var editedCell = event.range.getSheet().getActiveCell();
var editVal=event.range.getSheet().getActiveCell().getValue()
var editRow=event.range.getSheet().getActiveCell().getRow()
if(sheet=="custom formula in validation" && editedCell.getColumn() ==3){
if(editVal=="Typing Services"){
var validation=s.getRange(3, 1, lr,1)
var cell= s.getRange(editRow,4,1,1)
var rule = SpreadsheetApp.newDataValidation().requireValueInRange(validation).build();
cell.setDataValidation(rule);
}
if(editVal=="Translation Services"){
var validation=s.getRange(3, 2, lr,1)
var cell= s.getRange(editRow,4,1,1)
var rule = SpreadsheetApp.newDataValidation().requireValueInRange(validation).build();
cell.setDataValidation(rule);
}}}
This is a share of my test spreadsheet:
https://docs.google.com/spreadsheets/d/10lQnZ3m6wJYAC29ylZEM1Yj2vCzKljcE9zGZNn-bRiQ/edit?usp=sharing

How to draw an aggregated table with dc.js?

I've been bugged by a probably trivial issue, but I want to draw two tables grouped by dimension.
eg:
var data=[{country:"US", medal:"gold",sport:"jump",year:"2015"},
{country:"US", medal:"silver",sport:"jump",year:"2011"}
{country:"CN", medal:"gold",sport:"jump",year:"2015"}}
and would like to draw a few tables:
country medals
US 2
CN 1
and
medal qty
gold 2
silver 1
so a trivial dim + group on crossfilter, but as dataTable doesn't take "real" groups as groups... bit stuck
Any suggestion?
Generally speaking, you can use a group as the dimension for dc.dataTable if you just give it a bottom method. You can do something like this:
var cf = crossfilter(["a","a","b","b","c","d","d","d"])
var dim = cf.dimension(function(d) { return d; });
var grp = dim.group()
grp.bottom = grp.top;
var dataTable = dc.dataTable('#dataTable');
dataTable
.dimension(grp)
.group(function() { return ""; })
.size(100)
.columns(['key', 'value']);
dc.renderAll();
The problem is that you need to put all the necessary information into the group. You can either do this in a custom group, or you can create a fake group wrapping your group where you look up additional information and add it to the group when the dataTable queries the fake group.

How to set cursor position to end of text in CKEditor?

Is there a way to set the cursor to be at the end of the contents of a CKEditor?
This developer asked too, but received no answers:
http://cksource.com/forums/viewtopic.php?f=11&t=19877&hilit=cursor+end
I would like to set the focus at the end of the text inside a CKEditor. When I use:
ckEditor.focus();
It takes me to the beginning of the text already inside the CKEditor.
Dan's answer got strange results for me, but minor change (in addition to typo fix) made it work:
var range = me.editor.createRange();
range.moveToElementEditEnd( range.root );
me.editor.getSelection().selectRanges( [ range ] );
According to the documentation for CKEditor 4, you can do the following once you have the editor object.
var range = editor.createRange();
range.moveToPosition( range.root, CKEDITOR.POSITION_BEFORE_END );
editor.getSelection().selectRanges( [ range ] );
Link: http://docs.ckeditor.com/#!/api/CKEDITOR.dom.selection (under selectRanges function).
After a bit of fiddling, I've got it to work with the following code:
$(document).ready(function() {
CKEDITOR.on('instanceReady', function(ev) {
ev.editor.focus();
var s = ev.editor.getSelection(); // getting selection
var selected_ranges = s.getRanges(); // getting ranges
var node = selected_ranges[0].startContainer; // selecting the starting node
var parents = node.getParents(true);
node = parents[parents.length - 2].getFirst();
while (true) {
var x = node.getNext();
if (x == null) {
break;
}
node = x;
}
s.selectElement(node);
selected_ranges = s.getRanges();
selected_ranges[0].collapse(false); // false collapses the range to the end of the selected node, true before the node.
s.selectRanges(selected_ranges); // putting the current selection there
}
});
The idea is:
Get the root node (not body)
Advance to next node, until there are no more nodes to advance to.
Select last node.
Collapse it
Set range
Here's a similar answer to #peter-tracey. In my case my plugin is inserting a citation. If the user has made a selection, I needed to disable the selection and place the cursor at the end of the sentence.
// Obtain the current selection & range
var selection = editor.getSelection();
var ranges = selection.getRanges();
var range = ranges[0];
// Create a new range from the editor object
var newRange = editor.createRange();
// assign the newRange to move to the end of the current selection
// using the range.endContainer element.
var moveToEnd = true;
newRange.moveToElementEditablePosition(range.endContainer, moveToEnd);
// change selection
var newRanges = [newRange];
selection.selectRanges(newRanges);
// now I can insert html without erasing the previously selected text.
editor.insertHtml("<span>Hello World!</span>");
CKEditor 3.x:
on : {
'instanceReady': function(ev) {
ev.editor.focus();
var range = new CKEDITOR.dom.range( ev.editor.document );
range.collapse(false);
range.selectNodeContents( ev.editor.document.getBody() );
range.collapse(false);
ev.editor.getSelection().selectRanges( [ range ] );
}
}
based on pseudo-code provided by the developers here:
https://dev.ckeditor.com/ticket/9546#comment:3
You have to focus editor, get document object, put it in range,
collapse range (with false parameter), select body (with
selectNodeContents), collapse it (with false parameter) and finally
select range. It is best to do it all in instanceReady event.
This is the easiest solution provided by the ckeditor API. I have tested it on IE10+, ff, safari and Chrome:
range = editor.createRange();
// the first parameter is the last line text element of the ckeditor instance
range.moveToPosition(new CKEDITOR.dom.node(editor.element.$.children[pos - 1]), CKEDITOR.POSITION_BEFORE_END)
range.collapse()
editor.getSelection().selectRanges([ range ])
This will work for sure.
CKEDITOR.config.startupFocus = 'end';
have you tried ckEditor.Selection.Collapse(false);
According to CKEditor 4 documentation, another option is:
const range = this.ckeditor.createRange()
range.moveToElementEditablePosition(range.root, true)
this.ckeditor.getSelection().selectRanges([range])
Link: https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_dom_range.html#method-moveToElementEditablePosition

Resources