I am trying to implement a flowchart editor using jsPlumb and this is my first time using it. I have a square element (which is draggable also) and when I try to re-size it, the endpoints do not move (see 1). I use jsPlumb-2.0.7.js here.
When I used jquery.jsPlumb-1.4.1-all-min.js, the endpoints move as the element is re-sized. But, there are some problems in the endpoints of the diamond shape element in the editor (see 2). I implemented this diamond shaped element by rotating the square element by 45 degrees.
Here is how I make the elements re-sizable:
function makeResizable(classname){
$(classname).resizable({
resize : function(event, ui) {
jsPlumb.repaint(ui.helper);
}
});
}
This is my source endpoint:
var connectorPaintStyle = {
lineWidth: 4,
strokeStyle: "#61B7CF",
joinstyle: "round",
outlineColor: "white",
outlineWidth: 2
},
connectorHoverStyle = {
lineWidth: 4,
strokeStyle: "#216477",
outlineWidth: 2,
outlineColor: "white"
},
endpointHoverStyle = {
fillStyle: "#216477",
strokeStyle: "#216477"
},
sourceEndpoint = {
endpoint: "Dot",
paintStyle: {
strokeStyle: "#7AB02C",
fillStyle: "transparent",
radius: 7,
lineWidth: 3
},
isSource: true,
connector: [ "Flowchart", { stub: [40, 60], gap: 10, cornerRadius: 5, alwaysRespectStubs: true } ],
connectorStyle: connectorPaintStyle,
hoverPaintStyle: endpointHoverStyle,
connectorHoverStyle: connectorHoverStyle,
maxConnections: -1,
dragOptions: {},
overlays: [
[ "Label", {
location: [0.5, 1.5],
label: "Drag",
cssClass: "endpointSourceLabel",
visible:false
} ]
]
};
This is my target endpoint:
targetEndpoint = {
endpoint: "Dot",
paintStyle: { fillStyle: "#7AB02C", radius: 11 },
hoverPaintStyle: endpointHoverStyle,
maxConnections: -1,
dropOptions: { hoverClass: "hover", activeClass: "active" },
isTarget: true,
overlays: [
[ "Label", { location: [0.5, -0.5], label: "Drop", cssClass: "endpointTargetLabel", visible:false } ]
]
}
I use the jsPlumb.addEndpoint() method to add the endpoints.
I searched for help but could not find a suitable answer. Can anyone provide a solution for this problem?
I am posting this as an answer because it solved my problem! I used the latest version of jsPlumb-2.0.7.js and created an instance of jsPlumb.
var instance = jsPlumb.getInstance({/*Drag options and connection overlays*/});
Then I used this instance to make the elements draggable and resizable.
And also, instead of using instance.repaint(ui.helper) I used instance.revalidate(ui.helper) within the resizable function.
Then it perfectly worked!
Related
So I've read this post, where someone visualizes 4chan posts in a graph. It looks very cool so I wanted to try it out myself. Everything is working good but I'm having some problems with my visjs options.
I am trying to get as close to the options he used. Sadly he hasn't posted them anywhere.
This is what I've got so far:
var options = {
nodes: {
shape: 'dot',
scaling: {
min: 10,
max: 30,
customScalingFunction: function (min,max,total,value) { return value },
label: {
min: 8,
max: 30,
drawThreshold: 12,
maxVisible: 20
}
},
font: {
size: 12,
face: 'Tahoma'
}
},
edges: {
width: 0.15,
color: {inherit: 'from'},
smooth: {
type: 'continuous'
}
},
physics: {
barnesHut: {
springLength: 1000,
springConstant: 1,
avoidOverlap: 1
}
},
interaction: {
tooltipDelay: 200,
hideEdgesOnDrag: true
}
};
My Problem is, that they still don't seem quite right and I also have trouble with overlapping nodes.
JSFiddle
Sorry for the unclean code.
I have set set of DIVs which should be connectable using jsPlumb (v2.0.7).
Each of the div elements has an Anchor and Endpoint on all of its four sides. I'm able to create connections from these endpoints by drag and drop.
The Problem: As soon a connection between two endpoints is established, it cannot act as a source Endpoint for a new "create connection" drag operation anymore. Using such used endpoint as the target of a connection, works fine though.
The configuration looks like this:
jsPlumbConfig = {
PaintStyle: {
lineWidth: 1
outlineWidth: 5
strokeStyle: "#FFF"
outlineColor: "transparent"
}
Connector: [ "Bezier", { curviness: 69 } ]
ConnectionsDetachable: false
DeleteEndpointsOnDetach: false
ReattachConnections : false
Anchors: [ "Top", "Right", "Bottom", "Left" ]
MaxConnections: 50
Endpoint: [ "Rectangle" ]
EndpointStyle : {
paintStyle: { fillStyle:'#FFF' }
}
}
The Endpoint options are like that:
endpointOptions = {
endpoint: "Rectangle"
maxConnections: 50
connectionsDetachable: false
deleteEndpointsOnDetach: false
paintStyle: { fillStyle: "#EEE", outlineColor: "rgba(0, 0, 0, -0.8)" }
endpointHoverStyle: { fillStyle: "rgba(255, 255, 255, 0.8)" }
isSource: true
isTarget: true
}
JSFiddle: https://jsfiddle.net/v0aw81v3/
I found the solution by setting
ConnectionsDetachable: true
Strangely this doesn't remove existing connections from one Endpoint, but allows adding additional ones.
I need to remain the functionality of extensible scroll bar, but I don't need overview navigator. Like :
I need the scroll bar(area 1) to still remains extensible, but remove the navigator(area 2).
This is a design of what I want:
demo you could quickly modify from :
$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) {
// Create the chart
var chart = $('#container').highcharts('StockChart', {
rangeSelector : {
enabled: false
},
title: {
text: null
},
navigator: {
enabled:false,//make it false , but the scroll bar is not extensible
outlineWidth: 0
},
scrollbar: {
barBackgroundColor: '#ccc',
barBorderWidth: 0,
buttonBackgroundColor: '#ccc',
buttonBorderWidth: 0,
buttonArrowColor: '#fff',
buttonBorderRadius: 3,
rifleColor: '#fff',
trackBackgroundColor: 'white',
trackBorderWidth: 1,
trackBorderColor: '#ccc',
trackBorderRadius: 3
},
series: [{
type:'areaspline',
showInLegend: false,
name: 'AAPL1',
data: data
},{
type:'areaspline',
showInLegend: false,
name: 'AAPL2',
data: data.map(function(d){return [d[0],parseInt(d[1])*2 ]})
}]
});
});
});
Scrollbar can not be resized like Navigator, so I think what you really want to use is (2) Navigator and disable (1) Scrollbar. Here is simple example do to do: http://jsfiddle.net/dJbZT/183/
navigator: {
enabled:true,
outlineWidth: 0,
height: 14,
maskFill: '#cccccc',
series: {
data: [] // empty navigator
},
xAxis: {
labels: {
y: -20 // move labels outside the navigator
}
}
},
If the navigator should have background, you can add two dummy points for the series, one at the beginning of the original series and one on the end:
data: [
[data[0][0], 2],
[data[data.length - 1][0], 2]
]
Then just set color and fillOpacity for a series, to the color you want to achieve, and set yAxis.max below your dummy value (2 in my case). Working demo: http://jsfiddle.net/dJbZT/184/
I am trying to draw a vis.js network diagram and have vis load and position the nodes. I then want the physics to be disabled so the nodes can be moved by the user. I have tried this but it is not working.
var options = {
nodes: {
borderWidth:4,
size:60,
color: {
border: '#222222',
background: 'grey'
},
font:{color:'black'}
},
edges: {
arrows: {
to: {enabled: false, scaleFactor:1},
middle: {enabled: false, scaleFactor:1},
from: {enabled: false, scaleFactor:1}
},
color: 'black'
},
{ physics: enabled: false; };
Has anyone done this? if so can you provide an example or advice on best way to accomplish this. I have also read the explanation located here, but not being too familiar with java I can't figure the steps out.
Thanks
After some more work and help from the vis.js developer here is the completed code, minus the json data and some options. The trick is to use the "stabilizationIterationsDone" event and disable physics:
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: ...,
edges: ...,
physics: {
forceAtlas2Based: {
gravitationalConstant: -26,
centralGravity: 0.005,
springLength: 230,
springConstant: 0.18,
avoidOverlap: 1.5
},
maxVelocity: 146,
solver: 'forceAtlas2Based',
timestep: 0.35,
stabilization: {
enabled: true,
iterations: 1000,
updateInterval: 25
}
}
};
network = new vis.Network(container, data, options);
network.on("stabilizationIterationsDone", function () {
network.setOptions( { physics: false } );
});
I suppose you first want to let the network stabilize and only then disable physics? In that case you can load the Network with physics and stabilization enabled. Once the nodes are stabilized, the stabilized event is fired. Then you can disable the physics via network.setOptions
I was able to figure this out and the code now looks like this
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {
borderWidth:1,
size:45,
color: {
border: '#222222',
background: 'grey'
},
font:{color:'black',
size: 11,
face :'arial',
},
},
edges: {
arrows: {
to: {enabled: false, scaleFactor:1},
middle: {enabled: false, scaleFactor:1},
from: {enabled: false, scaleFactor:1}
},
color: {
color:'#848484',
highlight:'#848484',
hover: '#848484',
},
font: {
color: '#343434',
size: 11, // px
face: 'arial',
background: 'none',
strokeWidth: 5, // px
strokeColor: '#ffffff',
align:'vertical'
},
smooth: {
enabled: false, //setting to true enables curved lines
//type: "dynamic",
//roundness: 0.5
},
}
};
network = new vis.Network(container, data, options);
network.setOptions({
physics: {enabled:false}
});
}
I had to move the network.setOptions() as shown in the new code and it is now working as desired.
I a trying to plot some information using a flot graph but I can not get the values to appear on the graph. This code was part of a demo file included in a template and so i have modified it to plot the data rather than using a randomise for the values, i am getting no errors but the chart isn't working and was hoping somebody could point me in the right direction.
My code is here:
init: function()
{
// apply styling
charts.utility.applyStyle(this);
this.plot = $.plot(
$("#chart_simple"),
[{
label: "Jobs",
data: this.data.d1,
lines: {fillColor: "#dd3333"},
points: {fillColor: "#dd3333"}
},
{
label: "Resumes",
data: this.data.d2,
lines: {fillColor: "#282b30"},
points: {fillColor: "#282b30"}
}], this.options);
}
},
// lines chart with fill & without points
chart_lines_fill_nopoints:
{
// chart data
data:
{
d1: [[1,100], [2,150], [3,100]],
d2: [[1,100], [2,150], [3,100]]
},
// will hold the chart object
plot: null,
// chart options
options:
{
grid: {
show: true,
aboveData: true,
color: "#3f3f3f",
labelMargin: 5,
axisMargin: 0,
borderWidth: 0,
borderColor:null,
minBorderMargin: 5 ,
clickable: true,
hoverable: true,
autoHighlight: true,
mouseActiveRadius: 20,
backgroundColor : { }
},
series: {
grow: {active:false},
lines: {
show: true,
fill: true,
lineWidth: 2,
steps: false
},
points: {show:false}
},
legend: { position: "nw" },
yaxis: { min: 0 },
xaxis: {ticks:11, tickDecimals: 0},
colors: [],
shadowSize:1,
tooltip: true,
tooltipOpts: {
content: "%s : %y.0",
shifts: {
x: -30,
y: -50
},
defaultTheme: false
}
},
So, digging a bit, I see you are using javascript from here. Looking at a working example here, you've broken their code in the following ways:
1.) You no longer seem to have a parent charts object, so
charts.utility.applyStyle(this);
isn't going to work.
2.) The init function is part of the chart_lines_fill_nopoints object, in your cut/paste code it isn't anymore.
3.) In your sample code you never actually call the init function to draw the plot.
4.) In the options backgroundColor : { } is invalid for flot (maybe this is part of the missing charts.utility.applyStyle).
Taking all this into account here's a fiddle which makes this code work.
Generating flot plots with the above code feels unnecessarily convoluted. Perhaps it makes sense when using these templates, but if you just using this as an example of how to call flot it's not very straightforward.
Also, please next time you post a question, include all relevant information (like where you found this code and how you changed it). Taken out of context this code makes little sense.
This code is working
//Defining data for the chart
var data=
{
d1: [[1,100], [2,150], [3,100]],
d2: [[1,100], [2,150], [3,100]]
};
//Defining options for the chart
var options=
{
grid: {
show: true,
aboveData: true,
color: "#3f3f3f",
labelMargin: 5,
axisMargin: 0,
borderWidth: 0,
borderColor:null,
minBorderMargin: 5 ,
clickable: true,
hoverable: true,
autoHighlight: true,
mouseActiveRadius: 20,
backgroundColor : { }
},
series: {
grow: {active:false},
lines: {
show: true,
fill: true,
lineWidth: 2,
steps: false
},
points: {show:false}
},
legend: { position: "nw" },
yaxis: { min: 0 },
xaxis: {ticks:11, tickDecimals: 0},
colors: [],
shadowSize:1,
tooltip: true,
tooltipOpts: {
content: "%s : %y.0",
shifts: {
x: -30,
y: -50
},
defaultTheme: false
}};
// shorthand for document.ready
$(function(){
this.plot = $.plot(
$("#chart_simple"),
[{
label: "Jobs",
data: data.d1,
lines: {fillColor: "#dd3333"},
points: {fillColor: "#dd3333"}
},
{
label: "Resumes",
data: data.d2,
lines: {fillColor: "#282b30"},
points: {fillColor: "#282b30"}
}], this.options);
});
Check out the working example here on jsfiddle.