Quick Creation of Gantt Charts(Click here to download)

  Very simple to use:

    // ************START***********
      <!-- 1. Import the Gantt chart plugin -->
      <link rel="stylesheet" type="text/css" href="../../gantt/mzgantt.css" />

      <!-- 2. Define the Gantt chart container -->
      <div id="GanttChartDIV" style="width:90%;height:500px;"></div>

      // 3.Instantiate the Gantt chart
      const myGantt = MZGantt.init();

      // 4.Set the Gantt chart data
      var taskData= [{"id":11,
                      "name":"Task Name 1",
                      "plan":[{"start":"2023-07-05","end":"2023-07-06","dur":10}],
                      "resId":"Andy lau",
                      "pctComp":40,}];

      // 5.Create the Gantt chart
      myGantt.createGantt("GanttChartDIV", "day", {}, taskData);
      // ************FINISH***********

  A complete HTML example:

<!DOCTYPE html>
      <html>
          <head>
              <meta http-equiv="Content-Type" content="text/html; charset=utf-8;" />
              <!-- Import the Gantt chart plugin -->
              <link rel="stylesheet" type="text/css" href="../../gantt/mzgantt.css" />
              <script language="javascript" src="../../gantt/mzgantt.js"></script>
          </head>
          <body>
              <!-- Define the Gantt chart container -->
              <div id="GanttChartDIV" style="width:90%;height:500px;"></div>
              <script language="javascript">
                  // MZGantt.LicenseKey = "0oruALdKiUsAA4lLAkFGrAJ3g";

                  // Set the Gantt chart data
                  var taskData= [
                      {
                          "id":11,
                          "name":"Task Name 1",
                          "plan":[{"start":"2023-07-05","end":"2023-07-06","dur":10}],
                          "resId":"Andy lau",
                          "pctComp":40,

                      },
                      {	"id":12,
                          "name":"Task Name 2",
                          "plan":[{"start":"2023-07-07","end":"2023-07-16","dur":10}],
                          "resId":"Maggie",
                          "planBarColor":"#F5A9D0",
                          "pctComp":20,

                      },
                      {	"id":13,
                          "name":"Task Name 3",
                          "plan":[{"start":"2023-07-17","end":"2023-07-26","dur":10}],
                          "resId":"Stephen chow",
                          "pctComp":50,

                      }
                  ];

                  // Instantiate the Gantt chart
                  const myGantt = MZGantt.init();

                  // Create the Gantt chart
                  myGantt.createGantt("GanttChartDIV", "day", {}, taskData);
              </script>
          </body>
      </html>