This is a migrated thread and some comments may be shown as answers.

Radial diagram

5 Answers 82 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Dorian
Top achievements
Rank 2
Dorian asked on 28 May 2014, 07:17 AM
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);

5 Answers, 1 is accepted

Sort by
0
Dorian
Top achievements
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
Hristo Germanov
Telerik team
answered on 30 May 2014, 06:56 AM
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
 
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
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": []
      }
    ]
  }
])
This is the example data of a bit more complex diagram that I need to display.
0
Dorian
Top achievements
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
Hristo Germanov
Telerik team
answered on 03 Jun 2014, 08:25 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Diagram
Asked by
Dorian
Top achievements
Rank 2
Answers by
Dorian
Top achievements
Rank 2
Hristo Germanov
Telerik team
Share this question
or