How can I create scroll when I drag jsplumb connections to the top of the browser?
I searched through the net but couldn't find a solution to create scrolls.
Click here to check the Demo
JSPlumb or JQuery
<script>
var targetDropOptions = {
};
connectorHoverStyle = {
lineWidth: 7,
strokeStyle: "#2e2aF8",
cursor: 'pointer'
}
//Setting up a Target endPoint
var targetColor = "#316b31";
var targetEndpoint = {
anchor: "LeftMiddle",
endpoint: ["Dot", { radius: 8}],
paintStyle: { fillStyle: targetColor },
//isSource: true,
scope: "green dot",
connectorStyle: { strokeStyle: targetColor, lineWidth: 8 },
connector: ["Flowchart", { curviness: 63}],
maxConnections: 1,
isTarget: true,
dropOptions: targetDropOptions,
connectorHoverStyle: connectorHoverStyle
};
//Setting up a Source endPoint
var sourceColor = "#ff9696";
var sourceEndpoint = {
anchor: "RightMiddle",
endpoint: ["Dot", { radius: 8}],
paintStyle: { fillStyle: sourceColor },
isSource: true,
scope: "green dot",
connectorStyle: { strokeStyle: sourceColor, lineWidth: 4 },
connector: ["Flowchart", { curviness: 63}],
maxConnections: 1,
// isTarget: true,
dropOptions: targetDropOptions,
connectorHoverStyle: connectorHoverStyle
};
jsPlumb.bind("ready", function () {
jsPlumb.animate($("#A"), { "left": 50, "top": 100 }, { duration: "slow" });
jsPlumb.animate($("#B"), { "left": 300, "top": 100 }, { duration: "slow" });
var window = jsPlumb.getSelector('.window');
jsPlumb.addEndpoint(window, targetEndpoint);
jsPlumb.addEndpoint(window, sourceEndpoint);
jsPlumb.draggable(window);
});
</script>
HTML
<div id="A" class="a window"
style="width: 100px; height: 100px; border: solid 1px;">
<strong>A</strong>
</div>
<div id="B" class="b window"
style="width: 100px; height: 100px; border: solid 1px;">
<strong>B</strong>
</div>
In my case I have one div with the properties position:relative and overflow:scroll and all shapes inside of this one make scroll up and down. I hope can help you.
Related
Click here for demo - https://dojo.telerik.com/#rikinshah/EQiMupoG
I have lots of elements for navigation in headers and icon buttons in footer. all of them are using svg > path elements.
I want to change color for all path elements except Kendo Chart which also contains path elements.
In css I use this to make all to use same color :
path {
fill: #4b4c4c
}
but this also changes color for Kendo chart background.
I tried using :not selector for div ID to fill path for kendo and also tried
chartArea: {
background: "#4b4c4c",
},
path: {
fill: "#4b4c4c"},
fill: {
color: "4b4c4c"}
none of this changes path for svg element in kendo graph.
<div id="kendoChart" class="demo-section k-content wide" style="margin-left: -3px;">
<div id="chart"></div>
</div>
function createChart() {
$("#chart").kendoChart({
theme: "flat",
chartArea: {
background: "transparent",
},
legendItemClick: function (e) {
e.preventDefault();
},
seriesDefaults: {
type: "column",
width: 90,
gap: 1,
},
legend: {
position: "bottom",
spacing: 15,
labels: {
font: "12px sans-serif",
color: "#7F7F7F"
},
},
series: [{
data: [parseFloat(($('#room-revenue1').text()).replace(/,/g, "")),
parseFloat(($('#room-revenue2').text()).replace(/,/g, "")),
parseFloat(($('#room-revenue3').text()).replace(/,/g, "")),
parseFloat(($('#room-revenue4').text()).replace(/,/g, "")),
parseFloat(($('#room-revenue5').text()).replace(/,/g, "")),
parseFloat(($('#room-revenue6').text()).replace(/,/g, "")),
parseFloat(($('#room-revenue7').text()).replace(/,/g, "")), ],
name: "Room Revenue",
color: "#4472c3",
width: 500,
tooltip: {
visible: true,
template: "#= series.name #: #= kendo.format('{0:C2}',value) #",
font: "12px sans-serif",
},
}, {
type: "line",
data: [$('#rooms-sold1').text(),
$('#rooms-sold2').text(),
$('#rooms-sold3').text(),
$('#rooms-sold4').text(),
$('#rooms-sold5').text(),
$('#rooms-sold6').text(),
$('#rooms-sold7').text()],
name: "Room Sold",
color: "#12ccbe",
axis: "Rooms Sold",
width: 2,
markers: { visible: true },
tooltip: {
visible: true,
template: "#= series.name #: #= value #",
font: "12px sans-serif",
},
}],
render: function (e) {
var el = e.sender.element;
el.find("text:contains(Room Revenue)")
.parent()
.prev("path")
.attr("stroke-width", 3);
el.find("text:contains(Room Sold)")
.parent()
.prev("path")
.attr("stroke-width", 0);
},
valueAxes: [
{
visible: false,
majorGridLines: {
visible: true,
width: 0.5,
dashType: "solid",
color: "#ededed"
}
},
{
name: "Rooms Sold",
color: "#4e4141",
visible: false,
line: { visible: false },
majorGridLines: {
visible: false
},
}],
categoryAxis: {
categories: [($('#date1').text()).substring(0, 3),
($('#date2').text()).substring(0, 3),
($('#date3').text()).substring(0, 3),
($('#date4').text()).substring(0, 3),
($('#date5').text()).substring(0, 3),
($('#date6').text()).substring(0, 3),
($('#date7').text()).substring(0, 3)],
labels: {
font: "12px sans-serif",
color: "#7F7F7F"
},
majorGridLines: {
visible: false,
},
},
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart(), 400);
I want to keep kendo chart background color / path fill color unchanged.
I tried to change the header style of the Datagrid component based on material-ui style guide. Datagrid body content is updated based on custom style but the header is not reflected the custom style changes.
the code snippet is below:
export const TableStyleProp = {
style: {
color: "#ff0000"
},
selectable: true,
headerStyle: {
color: "#ff0000"
},
bodyStyle: {}
};
const muiTheme = getMuiTheme({
table: {
backgroundColor: "#FF0000 !important"
},
thead: {
backgroundColor: "#b7cbfb"
},
tableHeader: {
borderColor: "#FF0000",
backgroundColor: "#FF0000"
},
tableHeaderColumn: {
textColor: "#FF0000",
height: 56,
spacing: 24
},
tableRow: {
hoverColor: "#FF0000",
stripeColor: "#FF0000",
selectedColor: "#FF0000",
textColor: "#FF00FF",
borderColor: "#FF0000",
height: 48
},
tableRowColumn: {
height: 48,
spacing: 24
}
});
<MuiThemeProvider muiTheme={muiTheme}>
This is described in the documentation: https://marmelab.com/admin-on-rest/List.html#custom-grid-style
I try to create new class working with fabric.js framework. This class should consist of 3 simple objects: 2 text and 1 rectangle. One of text object should be updated by time, for example each second. The problem is new value does not appear on canvas as expected, but it updates every time when you select object. Here is my code. Could anyone explain me, what should I do to make it updates by time?
var canvas = new fabric.Canvas('c');
fabric.Tag = fabric.util.createClass(fabric.Group, {
type: 'PItag',
initialize: function() {
options = {};
options.top = 0;
options.left = 0;
var defaults = {
width: 100,
height: 40,
originX: 'center',
originY: 'center'
};
var defaults1 = {
width: 100,
height: 20,
originX: 'center',
originY: 'top',
top: -20,
backgroundColor: 'red'
};
var defaults2 = {
width: 100,
height: 20,
originX: 'center',
originY: 'top',
top: 0
};
var items = [];
items[0] = new fabric.Rect($.extend({}, defaults, {
fill: '#77AAFF',
}));
items[1] = new fabric.Textbox('PI tag name', $.extend({}, defaults1, {
textAlign: 'center',
fontSize: 14
}));
items[2] = new fabric.IText('####', $.extend({}, defaults2, {
textAlign: 'center',
fontSize: 16
}));
this.callSuper('initialize', items, options);
},
getTagName: function () {
return this._objects[1].text;
},
setTagName: function (value) {
this._objects[1].text = value;
},
getValue: function () {
return this._objects[2].text;
},
setValue: function (value) {
this._objects[2].text = value;
this.canvas.renderAll();
},
_render: function(ctx) {
this.callSuper('_render', ctx);
}
});
var pi = new fabric.Tag();
pi.setTagName("Unix time");
canvas.add(pi);
setInterval(function() {
pi.setValue(Math.floor((new Date()).getTime() / 1000).toString());
canvas.renderAll();
}, 1000);
var canvas = new fabric.Canvas('c');
fabric.Tag = fabric.util.createClass(fabric.Group, {
type: 'PItag',
initialize: function() {
options = {};
options.left = 100;
options.top=100;
var defaults = {
width: 100,
height: 40,
originX: 'center',
originY: 'center'
};
var defaults1 = {
width: 100,
height: 20,
originX: 'center',
originY: 'top',
top: -20,
backgroundColor: 'red'
};
var defaults2 = {
width: 100,
height: 20,
originX: 'center',
originY: 'top',
top: 0
};
var items = [];
items[0] = new fabric.Rect($.extend({}, defaults, {
fill: '#77AAFF',
}));
items[1] = new fabric.Textbox('PI tag name', $.extend({}, defaults1, {
textAlign: 'center',
fontSize: 14
}));
items[2] = new fabric.IText('####', $.extend({}, defaults2, {
textAlign: 'center',
fontSize: 16
}));
this.callSuper('initialize', items, options);
},
getTagName: function () {
return this._objects[1].text;
},
setTagName: function (value) {
this._objects[1].text = value;
},
getValue: function () {
return this._objects[2].text;
},
setValue: function (value) {
this._objects[2].set({ text: value });
this.canvas.renderAll();
},
_render: function(ctx,noTransform) {
console.log('xs')
this.callSuper('_render', ctx);
//ctx._objects[1].text = this._objects[1].text;
}
});
var pi = new fabric.Tag();
// canvas.pi.async = true;
pi.setTagName("Unix time");
canvas.add(pi);
setInterval(function() {
pi.setValue(Math.floor((new Date()).getTime() / 1000).toString());
canvas.renderAll();
}, 1000);
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.9/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<canvas id="c" height="418" width="400" style="border: 1px solid rgb(170, 170, 170);"></canvas>
just change this function
setValue: function (value) {
this._objects[2].set({ text: value });
this.canvas.renderAll();
},
I need some help to set the width of the bars in kendo bar charts when the number of bars reduces.
Here is the jsFiddle link i am working on: http://jsfiddle.net/An59E/44/
In this example, there are 2 kendo bar charts, 1 has 6 bars and the other has 12 bars.
In the second graph the bars width is fine. Now when i remove 2 bars i need the same width of bars, instead the default behavior of the kendo is to resize bars. by setting the spacing and the gap values, the bars should resize. In this example, i have set the spacing and gaps value in series defaults attribute but it doesn't look like its working. Now the question is , how to change the width of the bars?
HMTL code:
<div id="chart1">
</div>
<div id="chart2">
</div>
JS code:
var series1= [70, 60, 40];
var series2= [-50, 40, 20];
var series3= [60, 60, -90, 60, 10, 50];
var series4= [60, 20, 20, 50, 40, 10];
$("#chart1").kendoChart({
seriesDefaults:
{
type: "column",
stack: true,
width:2,
gap: 50,
},
series:
[
{
data: series1,
color: "#00CC00",
negativeColor: "#CC0000",
spacing: 0
},
{
data: series2,
color: "#CCCCCC"
}
],
plotArea:
{
border:
{
color: "#CCCCCC",
width: 1
}
},
chartArea:
{
border:
{
color: "#CCCCCC",
width: 1
},
height: 300
},
categoryAxis:
{
pane: "top-pane",
color: "#0099FF",
majorGridLines:
{
visible: true,
},
line:
{
width: 3,
},
plotBands:
[
{from: 0, to:1, color: "#CCCCCC"},
],
},
seriesDefaults:
{
type: "column",
labels:
{
visible: true,
color: "green"
},
},
valueAxis:
{
title:
{
text: "A"
},
majorGridLines:
{
visible: false
},
labels:
{
visible: false,
},
line:
{
visible: false
}
},
tooltip: {
visible: true,
/*format: "{0}"*/
template: "Institutional Results:#=value#<br/>Institutional Target:#=value#<br/>"
}
});
$("#chart2").kendoChart({
series:
[
{
data: series3,
color: "#00CC00",
negativeColor: "#CC0000",
spacing: 0
},
{
data: series4,
color: "#CCCCCC"
}
],
plotArea:
{
border:
{
color: "#CCCCCC",
width: 1
}
},
chartArea:
{
border:
{
color: "#CCCCCC",
width: 1
},
height: 300,
},
categoryAxis:
{
pane: "top-pane",
color: "#0099FF",
majorGridLines:
{
visible: true,
},
line:
{
width: 3,
},
plotBands:
[
{from: 0, to:1, color: "#333333"},
],
/*categories: [2005, 2006, 2007, 2008, 2009, 2010],
labels:
{
margin:
{
top: 100,
}
},*/
},
seriesDefaults:
{
type: "column",
labels:
{
visible: true,
color: "green"
},
},
valueAxis:
{
title:
{
text: "O"
},
majorGridLines:
{
visible: false
},
labels:
{
visible: false,
},
line:
{
visible: false
}
},
tooltip: {
visible: true,
/*format: "{0}"*/
template: "Institutional Results:#=value#<br/>Institutional Target:#=value#<br/>"
}
});
Thanks.
just replace below code snippet in javascript and you are done!
seriesDefaults:
{
type: "column",
labels:
{
visible: true,
color: "green"
},
gap: 5,
},
In above code I have added gap value to define gap of bars which leads to make them thin which you want.
Please refer to below js fiddle.
http://jsfiddle.net/An59E/134/
Please let me know if you face any difficulty to implement the same.
How to change the color of bars in the negative axis? currently the bar has green color. How would i change the color to red? Here is the link for the jsfiddle: http://jsfiddle.net/ZPUr4/160/
Html code:
<div id="example" class="k-content">
<div id="chart"></div>
</div>
JavaScript code:
function createChart() {
$("#chart").kendoChart({
title: {
text: "Site Visitors"
},
legend: {
position: "bottom"
},
seriesDefaults: {
type: "column",
labels: {
visible: true,
background: "transparent",
}
},
series: [{
name: "Total Visits",
data: series1,
gap: 1.0,
spacing: 0,
} ],
valueAxis: {
min: -200000,
max: 200000,
axisCrossingValue: 50000,
line: {
visible: true
},
title: {
text: "Availability"
},
minorGridLines: {
visible: false,
},
color: 'blue'
},
categoryAxis: {
color: "blue",
width: 25,
majorGridLines: {
visible: false,
position: "bottom"
},
line: {
width: 3,
}
},
tooltip: {
visible: true,
format: "{0}"
}
});
}
var series1=[56000, -63000, 74000, 91000, 117000, 158000];
$(document).ready(function () {
createChart();
$("#example").bind("kendo:skinChange", createChart);
var chart = $("#chart").data("kendoChart"),
firstSeries = chart.options.series;
});
Thanks!
The color option of the series can be set as a function:
series: [{
name: "Total Visits",
data: series1,
gap: 1.0,
spacing: 0,
color: function(data) {
if (data.value < 0) {
return "green";
}
}
}
The Kendo UI version in your jsfiddle however is too old (from 2012) and doesn't support this. You should upgrade to a more recent one.
Here is the updated fiddle: http://jsfiddle.net/ZPUr4/166/