I use JsPlumb to connect various div. The options i use for connection is as follows,
var option = {
anchors: ["RightMiddle", "Bottom"],
connectorStyle: { strokeWidth: 0.5, stroke: "#243CA8"},
connector: ["Flowchart", { stub: [35, 70], midpoint: 0, cornerRadius: 1 }],
paintStyle: { stroke: "#243CA8", strokeWidth: 30},
overlays: [["Arrow", { location: 1, width: 65, length: 32 }]]
};
But the arrow overlaps on connector and output is not looking good.
I also tried setting overlay options 'location:-1' but still does not make any difference and also tried setting 'gap:10' for connector but it applies for both arrow overlay and connector by which the problem is still same but with space between element and connector. I cannot find anyother solution. Can anyone please suggest a solution. Thanks!
I was trying different options and accidentally came across the solution which is mentioned nowhere.
I just changed the 'location: 1' option of overlays to 'location: [0,1]' and it worked. Had no idea it was possible and it is mentioned nowhere. This is to help those who are struggling with the same issue!
Related
I am currently working on a project for my company, where I need to plot highstock charts, which show energy-data of our main buildings.
Since it is live data, new datapoints come per Websocket every few-or-so seconds. However, the graph should only show one datapoint every hour. I wanted to clear this with the highstock dataGrouping, but it does not really work. It groups the points yes, but it still shows the „transmission“, the graph-line, between them. Thus making the whole graph completely irreadable.
In an other Version of the project, the graph only shows the latest datapoint of each group (as specified in the „approximate“ object in the chart options), but also does not start a new group after the chosen Interval runs through.
I've been sitting on this problem for about 3 days now and have not found any proper completely working solution yet.
Unfortunately, due company policy and due to hooks and components necessary, which are only used here in the company, I'm not able to give you a jsfilddle or similar, even though I'd really love to. What I can do is give you the config, mabye you find something wrong there?
const options = {
plotOptions: {
series: {
dataGrouping: {
anchor: 'end',
approximation: function (groupData: unknown[]) {
return groupData[groupData.length - 1];
},
enabled: true,
forced: true,
units: [['second', [15]]],
},
marker: {
enabled: false,
radius: 2.5,
},
pointInterval: minutesToMilliseconds(30),
pointStart: currentWeekTraversed?.[0]?.[0],
},
},
}
This would be the plotOptions.
If you need any more information, let me know. I'll see then, what and how I can send it to you.
Thank you for helping. ^^
This is example how dataGrouping works with live data,
try to recreate your case in addition or use another demo from official Highcharts React wrapper page.
rangeSelector: {
allButtonsEnabled: true,
buttons: [{
type: 'minute',
count: 15,
text: '15S',
preserveDataGrouping: true,
dataGrouping: {
forced: true,
units: [
['second', [15]]
]
}
}, {
type: 'hour',
count: 1,
text: '1M',
preserveDataGrouping: true,
dataGrouping: {
forced: true,
units: [
['minute', [1]]
]
}
}
},
Demo: https://jsfiddle.net/BlackLabel/sr3oLkvu/
I am trying to make word cloud using zingcharts. But I am not able to reduce white space between the words and make the word cloud more compact.
Current Version of word cloud
I want something like this.
Ideal wordcloud version
Code for generating word cloud.
var myConfig = {
type: 'wordcloud',
options: {
words:arr,
minLength: 4,
colorType: 'palette',
palette:['#99bbff','#80aaff','#6699ff','#4d88ff','#3377ff','#1a66ff','#0055ff','#004de6','#0044cc','#003cb3','#003399'].reverse()
}
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: '500px',
width: '65%'
});
Is there any way to do this ? I was not able to find any such property in zingcharts.
Thanks.
You can adjust the spacing between words by setting the padding in the style object like so:
style: {
padding: '-1px'
}
Here is an example of modified spacing on a wordchart: https://demos.zingchart.com/view/BHHBSRA8
I have a situation similar to the example shown in http://c3js.org/samples/data_json.html My simple intention is to get the name of the row (i.e. 'www.site1.com') into the tooltip header. My problem: I cannot find it in the d-values.
Can anyone help?
You cannot find it in d-values, because it's not a value actually - it's a category.
Have a look at Category Axis example, maybe it helps you:
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250, 50, 100, 250]
]
},
axis: {
x: {
type: 'category',
categories: ['cat1', 'cat2', 'cat3', 'cat4', 'cat5', 'cat6', 'cat7', 'cat8', 'cat9']
}
}
});
I solved it by using the d-value to address the right category of my JSON, or rather the array in my JSON. (Seemed more complicated since I load the data after I create the chart.)
Using (roughly if not exactly) the same code that worked when I used it with Novus' original nvd3.js, I'm unable to get bars in a multiBarHorizontalChart to use the colors I specify for the series. (The series are the groups indicated by the circles at the top right just above the chart.) Only when I specify the colors of individual bars can I get them to be colored something other than a shade of grey. Has the API changed or is nvd3.js broken in this respect?
I used both the novus-community zip download and a clone of the project yesterday.
This sounds like the bug fixed from this pull request.
Try the latest development branch build and see if that fixes your issue.
I skimmed the Github comment thread liquidpele referenced. It sounds like I now need to call chart.color(), even though the color is being provided via datum(), as below:
var chart0;
nv.addGraph(function() {
var chart0 = nv.models.multiBarHorizontalChart()
.height(123)
.margin({top: 0, right: 20, bottom: 50, left: 175})
.x(function(d) { return d.label })
.y(function(d) { return d.value })
.stacked(true);
chart0.yAxis
.axisLabel("ylabel")
.tickFormat(d3.format(',.2f'));
d3.select("svg")
.datum([{"color": "#133353", "values": [{"value": 1.0, "label": "mydatalabel"}], "key": "mydatakey"}])
.call(chart0)
.style({ 'height': 123 });
chart0.color();
nv.utils.windowResize(chart0.update);
return chart0;
});
I've been running into an issue with clicking on JsPlumb connections. In my application, users can draw connections between JsPlumb objects, and delete them by clicking on a connection and confirming on a deletion prompt.
The specific issue that I'm having is that the connections are too thin to be able to click on easily (especially on mobile devices, for which this application is also targeted), and yet for design reasons, the width of these connections cannot be enlarged.
The solution I'm looking into is creating a sort of invisible buffer around each connection, to give the user a bit of leeway in selecting them. However, I've been looking into how I might do this, and I haven't been able to come up with anything.
Here's my JsPlumb defaults:
jsPlumb.importDefaults({
Anchors: [
["Perimeter", {
shape: "Rectangle"
}],
["Perimeter", {
shape: "Rectangle"
}]
],
Connector: ["Straight"],
ConnectionsDetachable: false,
ConnectionOverlays: [
["Arrow", {
width: 8,
length: 15,
location: 1
}],
["Label", {
label: '0',
id: "distanceLabel",
cssClass: "distance-label"
}]
],
DoNotThrowErrors: false
});
I'm pretty sure I'm not looking to add elements on top of the connections, as I still want to use the JsPlumb click event to handle deletions. If anyone has any ideas how this could be done, it would be greatly appreciated.
From API's I couldn't find any option for setting border for connections. Try connection labels as work around solution. Connection will be removed when user clicks on the label.
FIDDLE LINK
You can set label in defaults as:
jsPlumb.importDefaults({
ConnectionOverlays: [["Label", {
cssClass:"component",
label : "<div class='DCon'><div>",
location:0.4,
id:"label",
events:{
"click": function(label, evt) {
jsPlumb.detach(label.component);
},
"mouseenter": function(label, evt) {
label.component.setPaintStyle({lineWidth:1,strokeStyle:"#FF0040"});
},
"mouseexit": function(label, evt) { // Try "mouseleave" if this doesn't work.
label.component.setPaintStyle({lineWidth:1,strokeStyle:"gray"});
}
}
}]
});
I have specified the label image in the CSS:
.DCon {
background: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTk2D-dANCTuefhUI8C9Q3krWq5-J0tZpeSPY65Qc6bUuZLz1Uj);
background-size: 100% 100%;
cursor:pointer;
background-repeat: no-repeat;
height: 15px;
width: 15px;
}
You could set an invisible outline (with alpha = 0) to each connector:
PaintStyle:
{
outlineColor:"rgba(255,255,255,0)",
outlineWidth:10
}
References:
https://jsplumbtoolkit.com/doc/paint-styles.html
https://jsplumbtoolkit.com/doc/defaults.html