Unable to have PERT graph result - AnyChart JS

Question

I am working on a university project in order to convert a file into a PERT diagram. I get this specific example to convert to PERT diagram, Which translates to AnyChart JS in this way :

var data = [
  {id: "1", duration: 2, name: "Task 1"},
  {id: "2", duration: 2, name: "Task 2",dependsOn: ["1"]},
  {id: "3", duration: 1, name: "Task 3",dependsOn: ["2"]},
  {id: "4", duration: 3, name: "Task 4",dependsOn: ["3"]},
  {id: "5", duration: 3, name: "Task 5",dependsOn: ["4"]},
  {id: "6", duration: 1, name: "Task 6",dependsOn: ["5"]},
  {id: "7", duration: 1, name: "Task 7",dependsOn: ["5"]},
  {id: "8", duration: 2, name: "Task 8",dependsOn: ["7"]},
  {id: "9", duration: 1, name: "Task 9",dependsOn: ["6", "8"]},
  {id: "10", duration: 1, name: "Task 10",dependsOn: ["6", "8"]},
  {id: "11", duration: 2, name: "Task 11",dependsOn: ["6", "8"]},
  {id: "12", duration: 1, name: "Task 12",dependsOn: ["9", "10"]},
  {id: "13", duration: 2, name: "Task 13",dependsOn: ["9", "10"]},
  {id: "14", duration: 2, name: "Task 14",dependsOn: ["12", "13"]},
  {id: "15", duration: 1, name: "Task 15",dependsOn: ["14"]}
];

HTML

<div id="container"></div>

CSS

html, body, #container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

JAVASCRIPT

anychart.onDocumentReady(function () {
  // create data
  var data = [
    {id: "1", duration: 2, name: "Task 1"},
    {id: "2", duration: 2, name: "Task 2",dependsOn: ["1"]},
    {id: "3", duration: 1, name: "Task 3",dependsOn: ["2"]},
    {id: "4", duration: 3, name: "Task 4",dependsOn: ["3"]},
    {id: "5", duration: 3, name: "Task 5",dependsOn: ["4"]},
    {id: "6", duration: 1, name: "Task 6",dependsOn: ["5"]},
    {id: "7", duration: 1, name: "Task 7",dependsOn: ["5"]},
    {id: "8", duration: 2, name: "Task 8",dependsOn: ["7"]},
    {id: "9", duration: 1, name: "Task 9",dependsOn: ["6", "8"]},
    {id: "10", duration: 1, name: "Task 10",dependsOn: ["6", "8"]},
    {id: "11", duration: 2, name: "Task 11",dependsOn: ["6", "8"]},
    {id: "12", duration: 1, name: "Task 12",dependsOn: ["9", "10"]},
    {id: "13", duration: 2, name: "Task 13",dependsOn: ["9", "10"]},
    {id: "14", duration: 2, name: "Task 14",dependsOn: ["12", "13"]},
    {id: "15", duration: 1, name: "Task 15",dependsOn: ["14"]}
  ];

  // create a chart
  var chart = anychart.pert();

  // milestones size
  chart.milestones().size(50);

  // set chart data
  chart.data(data, "as-table");

  // set the title of the chart
  chart.title("PERT Chart");

  // set the container id for the chart
  chart.container("container");

  // initiate drawing the chart
  chart.draw();
});

Code link https://playground.anychart.com/zoAA9JIO/3

Any idea how to fix this? or any JS libraries suggestions to draw pert diagram?

Answer 1

Your data is not compatible with the current version of the AnyChart PERT chart (8.8.0 version). It supports only planar data (without intersected tasks). Your data requires drawing a chart with tasks that intersect each other multiple times. Tasks 10, 11, 13 require intersections to be drawn.