Gantt Chart on hierarchy is messed up

3 posts, 1 answers
  1. Mohomed
    Mohomed avatar
    22 posts
    Member since:
    Sep 2017

    Posted 10 Oct 2017 Link to this post

    Hi, I'm implementing a Gantt Chart on .NET using data from my own database. I have defined the JSON array's attributes just as in a demo on your website. The chart is plotted, but the hierarchy in which I have organized my data such as the parent-child relationships are off, i.e. the hierarchy does not work in the way the relationships are defined in the JSON data. My hierarchy is much simpler than the demo on your documentation. My JSON is as follows. As you may expect, it's a bit too long. I have also attached a screenshot of the Gantt and when you compare it with the JSON, you'd see that the hierarchy is off. Can you figure out what I've done wrong ?
    [
      {
        "ID": 23,
        "orderNo": "200023",
        "opnNo": null,
        "parentID": null,
        "startDate": "/Date(987013800000)/",
        "finDate": "/Date(987013800000)/",
        "title": "Order 1",
        "percentComplete": 0.43,
        "summary": true,
        "expanded": true
      },
      {
        "ID": 27,
        "orderNo": "200027",
        "opnNo": null,
        "parentID": null,
        "startDate": "/Date(980447400000)/",
        "finDate": "/Date(980447400000)/",
        "title": "Order 2",
        "percentComplete": 0.67,
        "summary": true,
        "expanded": true
      },
      {
        "ID": 25,
        "orderNo": "200025",
        "opnNo": null,
        "parentID": null,
        "startDate": "/Date(978373800000)/",
        "finDate": "/Date(978373800000)/",
        "title": "Order 3",
        "percentComplete": 0.56,
        "summary": true,
        "expanded": true
      },
      {
        "ID": 33,
        "orderNo": "200033",
        "opnNo": null,
        "parentID": null,
        "startDate": "/Date(-62135596800000)/",
        "finDate": "/Date(-62135596800000)/",
        "title": "Order 4",
        "percentComplete": 0.89,
        "summary": true,
        "expanded": true
      },
      {
        "ID": 100,
        "orderNo": "200023",
        "opnNo": 10,
        "parentID": 23,
        "startDate": "/Date(978083400000)/",
        "finDate": "/Date(978085800000)/",
        "title": "Filling",
        "percentComplete": 0.2,
        "summary": false,
        "expanded": true
      },
      {
        "ID": 101,
        "orderNo": "200023",
        "opnNo": 20,
        "parentID": 23,
        "startDate": "/Date(978083400000)/",
        "finDate": "/Date(978085800000)/",
        "title": "Labeling",
        "percentComplete": 0.2,
        "summary": false,
        "expanded": true
      },
      {
        "ID": 102,
        "orderNo": "200023",
        "opnNo": 30,
        "parentID": 23,
        "startDate": "/Date(978085800000)/",
        "finDate": "/Date(978089400000)/",
        "title": "Cleaning mixer",
        "percentComplete": 1,
        "summary": false,
        "expanded": true
      },
      {
        "ID": 103,
        "orderNo": "200023",
        "opnNo": 40,
        "parentID": 23,
        "startDate": "/Date(978085800000)/",
        "finDate": "/Date(978089400000)/",
        "title": "Cleaning filling line",
        "percentComplete": 1,
        "summary": false,
        "expanded": true
      },
      {
        "ID": 104,
        "orderNo": "200025",
        "opnNo": 10,
        "parentID": 25,
        "startDate": "/Date(978428880000)/",
        "finDate": "/Date(978431400000)/",
        "title": "Filling",
        "percentComplete": 0.2,
        "summary": false,
        "expanded": true
      },
      {
        "ID": 105,
        "orderNo": "200025",
        "opnNo": 20,
        "parentID": 25,
        "startDate": "/Date(978428880000)/",
        "finDate": "/Date(978431400000)/",
        "title": "Labeling",
        "percentComplete": 0.2,
        "summary": false,
        "expanded": true
      },
      {
        "ID": 106,
        "orderNo": "200025",
        "opnNo": 30,
        "parentID": 25,
        "startDate": "/Date(978431400000)/",
        "finDate": "/Date(978435000000)/",
        "title": "Cleaning mixer",
        "percentComplete": 1,
        "summary": false,
        "expanded": true
      },
      {
        "ID": 107,
        "orderNo": "200025",
        "opnNo": 40,
        "parentID": 25,
        "startDate": "/Date(978431400000)/",
        "finDate": "/Date(978435000000)/",
        "title": "Cleaning filling line",
        "percentComplete": 1,
        "summary": false,
        "expanded": true
      },
      {
        "ID": 108,
        "orderNo": "200027",
        "opnNo": 10,
        "parentID": 27,
        "startDate": "/Date(980502360000)/",
        "finDate": "/Date(980505000000)/",
        "title": "Filling",
        "percentComplete": 0.2,
        "summary": false,
        "expanded": true
      },
      {
        "ID": 109,
        "orderNo": "200027",
        "opnNo": 20,
        "parentID": 27,
        "startDate": "/Date(980502360000)/",
        "finDate": "/Date(980505000000)/",
        "title": "Labeling",
        "percentComplete": 0.2,
        "summary": false,
        "expanded": true
      },
      {
        "ID": 110,
        "orderNo": "200027",
        "opnNo": 30,
        "parentID": 27,
        "startDate": "/Date(980505000000)/",
        "finDate": "/Date(980508600000)/",
        "title": "Cleaning mixer",
        "percentComplete": 1,
        "summary": false,
        "expanded": true
      },
      {
        "ID": 111,
        "orderNo": "200027",
        "opnNo": 40,
        "parentID": 27,
        "startDate": "/Date(980505000000)/",
        "finDate": "/Date(980508600000)/",
        "title": "Cleaning filling line",
        "percentComplete": 1,
        "summary": false,
        "expanded": true
      },
      {
        "ID": 112,
        "orderNo": "200033",
        "opnNo": 10,
        "parentID": 33,
        "startDate": "/Date(987068520000)/",
        "finDate": "/Date(987071400000)/",
        "title": "Filling",
        "percentComplete": 0.4,
        "summary": false,
        "expanded": true
      },
      {
        "ID": 113,
        "orderNo": "200033",
        "opnNo": 20,
        "parentID": 33,
        "startDate": "/Date(987069240000)/",
        "finDate": "/Date(987071400000)/",
        "title": "Labeling",
        "percentComplete": 0.2,
        "summary": false,
        "expanded": true
      },
      {
        "ID": 114,
        "orderNo": "200033",
        "opnNo": 30,
        "parentID": 33,
        "startDate": "/Date(987071400000)/",
        "finDate": "/Date(987075000000)/",
        "title": "Cleaning mixer",
        "percentComplete": 1,
        "summary": false,
        "expanded": true
      },
      {
        "ID": 115,
        "orderNo": "200033",
        "opnNo": 40,
        "parentID": 33,
        "startDate": "/Date(987071400000)/",
        "finDate": "/Date(987075000000)/",
        "title": "Cleaning filling line",
        "percentComplete": 1,
        "summary": false,
        "expanded": true
      }
    ]
  2. Answer
    Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    795 posts

    Posted 12 Oct 2017 Link to this post

    Hello Mohomed,

    In order to properly display the Gantt hierarchy, you will need to configure the parentId DataSource Schema field for the chart:
    schema: {
      model: {
        id: "id",
        fields: {
          id: { from: "ID", type: "number" },
          parentId: { from: "parentID", type: "number", defaultValue: null, validation: { required: true } },
          start: { from: "startDate", type: "date" },
          end: { from: "finDate", type: "date" },
          title: { from: "title", defaultValue: "", type: "string" },
          percentComplete: { from: "percentComplete", type: "number" },
          summary: { from: "summary", type: "boolean" },
          expanded: { from: "expanded", type: "boolean", defaultValue: true }
        }
      }
    }

    Here you will find a simple Dojo, which implements the above suggestion with the JSON data sent. Note, that I have changed the start and end date for the Order 4 task as it had negative values.

    I hope, that this helps. In case you have any other questions, please do not hesitate to contact us.

    Regards,
    Veselin Tsvetanov
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Mohomed
    Mohomed avatar
    22 posts
    Member since:
    Sep 2017

    Posted 12 Oct 2017 in reply to Veselin Tsvetanov Link to this post

    Thanks for the reply, It was a spelling error of the parent ID of the JSON on the model field. It works properly now.
Back to Top