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
Related
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 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!
I am using CKEditor version 4. I am making custom styles. The problem is, when the styles are shown in the dropdown, any styles with float:right move over on the display like this:
Item 1
Item 2
FLoat right item
Normal Item
I have been trying to override the styles but it is not working. They are created dynamically with JavaScript and I am not even sure the class names to affect this.
Anyone know how I can fix this?
My code for the styles is like this:
{ name: 'Image 25% Right', element: 'span', attributes: { 'class': 'img_right_25' } },
{ name: 'Image 25% Left', element: 'span', attributes: { 'class': 'img_left_25' } },
{ name: 'Image 50% Right', element: 'span', attributes: { 'class': 'img_right_50' } },
{ name: 'Image 50% Left', element: 'span', attributes: { 'class': 'img_left_50' } },
and then
.img_right_25 {
float:right;
margin-left:10px;
}
.img_left_25 {
float:left;
margin-right:10px
}
In editor.css, try adding a rule like this:
.cke_panel_listItem * {
float:none !important;
}
Then refresh the page (make sure that the old contents of editor.css is not being used from cache!).
What this is trying to do (I haven't tested it) is force every descendant element under .cke_panel_listItem to have a float value of "none". The !important should make sure that that this rule cannot be overridden by subsequent style definitions and so the styling made by JS is disregarded.
Is is possible to for the KendoUI Chart (Area) to have multiple data labels or even a concatenation of two? I need to display both a value and a percentage for each data point. Is this something that would need to be handled on the data source side or is it on the view?
Thanks for any help.
You can use templates to format both labels and tooltips; see labels.template and tooltip.template.
The key is to reference the Property you want using dataItem ex:
dataItem.TotalDollars
template: "${ category } - #= kendo.format('{0:C}', dataItem.TotalDollars)#"
The answer above wont really help unless you have a strong understanding of the Kendo UI framework. I was having a similar issue and before I found my answer I found this question. I circled back because the answer is simple and some simple example code is really simple. Lets save everyone some clicks.
DATA RESPONSE FROM REMOTE DATA (copy and past for local binding):
[
{
"ProgramName":"Amarr Garage Doors",
"PercentageShare":50.12,
"TotalDollars":5440.000000
},
{
"ProgramName":"Monarch Egress Thermal Hinge C",
"PercentageShare":4.64,
"TotalDollars":504.000000
},
{
"ProgramName":"Monarch Egress Window Wells",
"PercentageShare":15.73,
"TotalDollars":1707.000000
},
{
"ProgramName":"Monarch Premier V Egress Windo",
"PercentageShare":16.25,
"TotalDollars":1764.000000
},
{
"ProgramName":"Organized Living Shelftech Ven",
"PercentageShare":13.27,
"TotalDollars":1440.000000
}
]
**Chart Generation Code: **
function createChart() {
$("#SubmissionSummaryByProgramChart").kendoChart({
title: {
text: "Breakdown by Program"
},
legend: {
position: "right"
},
dataSource: {
transport: {
read: {
url: "GetFooData",
dataType: "json",
data: {
Year : 2014,
Quarter : 1,
}
}
}
},
series: [{
type: "pie",
field: "PercentageShare",
categoryField: "ProgramName"
}],
tooltip: {
visible: true,
template: "${ category } - #= kendo.format('{0:C}', dataItem.TotalDollars)#"
}
});
};
$(document).ready(createChart);
Is there any way to export the kendo chart to the JPG, PNG, BMP, GIF.With the format type selection using drop downlist.
function createChart() {
$("#chart").kendoChart({
theme: $(document).data("kendoSkin") || "default",
title: {
text: "Internet Users"
},
legend: {
position: "bottom"
},
chartArea: {
//It's important that your background NOT be transparent for proper exporting
//of some file types - most noticeably Jpeg
background: "white"
},
seriesDefaults: {
type: "bar"
},
series: [{
name: "World",
data: [15.7, 16.7, 20, 23.5, 26.6]
}, {
name: "United States",
data: [67.96, 68.93, 75, 74, 78]
}],
valueAxis: {
labels: {
format: "{0}%"
}
},
categoryAxis: {
categories: [2005, 2006, 2007, 2008, 2009]
},
tooltip: {
visible: true,
format: "{0}%"
}
});
}
$(document).ready(function () {
setTimeout(function () {
// Initialize the chart with a delay to make sure
// the initial animation is visible
createChart();
}, 400);
});
this might help.
http://www.kendoui.com/code-library/dataviz/chart/kendo-ui-chart-export.aspx
found this on kendo site itself
To my knowledge Kendo doesn't offer the possibility to export the chart to a file, you need to use a third-party solution.
Server-side
If you can use a server for the export, you can choose from many tools that can export svg to bitmap.
For example if you use PHP, see this question for a detailed discussion.
Or install Inkscape on your server and than call inkscape inputfile.svg --export-png=exportfile.png, independent of what language or framework you use on the server (it need to have the possibility to execute external programs, however).
In both cases, all you need to send to the server is the actual SVG markup of the chart (note that SVG is actually a XML document). This you can get from the containing HTML element with Javascript.
If you are using the ASP.NET MVC the best course of action for you is to go with the link provided by vinbhai4u which can simplify matters considerably.
Browser-side
If you don't want or can't use the server, there is the Javascript (https://github.com/eligrey/FileSaver.js) library (Demo: http://eligrey.com/demos/FileSaver.js/ ). I think that the library can only export to PNG, though, and has some browser version limitations. Further reading: http://eligrey.com/blog/post/saving-generated-files-on-the-client-side.