html, body {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

button {

    margin: 10px 0 0 10px;

}

label {

    margin: 10px 0 0 10px;

}

input {

    width: 30px;

    margin: 10px 0 0 5px;

}

#container {

    position: absolute;

    width: 100%;

    top: 35px;

    bottom: 0;

}

anychart.onDocumentReady(function () {

​

    // create data

    data = [

      {

        id: "1",

        name: "Root",

        actualStart: Date.UTC(2018, 0, 15),

        actualEnd: Date.UTC(2018, 2, 10),

        actual: {},

        children: [

          {

            id: "1_1",

            name: "Child 1",

            actualStart: Date.UTC(2018, 0, 15),

            actualEnd: Date.UTC(2018, 0, 25)

          },

          {

            id: "1_2",

            name: "Child 2",

            actualStart: Date.UTC(2018, 0, 20),

            actualEnd: Date.UTC(2018, 1, 4)

          },

          {

            id: "1_3",

            name: "Child 3",

            actualStart: Date.UTC(2018, 1, 5),

            actualEnd: Date.UTC(2018, 1, 5)

          },

          {

            id: "1_4",

            name: "Child 4",

            actualStart: Date.UTC(2018, 1, 5),

            actualEnd: Date.UTC(2018, 1, 24)

          },

          {

            id: "1_5",

            name: "Child 5",

            actualStart: Date.UTC(2018, 1, 25),

            actualEnd: Date.UTC(2018, 2, 10)

          }

      ]}

    ];

    // create a chart

    chart = anychart.ganttProject();

​

    // set the data

    chart.data(data, "as-tree");

​

    // configure the scale

    chart.getTimeline().scale().maximum(Date.UTC(2018, 2, 15));

​

    // set the chart title

    chart.title().useHtml(true);

    chart.title("Tree Data Model: filter()<br><br>" +

                "<span style = 'color:#990000'>?</span>");

    chart.title().padding(10);

​

    // set the container id

    chart.container("container");

​

    // initiate drawing the chart

    chart.draw();

​

    // fit elements to the width of the timeline

    chart.fitAll();

});

​

​

// search for items with duration equal or greater than a given one

function filterDuration() {

​

  // reset the colors of the chart

  resetColors();

​

  // get the chart data as an instance of anychart.data.Tree

  var treeData = chart.data();

​

  // search for items

  var input = (document.getElementById("valueInput").value) * 1000 * 3600 * 24;

  var items = treeData.filter(function(item) {

    return item.get("actualEnd") - item.get("actualStart") >= input;

  });

​

  /* get the names of the found items, add them to a string variable,

  and set the fill colors of their nodes */

  var text = "";

  if (items.length == 0) {

    text = "(none)";

  } else {

    for (var i = 0; i < items.length; i++) {

      text += items[i].get("name") + ", ";

      items[i].set("actual", {fill: "#dd2c00"});

    }

    text = text.substr(0, text.length - 2);

  }

​

  // update the chart title

  chart.title("Tree Data Model: filter()<br><br><span style = 'color:#990000'>" +

              text + "</span>");

​

}

​

// reset the colors of the chart

function resetColors() {

  chart.data(data, "as-tree");

  chart.fitAll();  

}