When we update new data on .bubbles([]) all the previous bubble disappears immediately. Can we make the bubble remain there for some time and then remove them from the map using jquery animation and also display a new bubbles at certain time periods?
Below is the code:
`
</head>
<body>
<div id="container" style="position: relative; width: 100%; height: 600px"></div>
</body>
<script type="text/javascript">
var bombMap = new Datamap({
element: document.getElementById('container'),
fills: {
'USA': '#1f77b4',
'RUS': '#9467bd',
'PRK': '#ff7f0e',
'PRC': '#2ca02c',
'IND': '#e377c2',
'GBR': '#8c564b',
'FRA': '#d62728',
'PAK': '#7f7f7f',
defaultFill: '#c1b9bb' //any hex, color name or rgb/rgba value
},
geographyConfig: {
highlightOnHover: false,
popupOnHover: false
},
scope: 'world',
data: {
'RUS': {fillKey: 'RUS'},
'PRK': {fillKey: 'PRK'},
'PRC': {fillKey: 'PRC'},
'IND': {fillKey: 'IND'},
'GBR': {fillKey: 'GBR'},
'FRA': {fillKey: 'FRA'},
'PAK': {fillKey: 'PAK'},
'USA': {fillKey: 'USA'}
},
bubbleConfig: {
borderWidth: 2,
borderColor: '#FFFFFF',
popupOnHover: false,
fillOpacity: 0.45,
highlightOnHover: true,
highlightFillColor: '#FC8D59',
highlightBorderColor: 'rgba(250, 15, 160, 0.2)',
highlightBorderWidth: 2,
highlightFillOpacity: 0.85,
}
});
var bombs = [{
name: 'Joe 4',
radius: 10,
yeild: 400,
country: 'USSR',
fillKey: 'RUS',
significance: 'First fusion weapon test by the USSR (not "staged")',
date: '1953-08-12',
latitude: 50.07,
longitude: 78.43
},{
name: 'RDS-37',
radius: 10,
yeild: 1600,
country: 'USSR',
fillKey: 'RUS',
significance: 'First "staged" thermonuclear weapon test by the USSR (deployable)',
date: '1955-11-22',
latitude: 50.07,
longitude: 78.43
},
];
var options = {
popupTemplate: function (geo, data) {
return ['<div class="hoverinfo">' + data.name,
'<br/>Payload: ' + data.yeild + ' kilotons',
'<br/>Country: ' + data.country + '',
'<br/>Date: ' + data.date + '',
'</div>'].join('');
}
};
bombMap.bubbles(bombs, options);
setInterval(function(){
console.log('removing elements');
bombMap.bubbles([{
name: 'Tsar Bomba',
radius: 10,
yeild: 50000,
country: 'USSR',
fillKey: 'RUS',
significance: 'Largest thermonuclear weapon ever tested—scaled down from its initial 100 Mt design by 50%',
date: '1961-10-31',
latitude: 73.482,
longitude: 54.5854
}]);
},3000);
</script>
Source: https://github.com/markmarkoh/datamaps
Yes, you should be able to do this by using d3 to select all the current circles (bubbles) that are on your datamap. You can then use a d3 transition to fade your circles to a fill-opacity of 0.0001 before loading your new array of bubbles.
Related
I started off with this example: https://www.amcharts.com/demos/floating-bar-chart/ but want the floating-aspect also cover a date axis. This way I will be able to color a rectangular area in my charts.
I made the following changes:
Changed the x-axis to a date axis
Changed the y-axis to a value axis
Changed the data correspondingly
Changed the data-fields in the series-definition to use openValueXField, valueXField for the dates and openValueYField and valueYField for the values
Something (vertical colored lines) are displayed in the most left part of the chart but no colored areas.
When using values for both axes it works perfectly but not with dates. I hope some of you knows what is wrong here. The Amcharts Demo's only provide example with one axis.
The two source codes are included hereafter.
//
// Source Code for two numeric axis -> working
//
<meta content="text/html;charset=utf-6" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<!-- Styles -->
<style>
#chartdiv {
width: 100%;
height: 500px;
}
</style>
<!-- Resources -->
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<!-- Chart code -->
<script>
am5.ready(function() {
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var root = am5.Root.new("chartdiv");
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([
am5themes_Animated.new(root)
]);
// Create chart
// https://www.amcharts.com/docs/v5/charts/xy-chart/
var chart = root.container.children.push(am5xy.XYChart.new(root, {
panX: false,
panY: false,
wheelX: "panX",
wheelY: "zoomX",
layout: root.verticalLayout
}));
// Add legend
// https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/
var legend = chart.children.push(am5.Legend.new(root, {
centerX: am5.p50,
x: am5.p50
}))
var colors = chart.get("colors");
// Data
var data = [{
name: "John",
startTime: 8,
endTime: 11,
startValue: 10,
endValue: 14,
columnSettings: {
stroke: colors.getIndex(1),
fill: colors.getIndex(1)
}
}, {
name: "Joe",
startTime: 10,
endTime: 13,
startValue: 12,
endValue: 17,
columnSettings: {
stroke: colors.getIndex(3),
fill: colors.getIndex(3)
}
}];
// Create axes
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
var yAxis = chart.yAxes.push(
am5xy.ValueAxis.new(root, {
renderer: am5xy.AxisRendererY.new(root, {pan:"zoom"}),
})
);
var xAxis = chart.xAxes.push(
am5xy.ValueAxis.new(root, {
renderer: am5xy.AxisRendererX.new(root, {pan:"zoom"}),
})
);
// Add series
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
var series = chart.series.push(am5xy.ColumnSeries.new(root, {
name: "Income",
xAxis: xAxis,
yAxis: yAxis,
openValueXField: "startTime",
valueXField: "endTime",
openValueYField: "startValue",
valueYField: "endValue",
sequencedInterpolation: true
}));
series.columns.template.setAll({
height: am5.percent(100),
templateField: "columnSettings",
tooltipText: "[bold]{name}[/]\n{categoryY}: {valueX}"
});
series.data.setAll(data);
// Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/
series.appear();
chart.appear(1000, 100);
}); // end am5.ready()
</script>
<!-- HTML -->
<div id="chartdiv"></div>
91,31 43%
//
// Source Code for one date and one numeric axis -> NOT working
//
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<!-- Styles -->
<style>
#chartdiv {
width: 100%;
height: 500px;
}
</style>
<!-- Resources -->
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<!-- Chart code -->
<script>
am5.ready(function() {
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var root = am5.Root.new("chartdiv");
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([
am5themes_Animated.new(root)
]);
// Create chart
// https://www.amcharts.com/docs/v5/charts/xy-chart/
var chart = root.container.children.push(am5xy.XYChart.new(root, {
panX: false,
panY: false,
wheelX: "panX",
wheelY: "zoomX",
layout: root.verticalLayout
}));
// Add legend
// https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/
var legend = chart.children.push(am5.Legend.new(root, {
centerX: am5.p50,
x: am5.p50
}))
var colors = chart.get("colors");
// Data
var data = [{
name: "John",
startTime: new Date(2021, 1, 28),
endTime: new Date(2021, 3, 17),
startValue: 10,
endValue: 14,
columnSettings: {
stroke: colors.getIndex(1),
fill: colors.getIndex(1)
}
}, {
name: "Joe",
startTime: new Date(2021, 2, 5),
endTime: new Date(2021, 5, 7),
startValue: 12,
endValue: 17,
columnSettings: {
stroke: colors.getIndex(3),
fill: colors.getIndex(3)
}
}];
// Create axes
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
var yAxis = chart.yAxes.push(
am5xy.ValueAxis.new(root, {
renderer: am5xy.AxisRendererY.new(root, {pan:"zoom"}),
})
);
var xAxis = chart.xAxes.push(
am5xy.DateAxis.new(root, {
renderer: am5xy.AxisRendererX.new(root, {
pan:"zoom",
minimumDate: new Date(2021, 1, 18),
maximumDate: new Date(2021, 7, 20),
}),
})
);
// Add series
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
var series = chart.series.push(am5xy.ColumnSeries.new(root, {
name: "Income",
xAxis: xAxis,
yAxis: yAxis,
openValueXField: "startTime",
valueXField: "endTime",
openValueYField: "startValue",
valueYField: "endValue",
sequencedInterpolation: true
}));
series.columns.template.setAll({
height: am5.percent(100),
templateField: "columnSettings",
tooltipText: "[bold]{name}[/]\n{categoryY}: {valueX}"
});
series.data.setAll(data);
// Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/
series.appear();
chart.appear(1000, 100);
}); // end am5.ready()
</script>
<!-- HTML -->
<div id="chartdiv"></div>
94,3 97%
I'm new to echarts so please forgive me if this is stupid newbie request. I'm trying to rotate whole chart just like in this example of Vega Edge Bundling Example. On the right corner there is a tool and one option is also "rotate".
Example Image of Vega
I would like to do the same thing (rotate whole graph) in echarts but I can't find a way to do it. If it is possible to do it please let me know how I can do it. Thank you for any reply!
It's not perfect but I tried.
I use function to change startAngle,I don't know why the rotation is delayed.
var option = {
title: {
text: 'Referer of a Website',
subtext: 'Fake Data',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: '50%',
startAngle: 15,
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
var myChart2 = echarts.init(document.getElementById('main2'));
myChart2.setOption(option);
function rotate() {
var Angle=document.getElementById("range").value;
myChart2.setOption({
series: [{
startAngle:Angle,
}]
});
};
<html lang="Zh-TW">
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.2.2/echarts.min.js"></script>
<meta charset="utf-8">
</head>
<body>
<label class="col-lg-3 control-label">rotate</label>
<div class="col-lg-6"><input type="range" class="form-control" min="0" max="360" value="10" oninput="rotate('range')" id="range"></div>
<div id="main2" style="width:100%;height:600px;"></div
</body>
</html>
I need to replace text of particular selection when the input value has been changed.
On the initial rendering, I get an object of selections and fields.
Secondly, inputs get values of fields.
Assume I'm changing a value of the Line input, since this field controls two lines, both of those green texts should be replaced with the new one.
http://jsfiddle.net/hkvmLwfu/
Tnx
////////////////////////////////////////////////////////////////////////
/////////////// THIS FUNCTION NEEDS TO BE DEVELOPED ////////////////////
////////////////////////////////////////////////////////////////////////
function replaceTextBySelection(fieldId, fieldValue, canvas, text){
}
////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////
var canvas = new fabric.Canvas('paper');
canvas.setHeight(300);
canvas.setWidth(500);
var text = new fabric.Textbox('Sample Line 1 Line 2 Line 3', {
left: 50,
top: 10,
fontFamily: 'arial',
fill: '#333',
fontSize: 50
});
canvas.add(text);
canvas.renderAll();
const fields = {
FIELD_1: {
value: "Sample",
color: '#F00'
},
FIELD_2: {
value: "Line",
color: '#0F0'
}
}
selections = [
{
rowId: 0,
offset: 0,
length: 6,
field: "FIELD_1"
},
{
rowId: 1,
offset: 0,
length: 4,
field: "FIELD_2"
},
{
rowId: 2,
offset: 0,
length: 4,
field: "FIELD_2"
}
]
selections.map((obj)=>{
text.setSelectionStart(obj.offset);
text.setSelectionEnd(obj.offset + obj.length);
text.setSelectionStyles();
for (let i = text.selectionStart; i < text.selectionEnd; i++) {
text.insertCharStyleObject(obj.rowId, i, {
textBackgroundColor: fields[obj.field].color
})
}
canvas.renderAll();
return obj;
});
$('#FIELD_1').val( fields['FIELD_1'].value );
$('#FIELD_2').val( fields['FIELD_2'].value );
$("input").keyup(function(t){
replaceTextBySelection(this.id, this.value, canvas, text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.min.js"></script>
<canvas id="paper" width="400" height="400" style="border:1px solid #ccc"></canvas>
<input type="text" id="FIELD_1" />
<br/>
<input type="text" id="FIELD_2" />
Your example complicates things because the selections object reasons about rows, but the text doesn't actually contain rows, only spaces that get wrapped to a new line.
It gets easier if you define your text instead as
var text = new fabric.Textbox('Sample\nLine 1\nLine 2\nLine 3', {
left: 50,
top: 10,
fontFamily: 'arial',
fill: '#333',
fontSize: 50
});
Using this text I have created a functional example: http://jsfiddle.net/hkvmLwfu/12/. I'm not sure this is entirely how you want it, but you should be able to pick it up from here.
Just use \n where you want to break the line. It will work like <br/>.
I've been trying to add frozen column in my jqgrid but i found out there is bug with the last row of my data.
.
.
.
{name:'Code',index:'txt_site_code', hidden:false, align:'center', width:70, frozen:true }
.
.
}); /* end of jqgrid */
jQuery("#production").jqGrid('setFrozenColumns');
Why does the last row does not froze as it should. It will move with the horizontal scroller.
I saw the same 'bug' in trirand.com and trirand.net DEMO on FROZEN COLUMN topic. Any idea on how to solve this..?
thanks..
This happens when the height of the table is not equal to the height of the Div in which it is nested.
You can use jQuery to reassign the height of the table which is frozen.
Note: Use this on GridComplete Function.
$(".frozen-bdiv").height(j$(".frozen-bdiv").find("table").height());
The column height issue has not been resolved in jqGrid4.8.2. Using Oleg's solution from 'How to make Jqgrid frozen column word-wrap' works. See my code sample.
May you can add an onchange method.
This worked for me:
Add new height adjustment method:
function rowsHeightAdjust(){
editableRows = $("#jqGrid").find("tr");
frozenRows = $("#jqGrid_frozen").find("tr");
for (indexRow=0; indexRow<frozenRows.length;indexRow++){
if(indexRow > 0 && typeof(editableRows[indexRow]) != 'undefined') {
$(frozenRows[indexRow]).height($(editableRows[indexRow]).height());
}
}
}
Call the method on some event, eg:
//every time we change something on editable fields
$(".editable").change(function(){ rowsHeightAdjust() });
Jqgrid creates a new frozen table overlapping the editable one.
This method takes the frozen rows and makes each height match to editable row.
Hope you'll find it helpful.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom -->
<link rel="stylesheet" type="text/css" media="screen" href="/testGrid/Guriddo_jqGrid_JS_4_8_2/css/jquery-ui.css" />
<!-- The link to the CSS that the grid needs -->
<link rel="stylesheet" type="text/css" media="screen" href="/testGrid/Guriddo_jqGrid_JS_4_8_2/css/trirand/ui.jqgrid.css" />
<style type="text/css">
.ui-jqgrid .ui-jqgrid-bdiv { overflow-y: scroll;}
th.ui-th-column div {
/* see http://stackoverflow.com/a/7256972/315935 for details */
word-wrap: break-word; /* IE 5.5+ and CSS3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* CSS3 */
overflow: hidden;
height: auto !important;
vertical-align: middle;
}
.ui-jqgrid tr.jqgrow td {
white-space: normal !important;
height: auto;
vertical-align: middle;
padding-top: 2px;
padding-bottom: 2px;
}
.ui-jqgrid .ui-jqgrid-htable th.ui-th-column {
padding-top: 2px;
padding-bottom: 2px;
}
.ui-jqgrid .frozen-bdiv, .ui-jqgrid .frozen-div {
overflow: hidden;
}
</style>
</head>
<body>
<table id="list"><tr><td /></tr></table>
<script type="text/ecmascript" src="/testGrid/Guriddo_jqGrid_JS_4_8_2/js/jquery.min.js"></script>
<script type="text/ecmascript" src="/testGrid/Guriddo_jqGrid_JS_4_8_2/js/jquery-ui.min.js"></script>
<script type="text/ecmascript" src="/testGrid/Guriddo_jqGrid_JS_4_8_2/js/trirand/i18n/grid.locale-en.js"></script>
<script type="text/ecmascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<!--script type="text/javascript" src="/testGrid/jqGrid-master/jqGrid-master/js/jquery.jqGrid.js"></script-->
<script type="text/javascript" src="/testGrid/Guriddo_jqGrid_JS_4_8_2/js/trirand/jquery.jqGrid.min.js"></script>
<script type="text/javascript">
//<![CDATA[
/*global $ */
/*jslint unparam: true */
$(function () {
$(document).ready(function () {
$grid = $("#list"),
resizeColumnHeader = function () {
var rowHight, resizeSpanHeight,
// get the header row which contains
headerRow = $(this).closest("div.ui-jqgrid-view")
.find("table.ui-jqgrid-htable>thead>tr.ui-jqgrid-labels");
// reset column height
headerRow.find("span.ui-jqgrid-resize").each(function () {
this.style.height = '';
});
// increase the height of the resizing span
resizeSpanHeight = 'height: ' + headerRow.height() + 'px !important; cursor: col-resize;';
headerRow.find("span.ui-jqgrid-resize").each(function () {
this.style.cssText = resizeSpanHeight;
});
// set position of the dive with the column header text to the middle
rowHight = headerRow.height();
headerRow.find("div.ui-jqgrid-sortable").each(function () {
var $div = $(this);
$div.css('top', (rowHight - $div.outerHeight()) / 2 + 'px');
});
},
fixPositionsOfFrozenDivs = function () {
var $rows;
if (this.grid.fbDiv !== undefined) {
$rows = $('>div>table.ui-jqgrid-btable>tbody>tr', this.grid.bDiv);
$('>table.ui-jqgrid-btable>tbody>tr', this.grid.fbDiv).each(function (i) {
var rowHight = $($rows[i]).height(), rowHightFrozen = $(this).height();
if ($(this).hasClass("jqgrow")) {
$(this).height(rowHight);
rowHightFrozen = $(this).height();
if (rowHight !== rowHightFrozen) {
$(this).height(rowHight + (rowHight - rowHightFrozen));
}
}
});
$(this.grid.fbDiv).height(this.grid.bDiv.clientHeight);
$(this.grid.fbDiv).css($(this.grid.bDiv).position());
}
if (this.grid.fhDiv !== undefined) {
$rows = $('>div>table.ui-jqgrid-htable>thead>tr', this.grid.hDiv);
$('>table.ui-jqgrid-htable>thead>tr', this.grid.fhDiv).each(function (i) {
var rowHight = $($rows[i]).height(), rowHightFrozen = $(this).height();
$(this).height(rowHight);
rowHightFrozen = $(this).height();
if (rowHight !== rowHightFrozen) {
$(this).height(rowHight + (rowHight - rowHightFrozen));
}
});
$(this.grid.fhDiv).height(this.grid.hDiv.clientHeight);
$(this.grid.fhDiv).css($(this.grid.hDiv).position());
}
},
fixGboxHeight = function () {
var gviewHeight = $("#gview_" + $.jgrid.jqID(this.id)).outerHeight(),
pagerHeight = $(this.p.pager).outerHeight();
$("#gbox_" + $.jgrid.jqID(this.id)).height(gviewHeight + pagerHeight);
gviewHeight = $("#gview_" + $.jgrid.jqID(this.id)).outerHeight();
pagerHeight = $(this.p.pager).outerHeight();
$("#gbox_" + $.jgrid.jqID(this.id)).height(gviewHeight + pagerHeight);
};
// Define the grid
$("#list").jqGrid({
datatype: 'local',
//data: mydata,
colNames: ['Country', 'State', 'City', 'Attraction', 'longText', 'Zip code'],
colModel: [
{ name: 'country', width: 170, align: 'center', frozen: true, cellattr: arrtSetting, title:false},
{ name: 'state', width: 180, align: 'center', frozen: true},
{ name: 'city', width: 190 },
{ name: 'attraction', width: 120 },
{ name: 'longText', width: 80000 },
{ name: 'zip', index: 'tax', width: 160, align: 'right' }
],
cmTemplate: {sortable: false},
rowNum: 100,
//rowList: [5, 10, 20],
//pager: '#pager',
gridview: true,
hoverrows: false,
autoencode: true,
ignoreCase: true,
viewrecords: true,
loadComplete: updateSize,
resizeStop: updateSize,
//height: '100%', width: null, shrinkToFit: false,
height: '80', width: null, shrinkToFit: false,
caption: 'Grid with rowSpan attributes',
beforeSelectRow: function () {
return false;
}
});
$grid = $("#list")
jQuery("#list").jqGrid('setFrozenColumns');
$grid.jqGrid('gridResize', {
minWidth: 450,
stop: function () {
fixPositionsOfFrozenDivs.call(this);
fixGboxHeight.call(this);
},
loadComplete: function () {
fixPositionsOfFrozenDivs.call(this);
}
});
$grid.bind("jqGridResizeStop", function () {
resizeColumnHeader.call(this);
fixPositionsOfFrozenDivs.call(this);
fixGboxHeight.call(this);
});
// resizeColumnHeader.call($grid[0]);
// //$grid.jqGrid('setFrozenColumns');
// $grid.triggerHandler("jqGridAfterGridComplete");
// fixPositionsOfFrozenDivs.call($grid[0]);
// Data to be sent from various sources and aggregated...
var someLongText = "1111111111111111111111111111111111111111111111098888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww55555555555555555555555555555555555555555555555jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjsdfaddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj4324333333333333333333333333333333333333333333333333333333333333333333333333333333555555555555555555555555555555555555555555555gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxlllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllpppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd";
var mydata = [
{ country: "USA", state: "Texas", city: "Houston", attraction: "NASA", longText: someLongText, zip: "77058" , attr: {country: {rowspan: "9"}} },
{ country: "USA", state: "Texas", city: "Austin", attraction: "6th street", zip: "78704", attr: {country: {display: "none"}} },
{ country: "USA", state: "Texas", city: "Arlinton", attraction: "Cowboys Stadium", zip: "76011" , attr: {country: {display: "none"}} },
{ country: "USA", state: "Texas", city: "Plano", attraction: "XYZ place", zip: "54643" , attr: {country: {display: "none"}} },
{ country: "USA", state: "Texas", city: "Dallas", attraction: "Reunion tower", zip: "12323" , attr: {country: {display: "none"}} },
{ country: "USA", state: "California", city: "Los Angeles", attraction: "Hollywood", zip: "65456", attr: {country: {display: "none"}} },
{ country: "USA", state: "California", city: "San Francisco", attraction: "Golden Gate bridge", zip: "94129" , attr: {country: {display: "none"}} },
{ country: "USA", state: "California", city: "San Diego", attraction: "See world", zip: "56653" , attr: {country: {display: "none"}} },
{ country: "USA", state: "California", city: "Anaheim", attraction: "Disneyworld", zip: "92802" , attr: {country: {display: "none"}} }
];
// Populate grid
for (var i = 0; i < mydata.length; i++) {
$("#list").jqGrid('addRowData', "myId_" + i, mydata[i], "last");
}
resizeColumnHeader.call($grid[0]);
//$grid.jqGrid('setFrozenColumns'); Already did this.
$grid.triggerHandler("jqGridAfterGridComplete");
fixPositionsOfFrozenDivs.call($grid[0]);
});
arrtSetting = function (rowId, val, rawObject, cm) {
var attr = rawObject.attr[cm.name];
var result;
if (attr.rowspan) {
result = ' rowspan=' + '"' + 9 + '"';
}
if (attr.display) {
result = ' style="display:' + attr.display + '"';
}
result = result + ' title=" this is the tooltip for ' + rowId + '"';
return result;
};
function updateSize(){
//getting all lines in two tables by they id
var lines = $("tr", this),
flines = $("tr", "#"+$(this).attr("id")+"_frozen" );
//setting in all frozen lines height equel to grid
flines.each(function(i, item){
//i%2 check because of border collapse
$(item).height( $(lines[i]).innerHeight() - (i%2?1:0) );
});
};
});
//]]>
</script>
</body>
</html>
This is my JSFiddle
Query - When I am trying to establish the connnection between IDs A1 and B the connection pink line shows away from Div B. Below the pink line highlighted is away from Div B. This is the problem
JQuery
//Setting up drop options
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" });
jsPlumb.animate($("#C"), { "left": 540, "top": 100 }, { duration: "slow" });
jsPlumb.animate($("#D"), { "left": 780, "top": 100 }, { duration: "slow" });
var window = jsPlumb.getSelector('.window');
jsPlumb.addEndpoint(window, targetEndpoint);
jsPlumb.addEndpoint(window, sourceEndpoint);
jsPlumb.addEndpoint(jsPlumb.getSelector('#A1'), sourceEndpoint, targetEndpoint);
jsPlumb.draggable(window);
jsPlumb.importDefaults({
ConnectionOverlays: [
["Arrow", { location: 0.8}],
["Label", {
location: 0.5,
id: "label",
cssClass: "aLabel"
}]
]
});
});
HTML
<div id="A" class="a window" style="width: 100px; height: 100px; border: solid 1px;">
<strong>A</strong>
<div id="A1">
</div>
</div>
<div id="B" class="b window" style="width: 100px; height: 100px; border: solid 1px;">
<strong>B</strong>
</div>
<div id="C" class="c window" style="width: 100px; height: 100px; border: solid 1px;">
<strong>C</strong>
</div>
<div id="D" class="d window" style="width: 100px; height: 100px; border: solid 1px;">
<strong>D</strong>
</div>
I wanted to have multiple Anchors on the same Div provided ID should be the attributes for those anchors somehow.
In order to accomplish this. I first removed the extra div. Now Suppose somebody wants to display two Source Anchors. For that I made modification in
jquery.jsPlumb-1.3.16-all-min.js file
Following was the Original line of code in this file
this.makeNode = function (E, D) {
return f("circle", { cx: E[2] / 2, cy: E[3] / 2, r: E[2] / 2
}
Modification is below. I am now adding id attributes to each anchor(circle).
this.makeNode = function (E, D) {
var attr = $('#'+obj[0].endpoint.elementId).attr('actionID');
return f("circle", { cx: E[2] / 2, cy: E[3] / 2, r: E[2] / 2, id: attr
}
How am I getting the value of id ?
In, the Div shown above in the query, I added an Attribute Action and assigned some ID that I want to assign. Like below
jsPlumb.getSelector('#first').attr('actionID', 'p1');
and finally adding the EndPoint
jsPlumb.addEndpoint(jsPlumb.getSelector('#first'), sourceEndpoint);
Similarly, I can assign as many distinct Anchors in terms of IDs as much required.
jsPlumb.getSelector('#first').attr('actionID', 'p3');
jsPlumb.addEndpoint(jsPlumb.getSelector('#first'), [TopMiddle]);
How will you assign the Source ID and target ID on Connection ?
jsPlumb.bind("jsPlumbConnection", function (CurrentConnection) {
if (CurrentConnection.connection.targetId ==
CurrentConnection.connection.sourceId)
jsPlumb.detach(CurrentConnection.connection);
else {
var obj = CurrentConnection.sourceEndpoint.canvas.children[0].firstChild.id;
init(CurrentConnection.connection, obj);
}
});
init = function (connection, CircleID) {
connection.getOverlay("label").setLabel(CircleID + "-" + connection.targetId);
};
Hope this will be helpful to those users facing the same issue...