DHTMLX Gantt Performance

by aubza01

HTML

<link rel="stylesheet" type="text/css" href="//cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.css">
<script src="//cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.js"></script>
<div id="gantt_here" style="width:100%; height:100%;"></div>

JavaScript

gantt.config.autosize = true;
gantt.init('gantt_here');
gantt.parse(generateTasks());

function generateTasks({ projects = 50, tasksPerProject = 50 } = {}) {
  const data = [];
  const links = [];
  let id = 1;

  const startDate = new Date(2026, 0, 1);

  for (let p = 1; p <= projects; p++) {
    const projectId = id++;

    // --- Project (summary task)
    data.push({
      id: projectId,
      text: `Project ${p}`,
      type: 'project',
      start_date: gantt.date.date_to_str('%Y-%m-%d')(startDate),
      duration: tasksPerProject,
      progress: 0.3,
      open: true,
      parent: 0,
    });

    let prevTaskId = null;

    // --- Subtasks
    for (let t = 1; t <= tasksPerProject; t++) {
      const taskId = id++;

      const taskStart = new Date(startDate);
      taskStart.setDate(startDate.getDate() + t);

      data.push({
        id: taskId,
        text: `Task ${p}.${t}`,
        start_date: gantt.date.date_to_str('%Y-%m-%d')(taskStart),
        duration: Math.floor(Math.random() * 5) + 1,
        progress: Math.random(),
        parent: projectId,
      });

      // --- Optional: link tasks sequentially
      if (prevTaskId) {
        links.push({
          id: links.length + 1,
          source: prevTaskId,
          target: taskId,
          type: '0', // finish-to-start
        });
      }

      prevTaskId = taskId;
    }
  }

  return { data, links };
}