Radial diagram

6 posts, 1 answers
  1. Dorian
    Dorian avatar
    21 posts
    Member since:
    Nov 2013

    Posted 28 May 2014 Link to this post

    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);
  2. Dorian
    Dorian avatar
    21 posts
    Member since:
    Nov 2013

    Posted 28 May 2014 in reply to Dorian Link to this post

    While I'm at it why is the diagram being displayed with a weird 819 by 300 pixels offset.
  3. Kendo UI is VS 2017 Ready
  4. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 30 May 2014 Link to this post

    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!
     
  5. Dorian
    Dorian avatar
    21 posts
    Member since:
    Nov 2013

    Posted 30 May 2014 Link to this post

    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.
  6. Dorian
    Dorian avatar
    21 posts
    Member since:
    Nov 2013

    Posted 02 Jun 2014 Link to this post

    Just dropping by to ask if there was any progress on the matter?
  7. Answer
    Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 03 Jun 2014 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready