I am using jsplumb to represent dependencies between jobs.
Please see the below jsfiddle to see what I have so far.
JsFiddle
var arrow_template = {
connector:"StateMachine",
paintStyle:{lineWidth:3,strokeStyle:"#0060CF"},
hoverPaintStyle:{strokeStyle:"#dbe300"},
endpoint:"Blank",
anchors:["Right", "Left"],
reattach:false,
overlays:[["PlainArrow", {location:1, width:10, length:10} ]]
};
I want to add some horizontal offset to the left anchor of the connections so that it does not go over the scroll bar. Instead start from the panel border.
I have read the documentation for anchors here but I don't fully understand. When I try to play with anchor setup values I get no connections/arrows.
Appreciate any help.
Please see Anchor Offsets section:
In addition to supplying the location and orientation of an anchor, you can optionally supply two more parameters that define an offset in pixels from the given location.
So if you replace anchors:["Right", "Left"], with anchors:[[1, 0.5, 0, 0, 18, 0], "Left"], your issue will be resolved.
JSFiddle Demo
Related
I am using wavesurfer.js 4.6.0 and can create regions. I am able to change the background color of the region and dynamically set whether a region loops or not but I would also like to change the color of the left and right handles for the region.
The documentation does not show a way to set this when creating a region but if I look at the code in gitHub it has:
this.loop = Boolean(params.loop);
this.color = params.color || 'rgba(0, 0, 0, 0.1)';
// The left and right handleStyle properties can be set to 'none' for
// no styling or can be assigned an object containing CSS properties.
this.handleStyle = params.handleStyle || {
left: {},
right: {}
};
which shows how the looping and color are set. It also shows that it would take a handleStyle so that you can style the left and right handle but I cannot seem to get it to work.
Is this possible to do this? If so does someone have an example of how to set it.
I am on Angular 11.2.6 and Node 10.15.3
I found the problem. If the line:
this.handleStyle = params.handleStyle || {
to
this.handleStyle = params.params.handleStyle || {
It will work. We decided we needed some other modifications to the regions so I have just copied the regions plug-in to our code tree to make the changes.
How can I set the vertical lines related to the Category Axis which are NOT the grid ?
Watch the pictures to see what I m looking for.
It s not the grid, I don't think it's neither a trend line nor a guide. It s related to the data.
Any help will be deeply appreciated.
(I tryed to use the Editor to find it out... no magical result lol)
Amchart picture
amchart my result
This is how I fixed my problem :
somewhere after "type": "serial",
"gridAboveGraphs": true, // to get the vertical lines above the graph
And I added in "categoryAxis": { ... }
"gridAlpha": 1, // to make the vertical lines appear
"gridColor": "#ffffff", // to set the color of the lines
"gridPosition": "middle", // instead of 'start' to see the lines like I wanted
I wanna thank people who tried to help me.
Best regards.
Please see example screenshot - I cannot reproduce except on this site, it seems to be some conflict with the css but any ideas what?
Normally, plotly moves the legend at the top if there is not enough horizontal space. However, this example shows that the legend overlaps the graph. Even if I make the legend orientation horizontal, it still overlaps the graph.
Do you have any ideas why it could happen?
Adjusting the legend position in normalized coordinates should help. See also here.
I.e.:
layout = go.Layout(
legend={"x" : 1.2, "y" : 1}
)
Placing the legend outside of the plot works for me:
var layout = {
showlegend: true,
legend: {
x: 1,
}
};
Fixed by a css wizard https://tiki.org/item6567 (Luci):
.js-plotly-plot .plotly .main-svg {overflow: visible}
.js-plotly-plot .plotly .main-svg .legend {transform: translate(640px, 100px)}
I've spent a lot of time finding the solution, but i can't see any property in AmChatrts documentation that can align balloons not vertically. Actually, I just want to see all balloons, but not in one column. Can anybody help me?
There is currently no way to make the balloons stack in any different way than in once column. However, there are a few alternatives you can consider.
1) Displaying just one balloon.
To do that, set oneBalloonOnly to true:
var chart = AmCharts.makeChart("chartdiv",{
...
"chartCursor": {
"oneBalloonOnly": true
}
});
This will make the cursor display just one balloon of the closest graph.
2) Disable balloons and use a legend instead.
To disable balloons, simply set [valueBalloonsEnabled][3] in chart cursor's settings to false.
var chart = AmCharts.makeChart("chartdiv",{
...
"chartCursor": {
"valueBalloonsEnabled": false
},
"legend": {}
});
The legend will show relative value next to each graph title when you hover over the chart.
3) Consolidate values from multiple graphs into a single balloon.
To do that, use graph's balloonText property. It lets you reference to any field in data, so you can make it display values from any graph.
Here's a good example of the above.
Here's a good demo on how to do that.
I need to add a picture to a spacetree to serve as a background to a spacetree.
I have tried several ways but succeeded at none, mainly for the following 2 reasons:
- positioning on the canvas (coordinates 0,0 do not seem to be the correct positioning. it is in the minus!)
- each time the spacetree redraws, it clear the canvas.
Any help will be sincerely appreciated.
guys, what I did is straight forward: if you use the example from the infovis spacetree,
please add the following right after :
st.compute();
//optional: make a translation of the tree
st.geom.translate(new $jit.Complex(-200, 0), "current");
//what I added
//where myimage is an image I load in the DOM normally.
var ctx = st.canvas.getCtx();
var imageObj = document.getElementById("myimage");
ctx.drawImage(imageObj, -700, -500);