I am trying to do a multi-leveled diagram using a layout of layered type and radial subtype with my items coming from a datasource and my template based of the one in the demo example. The chart itself does display and the items are connected properly as to their relation but using straight connectors under 90° angle separation (0, 90, 180, 270) and not how I expected from what I've seen in the picture within the API documentation.
Is there something else I have to do to achieve this kind of connectors instead of the classic rigid structure?
Including my code for better reference on what I have so far:
function visualTemplate(options) {
var dataviz = kendo.dataviz;
var g = new dataviz.diagram.Group();
var dataItem = options.dataItem;
var bgcolor = '#' + (Math.random() * 0xFFFFFF << 0).toString(16);
g.append(new dataviz.diagram.Rectangle({
width: 100,
height: 100,
stroke: {
width: 0,
color: "black"
},
background: bgcolor
}));
g.append(new dataviz.diagram.TextBlock({
text: dataItem.name,
x: 10,
y: 25,
color: "white"
}));
g.append(new dataviz.diagram.TextBlock({
x: 10,
y: 45,
text: dataItem.ref_no,
color: "white"
}));
g.append(new dataviz.diagram.TextBlock({
x: 10,
y: 65,
width: 100,
text: dataItem.level,
color: "white"
}));
return g;
}
function createDiagram() {
$("#diagram").kendoDiagram({
dataSource: new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: "ashx/hierarchicalDiagram.ashx",
dataType: "jsonp"
}
},
schema: {
model: {
children: "items"
}
}
}),
layout: {
type: "layered",
subtype: "radial",
startRadialAngle: 0,
endRadialAngle: 60,
iterations: 500,
nodeDistanc: 80,
grid: {
width: 900,
height: 800,
componentsGridWidth: 900,
offsetX: 0,
offsetY: 0
}
},
shapeDefaults: {
visual: visualTemplate,
editable: false,
rotatable: false,
resizable: false
},
shapes: {
content: {
align: "center"
},
rotation: {
angle: 15
}
},
connectionDefaults: {
hover: {
stroke: {
color: "red"
}
},
stroke: {
color: "black"
}
}
});
var diagram = $("#diagram").getKendoDiagram();
diagram.bringIntoView(diagram.shapes, {align: "center"});
}
$(document).ready(createDiagram);
Is there something else I have to do to achieve this kind of connectors instead of the classic rigid structure?
Including my code for better reference on what I have so far:
function visualTemplate(options) {
var dataviz = kendo.dataviz;
var g = new dataviz.diagram.Group();
var dataItem = options.dataItem;
var bgcolor = '#' + (Math.random() * 0xFFFFFF << 0).toString(16);
g.append(new dataviz.diagram.Rectangle({
width: 100,
height: 100,
stroke: {
width: 0,
color: "black"
},
background: bgcolor
}));
g.append(new dataviz.diagram.TextBlock({
text: dataItem.name,
x: 10,
y: 25,
color: "white"
}));
g.append(new dataviz.diagram.TextBlock({
x: 10,
y: 45,
text: dataItem.ref_no,
color: "white"
}));
g.append(new dataviz.diagram.TextBlock({
x: 10,
y: 65,
width: 100,
text: dataItem.level,
color: "white"
}));
return g;
}
function createDiagram() {
$("#diagram").kendoDiagram({
dataSource: new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: "ashx/hierarchicalDiagram.ashx",
dataType: "jsonp"
}
},
schema: {
model: {
children: "items"
}
}
}),
layout: {
type: "layered",
subtype: "radial",
startRadialAngle: 0,
endRadialAngle: 60,
iterations: 500,
nodeDistanc: 80,
grid: {
width: 900,
height: 800,
componentsGridWidth: 900,
offsetX: 0,
offsetY: 0
}
},
shapeDefaults: {
visual: visualTemplate,
editable: false,
rotatable: false,
resizable: false
},
shapes: {
content: {
align: "center"
},
rotation: {
angle: 15
}
},
connectionDefaults: {
hover: {
stroke: {
color: "red"
}
},
stroke: {
color: "black"
}
}
});
var diagram = $("#diagram").getKendoDiagram();
diagram.bringIntoView(diagram.shapes, {align: "center"});
}
$(document).ready(createDiagram);
5 Answers, 1 is accepted
0
Dorian
Top achievements
Rank 2
Rank 2
answered on 28 May 2014, 12:21 PM
While I'm at it why is the diagram being displayed with a weird 819 by 300 pixels offset.
0
Hi Dorian,
Could you please send me your current data? Thus I will be able to observe the problem and give you a quick resolution for your current scenario.
Regards,
Hristo Germanov
Telerik
Could you please send me your current data? Thus I will be able to observe the problem and give you a quick resolution for your current scenario.
Regards,
Hristo Germanov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Dorian
Top achievements
Rank 2
Rank 2
answered on 30 May 2014, 08:09 AM
jQuery19106538087546359748_1401436497632([ { "name": 266289, "ref_no": 0, "form_desc": "Projekt", "form_id": 62, "status_desc": "Zaprt", "status_id": 999, "level": 0, "items": [ { "name": 266368, "ref_no": 266289, "form_desc": "Helpdesk", "form_id": 179, "status_desc": "Zaprt", "status_id": 999, "level": 1, "items": [ { "name": 267039, "ref_no": 266368, "form_desc": "Helpdesk", "form_id": 179, "status_desc": "Zaprt", "status_id": 999, "level": 2, "items": [ { "name": 267045, "ref_no": 267039, "form_desc": "Helpdesk", "form_id": 179, "status_desc": "Zaprt", "status_id": 999, "level": 3, "items": [] }, { "name": 267265, "ref_no": 267039, "form_desc": "Helpdesk", "form_id": 179, "status_desc": "Zaprt", "status_id": 999, "level": 3, "items": [] } ] }, { "name": 267040, "ref_no": 266368, "form_desc": "Helpdesk", "form_id": 179, "status_desc": "Zaprt", "status_id": 999, "level": 2, "items": [ { "name": 267255, "ref_no": 267040, "form_desc": "Helpdesk", "form_id": 179, "status_desc": "Zaprt", "status_id": 999, "level": 3, "items": [ { "name": 267256, "ref_no": 267255, "form_desc": "Helpdesk", "form_id": 179, "status_desc": "Zaprt", "status_id": 999, "level": 4, "items": [] }, { "name": 267257, "ref_no": 267255, "form_desc": "Helpdesk", "form_id": 179, "status_desc": "Zaprt", "status_id": 999, "level": 4, "items": [] }, { "name": 267266, "ref_no": 267255, "form_desc": "Helpdesk", "form_id": 179, "status_desc": "Zaprt", "status_id": 999, "level": 4, "items": [] }, { "name": 270669, "ref_no": 267255, "form_desc": "Helpdesk", "form_id": 179, "status_desc": "Zaprt", "status_id": 999, "level": 4, "items": [] }, { "name": 271754, "ref_no": 267255, "form_desc": "Helpdesk", "form_id": 179, "status_desc": "Zaprt", "status_id": 999, "level": 4, "items": [] }, { "name": 272881, "ref_no": 267255, "form_desc": "Helpdesk", "form_id": 179, "status_desc": "Zaprt", "status_id": 999, "level": 4, "items": [] }, { "name": 272882, "ref_no": 267255, "form_desc": "Helpdesk", "form_id": 179, "status_desc": "Zaprt", "status_id": 999, "level": 4, "items": [] }, { "name": 273929, "ref_no": 267255, "form_desc": "Helpdesk", "form_id": 179, "status_desc": "Zaprt", "status_id": 999, "level": 4, "items": [] } ] }, { "name": 267273, "ref_no": 267040, "form_desc": "Helpdesk", "form_id": 179, "status_desc": "Zaprt", "status_id": 999, "level": 3, "items": [] }, { "name": 269914, "ref_no": 267040, "form_desc": "Helpdesk", "form_id": 179, "status_desc": "Zaprt", "status_id": 999, "level": 3, "items": [] } ] }, { "name": 267041, "ref_no": 266368, "form_desc": "Helpdesk", "form_id": 179, "status_desc": "Zaprt", "status_id": 999, "level": 2, "items": [ { "name": 267271, "ref_no": 267041, "form_desc": "Helpdesk", "form_id": 179, "status_desc": "Zaprt", "status_id": 999, "level": 3, "items": [] } ] }, { "name": 267043, "ref_no": 266368, "form_desc": "Helpdesk", "form_id": 179, "status_desc": "Zaprt", "status_id": 999, "level": 2, "items": [ { "name": 267258, "ref_no": 267043, "form_desc": "Helpdesk", "form_id": 179, "status_desc": "Zaprt", "status_id": 999, "level": 3, "items": [] }, { "name": 267267, "ref_no": 267043, "form_desc": "Helpdesk", "form_id": 179, "status_desc": "Zaprt", "status_id": 999, "level": 3, "items": [] } ] }, { "name": 267044, "ref_no": 266368, "form_desc": "Helpdesk", "form_id": 179, "status_desc": "Zaprt", "status_id": 999, "level": 2, "items": [ { "name": 267079, "ref_no": 267044, "form_desc": "Helpdesk", "form_id": 179, "status_desc": "Zaprt", "status_id": 999, "level": 3, "items": [] }, { "name": 267254, "ref_no": 267044, "form_desc": "Helpdesk", "form_id": 179, "status_desc": "Zaprt", "status_id": 999, "level": 3, "items": [] } ] }, { "name": 267303, "ref_no": 266368, "form_desc": "Helpdesk", "form_id": 179, "status_desc": "Zaprt", "status_id": 999, "level": 2, "items": [] }, { "name": 275595, "ref_no": 266368, "form_desc": "Helpdesk", "form_id": 179, "status_desc": "Zaprt", "status_id": 999, "level": 2, "items": [] }, { "name": 276107, "ref_no": 266368, "form_desc": "Helpdesk", "form_id": 179, "status_desc": "Usklajevanje", "status_id": 1018, "level": 2, "items": [] }, { "name": 276742, "ref_no": 266368, "form_desc": "Helpdesk", "form_id": 179, "status_desc": "Usklajevanje", "status_id": 1018, "level": 2, "items": [] }, { "name": 278246, "ref_no": 266368, "form_desc": "Helpdesk", "form_id": 179, "status_desc": "Usklajevanje", "status_id": 1018, "level": 2, "items": [] } ] }, { "name": 266989, "ref_no": 266289, "form_desc": "Helpdesk", "form_id": 179, "status_desc": "Zaprt", "status_id": 999, "level": 1, "items": [] }, { "name": 267104, "ref_no": 266289, "form_desc": "Helpdesk", "form_id": 179, "status_desc": "Zaprt", "status_id": 999, "level": 1, "items": [] }, { "name": 267588, "ref_no": 266289, "form_desc": "Helpdesk", "form_id": 179, "status_desc": "Zaprt", "status_id": 999, "level": 1, "items": [] }, { "name": 268070, "ref_no": 266289, "form_desc": "Helpdesk", "form_id": 179, "status_desc": "Zaprt", "status_id": 999, "level": 1, "items": [ { "name": 268119, "ref_no": 268070, "form_desc": "Knowledge base", "form_id": 99, "status_desc": "Prijavljen", "status_id": -1, "level": 2, "items": [] } ] }, { "name": 268224, "ref_no": 266289, "form_desc": "Helpdesk", "form_id": 179, "status_desc": "Zaprt", "status_id": 999, "level": 1, "items": [] }, { "name": 274135, "ref_no": 266289, "form_desc": "Helpdesk", "form_id": 179, "status_desc": "Zaprt", "status_id": 999, "level": 1, "items": [] }, { "name": 274550, "ref_no": 266289, "form_desc": "Helpdesk", "form_id": 179, "status_desc": "Zaprt", "status_id": 999, "level": 1, "items": [] } ] }])0
Dorian
Top achievements
Rank 2
Rank 2
answered on 02 Jun 2014, 09:32 AM
Just dropping by to ask if there was any progress on the matter?
0
Accepted
Hello Dorian,
1) While I'm at it why is the diagram being displayed with a weird 819 by 300 pixels offset. - This is a bug in the Kendo Diagram and I will log it for the investigation and fix.
2) For now you can't change the connections type to be a straight line from one connector to another but we will try to resolve this issue too.
For the both issues I can't give you a workaround. Please excuse us for the inconvenience.
I have updated your points.
Regards,
Hristo Germanov
Telerik
1) While I'm at it why is the diagram being displayed with a weird 819 by 300 pixels offset. - This is a bug in the Kendo Diagram and I will log it for the investigation and fix.
2) For now you can't change the connections type to be a straight line from one connector to another but we will try to resolve this issue too.
For the both issues I can't give you a workaround. Please excuse us for the inconvenience.
I have updated your points.
Regards,
Hristo Germanov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!