Table of Contents
How can I build a weekly task distribution Gantt chart?
Javascript:const dataSource = { chart: { caption: "Weekly Maintenance Checks for Denver Plant", subcaption: "Sun Industries", dateformat: "mm/dd/yyyy hh:mm:ss", outputdateformat: "ddds mnl, yyyy hh12:mn ampm", theme: "fusion", plottooltext: "<b>$label</b><br>Start: <b>$start</b><br>End: <b>$end</b>" }, tasks: { showlabels: "0", color: "#5D62B5", task: [ { processid: "MC7", start: "04/02/2018 12:00:00", end: "04/02/2018 23:00:00", label: "11 Hrs" }, { processid: "MC7", start: "04/04/2018 12:00:00", end: "04/04/2018 23:00:00", label: "11 Hrs" }, { processid: "MC7", start: "04/06/2018 12:00:00", end: "04/06/2018 23:00:00", label: "11 Hrs" }, { processid: "MC6", start: "04/02/2018 8:00:00", end: "04/02/2018 16:00:00", label: "8 Hrs" }, { processid: "MC6", start: "04/07/2018 8:00:00", end: "04/07/2018 16:00:00", label: "8 Hrs" }, { processid: "MC5", start: "04/04/2018 10:00:00", end: "04/04/2018 23:00:00", label: "13 Hrs" }, { processid: "MC4", start: "04/03/2018 13:30:00", end: "04/03/2018 22:30:00", label: "9 Hrs" }, { processid: "MC4", start: "04/06/2018 13:30:00", end: "04/06/2018 22:30:00", label: "9 Hrs" }, { processid: "MC3", start: "04/05/2018 11:30:00", end: "04/05/2018 22:30:00", label: "11 Hrs" }, { processid: "MC2", start: "04/07/2018 13:30:00", end: "04/07/2018 23:30:00", label: "10 Hrs" }, { processid: "MC1", start: "04/04/2018 11:45:00", end: "04/04/2018 23:45:00", label: "12 Hrs" } ] }, processes: { align: "left", headertext: "Tasks", headervalign: "middle", headeralign: "left", process: [ { label: "Bedplate Latch Bolts", id: "MC1" }, { label: "Bedplate Hydraulic Hoses", id: "MC2" }, { label: "Dust Stops Leakage", id: "MC3" }, { label: "Mixing Chamber Oiling", id: "MC4" }, { label: "Latch Stroke", id: "MC5" }, { label: "Latch Cylinder Leakage", id: "MC6" }, { label: "Latch Fastener Tightness", id: "MC7" } ] }, categories: [ { category: [ { start: "04/02/2018 00:00:00", end: "04/02/2018 23:59:59", label: "Monday" }, { start: "04/03/2018 00:00:00", end: "04/03/2018 23:59:59", label: "Tuesday" }, { start: "04/04/2018 00:00:00", end: "04/04/2018 23:59:59", label: "Wednesday" }, { start: "04/05/2018 00:00:00", end: "04/05/2018 23:59:59", label: "Thursday" }, { start: "04/06/2018 00:00:00", end: "04/06/2018 23:59:59", label: "Friday" }, { start: "04/07/2018 00:00:00", end: "04/07/2018 23:59:59", label: "Saturday" } ] } ] }; FusionCharts.ready(function() { var myChart = new FusionCharts({ type: "gantt", renderAt: "chart-container", width: "100%", height: "100%", dataFormat: "json", dataSource }).render(); });HTML:
<div id="chart-container"></div>
How can I build an hourly tasks Gantt chart?
Javascript:const dataSource = { tasks: { showlabels: "1", color: "#5D62B5", task: [ { processid: "EMP120", start: "07:00:00", end: "16:00:00", label: "Morning Shift" }, { processid: "EMP121", start: "14:00:00", end: "22:00:00", label: "Afternoon Shift" }, { processid: "EMP122", start: "14:00:00", end: "18:30:00", label: "Half Day" }, { processid: "EMP123", start: "07:00:00", end: "16:00:00", label: "Morning Shift" }, { processid: "EMP124", start: "14:00:00", end: "22:00:00", label: "Afternoon Shift" }, { processid: "EMP125", start: "00:00:00", end: "08:00:00", label: "Early Morning support" }, { processid: "EMP126", start: "07:00:00", end: "11:30:00", label: "Half Day" } ] }, processes: { fontsize: "12", isbold: "1", align: "Center", headertext: "Employee", headerfontsize: "14", headervalign: "middle", headeralign: "left", process: [ { label: "Betty", id: "EMP120" }, { label: "William", id: "EMP121" }, { label: "Emma", id: "EMP122" }, { label: "Oliver", id: "EMP123" }, { label: "Lucas", id: "EMP124" }, { label: "Alex", id: "EMP125" }, { label: "John", id: "EMP126" } ] }, categories: [ { category: [ { start: "00:00:00", end: "23:59:59", label: "Time" } ] }, { align: "center", category: [ { start: "00:00:00", end: "02:59:59", label: "Midnight" }, { start: "03:00:00", end: "05:59:59", label: "3 AM" }, { start: "06:00:00", end: "08:59:59", label: "6 AM" }, { start: "09:00:00", end: "11:59:59", label: "9 AM" }, { start: "12:00:00", end: "14:59:59", label: "12 PM" }, { start: "15:00:00", end: "17:59:59", label: "3 PM" }, { start: "18:00:00", end: "20:59:59", label: "6 PM" }, { start: "21:00:00", end: "23:59:59", label: "9 PM" } ] } ], chart: { dateformat: "dd/mm/yyyy", outputdateformat: "hh12:mn ampm", caption: "Shift Roster for June", subcaption: "Customer Success Team<br>Sensibill", ganttpaneduration: "22", ganttpanedurationunit: "h", scrolltodate: "09:00:00", useverticalscrolling: "0", theme: "fusion" } }; FusionCharts.ready(function() { var myChart = new FusionCharts({ type: "gantt", renderAt: "chart-container", width: "100%", height: "100%", dataFormat: "json", dataSource }).render(); });HTML:
<div id="chart-container"></div>
How can I build a milestone indicators Gantt chart?
Javascript:const dataSource = { chart: { dateformat: "mm/dd/yyyy", theme: "fusion", useverticalscrolling: "0" }, datatable: { headervalign: "bottom", datacolumn: [ { headertext: "Owner", headervalign: "bottom", headeralign: "left", align: "left", text: [ { label: "Product Team" }, { label: "Marketing Team" }, { label: "Product Team" }, { label: "Dev Team" }, { label: "Design Team" }, { label: "Dev Team" }, { label: "QA Team" }, { label: "Product Team" }, { label: "Marketing Team" } ] } ] }, milestones: { milestone: [ { date: "2/11/2018", taskid: "4", color: "#F2726F", shape: "star", tooltext: "Prototyping Approved" }, { date: "3/11/2018", taskid: "6", color: "#F2726F", shape: "star", tooltext: "Development Completed" }, { date: "3/23/2018", taskid: "8", color: "#F2726F", shape: "star", tooltext: "UAT Tests Passed" }, { date: "3/29/2018", taskid: "9", color: "#F2726F", shape: "star", tooltext: "Product Launched" } ] }, tasks: { task: [ { id: "1", start: "1/1/2018", end: "1/13/2018", color: "#5D62B5" }, { id: "2", start: "1/4/2018", end: "1/21/2018", color: "#29C3BE" }, { id: "3", start: "1/22/2018", end: "2/4/2018", color: "#5D62B5" }, { id: "4", start: "2/5/2018", end: "2/11/2018", color: "#67CDF2" }, { id: "5", start: "2/12/2018", end: "2/18/2018", color: "#FFC533" }, { id: "6", start: "2/19/2018", end: "3/11/2018", color: "#67CDF2" }, { id: "7", start: "3/12/2018", end: "3/18/2018", color: "#62B58F" }, { id: "8", start: "3/16/2018", end: "3/23/2018", color: "#5D62B5" }, { id: "9", start: "3/24/2018", end: "3/29/2018", color: "#29C3BE" } ] }, processes: { align: "left", headertext: "Tasks", headervalign: "bottom", headeralign: "left", process: [ { label: "PRD & User-Stories" }, { label: "Persona & Journey" }, { label: "Architecture" }, { label: "Prototyping" }, { label: "Design" }, { label: "Development" }, { label: "Testing & QA" }, { label: "UAT Test" }, { label: "Handover & Documentation" } ] }, categories: [ { category: [ { start: "1/1/2018", end: "4/1/2018", label: "Project Pipeline for Q1-2018" } ] }, { category: [ { start: "1/1/2018", end: "1/31/2018", label: "Jan" }, { start: "2/1/2018", end: "2/28/2018", label: "Feb" }, { start: "3/1/2018", end: "4/1/2018", label: "Mar" } ] }, { category: [ { start: "1/1/2018", end: "1/7/2018", label: "Week 1" }, { start: "1/8/2018", end: "1/14/2018", label: "Week 2" }, { start: "1/15/2018", end: "1/21/2018", label: "Week 3" }, { start: "1/22/2018", end: "1/28/2018", label: "Week 4" }, { start: "1/29/2018", end: "2/4/2018", label: "Week 5" }, { start: "2/5/2018", end: "2/11/2018", label: "Week 6" }, { start: "2/12/2018", end: "2/18/2018", label: "Week 7" }, { start: "2/19/2018", end: "2/25/2018", label: "Week 8" }, { start: "2/26/2018", end: "3/4/2018", label: "Week 9" }, { start: "3/5/2018", end: "3/11/2018", label: "Week 10" }, { start: "3/12/2018", end: "3/18/2018", label: "Week 11" }, { start: "3/19/2018", end: "3/25/2018", label: "Week 12" }, { start: "3/26/2018", end: "4/1/2018", label: "Week 13" } ] } ] }; FusionCharts.ready(function() { var myChart = new FusionCharts({ type: "gantt", renderAt: "chart-container", width: "100%", height: "100%", dataFormat: "json", dataSource }).render(); });HTML:
<div id="chart-container"></div>
How can I show dependent tasks in a Gantt chart?
Javascript:const dataSource = { chart: { caption: "New Store Opening - Project Plan", dateformat: "dd/mm/yyyy", outputdateformat: "ddds mns yy", ganttwidthpercent: "60", ganttpaneduration: "40", ganttpanedurationunit: "d", useverticalscrolling: "0", plottooltext: "<b>$label</b><br>Start: <b>$start</b><br>End: <b>$end</b>", theme: "fusion" }, connectors: [ { connector: [ { fromtaskid: "1-1", totaskid: "2-1", color: "#F2726F", thickness: "2" }, { fromtaskid: "2-1", totaskid: "3-1", color: "#F2726F", thickness: "2" }, { fromtaskid: "3-1", totaskid: "4-1", color: "#F2726F", thickness: "2" }, { fromtaskid: "4-1", totaskid: "5-1", color: "#F2726F", thickness: "2" }, { fromtaskid: "5-1", totaskid: "6-1", color: "#F2726F", thickness: "2" }, { fromtaskid: "6-1", totaskid: "7-1", color: "#F2726F", thickness: "2" }, { fromtaskid: "7-1", totaskid: "8-1", color: "#F2726F", thickness: "2" }, { fromtaskid: "8-1", totaskid: "9-1", color: "#F2726F", thickness: "2" }, { fromtaskid: "9-1", totaskid: "10-1", color: "#F2726F", thickness: "2" } ] } ], trendlines: [ { line: [ { start: "14/4/2018", displayvalue: "AC Testing", color: "5D5D5D", thickness: "1", dashed: "1" } ] } ], milestones: { milestone: [ { date: "30/4/2018", taskid: "10-1", color: "#f8bd19", shape: "star", tooltext: "Store Opening" } ] }, tasks: { task: [ { label: "Clear Site (4 Days)", processid: "1", start: "1/3/2018", end: "5/3/2018", id: "1-1", color: "#5D62B5" }, { label: "Drainage & Foundation (7 Days)", processid: "2", start: "6/3/2018", end: "13/3/2018", id: "2-1", color: "#5D62B5" }, { label: "Ground Floor (8 Days)", processid: "3", start: "14/3/2018", end: "22/3/2018", id: "3-1", color: "#5D62B5" }, { label: "First Floor (5 Days)", processid: "4", start: "23/3/2018", end: "28/3/2018", id: "4-1", color: "#5D62B5" }, { label: "Roofing (5 Days)", processid: "5", start: "29/3/2018", end: "3/4/2018", id: "5-1", color: "#5D62B5" }, { label: "Connect Electricity (6 Days)", processid: "6", start: "4/4/2018", end: "10/4/2018", id: "6-1", color: "#5D62B5" }, { label: "Air Conditioning (3 Days)", processid: "7", start: "11/4/2018", end: "14/4/2018", id: "7-1", color: "#5D62B5" }, { label: "Interiors (8 Days)", processid: "8", start: "15/4/2018", end: "23/4/2018", id: "8-1", color: "#5D62B5" }, { label: "Racking (3 Days)", processid: "9", start: "24/4/2018", end: "28/4/2018", id: "9-1", color: "#5D62B5" }, { label: "Stock Shelving (1 Days)", processid: "10", start: "29/4/2018", end: "30/4/2018", id: "10-1", color: "#5D62B5", toppadding: "9" } ] }, processes: { headertext: "Task", isanimated: "1", headervalign: "bottom", headeralign: "left", align: "left", isbold: "1", bgalpha: "25", process: [ { label: "Clear site", id: "1" }, { label: "Drainage & Foundation", id: "2" }, { label: "Ground Floor", id: "3" }, { label: "First Floor", id: "4" }, { label: "Roofing", id: "5" }, { label: "Connect Electricity", id: "6" }, { label: "Air Conditioning", id: "7" }, { label: "Interiors", id: "8" }, { label: "Racking", id: "9" }, { label: "Stock Shelving", id: "10" } ] }, categories: [ { align: "middle", category: [ { start: "1/3/2018", end: "31/3/2018", label: "March" }, { start: "1/4/2018", end: "1/5/2018", label: "April" } ] }, { align: "center", category: [ { start: "1/3/2018", end: "7/3/2018", label: "Week 1" }, { start: "8/3/2018", end: "14/3/2018", label: "Week 2" }, { start: "15/3/2018", end: "21/3/2018", label: "Week 3" }, { start: "22/3/2018", end: "28/3/2018", label: "Week 4" }, { start: "29/3/2018", end: "5/4/2018", label: "Week 5" }, { start: "6/4/2018", end: "12/4/2018", label: "Week 6" }, { start: "13/4/2018", end: "19/4/2018", label: "Week 7" }, { start: "19/4/2018", end: "25/4/2018", label: "Week 8" }, { start: "25/4/2018", end: "1/5/2018", label: "Week 9" } ] } ] }; FusionCharts.ready(function() { var myChart = new FusionCharts({ type: "gantt", renderAt: "chart-container", width: "100%", height: "100%", dataFormat: "json", dataSource }).render(); });HTML:
<div id="chart-container"></div>
How can I configure a timeline like a machine operating schedule in a Gantt chart?
Javascript:const dataSource = { chart: { caption: "Machine Operating Schedule For Sun Industries", subcaption: "Denver Plant", theme: "fusion", dateformat: "dd/mm/yyyy", plottooltext: "Status for period <b>$start - $end</b> is <b>$label</b>" }, legend: { item: [ { label: "In use", color: "#62B58D" }, { label: "Repair", color: "#FFC533" }, { label: "Idle", color: "#F2726F" } ] }, tasks: { task: [ { label: "In Use", processid: "A", start: "1/1/2018", end: "13/1/2018", bordercolor: "#62B58D", color: "#62B58D", id: "1" }, { label: "Idle", processid: "A", start: "13/1/2018", end: "18/1/2018", bordercolor: "#F2726F", color: "#F2726F", id: "2" }, { label: "In Use", processid: "A", start: "18/1/2018", end: "27/1/2018", bordercolor: "#62B58D", color: "#62B58D", id: "3" }, { label: "Repair", processid: "A", start: "27/1/2018", end: "29/1/2018", bordercolor: "#FFC533", color: "#FFC533", id: "4" }, { label: "In Use", processid: "A", start: "29/1/2018", end: "4/2/2018", bordercolor: "#62B58D", color: "#62B58D", id: "5" }, { label: "Idle", processid: "B", start: "1/1/2018", end: "7/1/2018", bordercolor: "#F2726F", color: "#F2726F", id: "6" }, { label: "In Use", processid: "B", start: "7/1/2018", end: "18/1/2018", bordercolor: "#62B58D", color: "#62B58D", id: "7" }, { label: "Repair", processid: "B", start: "18/1/2018", end: "24/1/2018", bordercolor: "#FFC533", color: "#FFC533", id: "8" }, { label: "In Use", processid: "B", start: "24/1/2018", end: "4/2/2018", bordercolor: "#62B58D", color: "#62B58D", id: "9" }, { label: "Idle", processid: "C", start: "1/1/2018", end: "14/1/2018", bordercolor: "#F2726F", color: "#F2726F", id: "10" }, { label: "In Use", processid: "C", start: "14/1/2018", end: "3/2/2018", bordercolor: "#62B58D", color: "#62B58D", id: "11" }, { label: "Idle", processid: "C", start: "3/2/2018", end: "4/2/2018", bordercolor: "#F2726F", color: "#F2726F", id: "12" }, { label: "Repair", processid: "D", start: "1/1/2018", end: "7/1/2018", bordercolor: "#FFC533", color: "#FFC533", id: "13" }, { label: "Idle", processid: "D", start: "7/1/2018", end: "11/1/2018", bordercolor: "#F2726F", color: "#F2726F", id: "14" }, { label: "In Use", processid: "D", start: "11/1/2018", end: "27/1/2018", bordercolor: "#62B58D", color: "#62B58D", id: "15" }, { label: "Repair", processid: "D", start: "27/1/2018", end: "4/2/2018", bordercolor: "#FFC533", color: "#FFC533", id: "16" }, { label: "Idle", processid: "E", start: "1/1/2018", end: "18/1/2018", bordercolor: "#F2726F", color: "#F2726F", id: "17" }, { label: "In Use", processid: "E", start: "18/1/2018", end: "3/2/2018", bordercolor: "#62B58D", color: "#62B58D", id: "18" }, { label: "Idle", processid: "E", start: "3/2/2018", end: "4/2/2018", bordercolor: "#F2726F", color: "#F2726F", id: "19" }, { label: "In Use", processid: "F", start: "1/1/2018", end: "8/1/2018", bordercolor: "#62B58D", color: "#62B58D", id: "20" }, { label: "Repair", processid: "F", start: "8/1/2018", end: "11/1/2018", bordercolor: "#FFC533", color: "#FFC533", id: "21" }, { label: "In Use", processid: "F", start: "11/1/2018", end: "18/1/2018", bordercolor: "#62B58D", color: "#62B58D", id: "22" }, { label: "Repair", processid: "F", start: "18/1/2018", end: "21/1/2018", bordercolor: "#FFC533", color: "#FFC533", id: "23" }, { label: "Idle", processid: "F", start: "21/1/2018", end: "4/2/2018", bordercolor: "#F2726F", color: "#F2726F", id: "24" }, { label: "In Use", processid: "G", start: "1/1/2018", end: "13/1/2018", bordercolor: "#62B58D", color: "#62B58D", id: "25" }, { label: "Idle", processid: "G", start: "13/1/2018", end: "20/1/2018", bordercolor: "#F2726F", color: "#F2726F", id: "26" }, { label: "In Use", processid: "G", start: "20/1/2018", end: "27/1/2018", bordercolor: "#62B58D", color: "#62B58D", id: "27" }, { label: "Repair", processid: "G", start: "27/1/2018", end: "4/2/2018", bordercolor: "#FFC533", color: "#FFC533", id: "28" }, { label: "In Use", processid: "H", start: "1/1/2018", end: "8/1/2018", bordercolor: "#62B58D", color: "#62B58D", id: "29" }, { label: "Idle", processid: "H", start: "8/1/2018", end: "18/1/2018", bordercolor: "#F2726F", color: "#F2726F", id: "30" }, { label: "In Use", processid: "H", start: "18/1/2018", end: "27/1/2018", bordercolor: "#62B58D", color: "#62B58D", id: "31" }, { label: "Repair", processid: "H", start: "27/1/2018", end: "29/1/2018", bordercolor: "#FFC533", color: "#FFC533", id: "32" }, { label: "In Use", processid: "H", start: "29/1/2018", end: "4/2/2018", bordercolor: "#62B58D", color: "#62B58D", id: "33" } ] }, processes: { isbold: "1", headertext: "Machines", process: [ { label: "Machine A", id: "A" }, { label: "Machine B", id: "B" }, { label: "Machine C", id: "C" }, { label: "Machine D", id: "D" }, { label: "Machine E", id: "E" }, { label: "Machine F", id: "F" }, { label: "Machine G", id: "G" }, { label: "Machine H", id: "H" } ] }, categories: [ { category: [ { start: "1/1/2018", end: "4/2/2018", name: "January 2018" } ] }, { bgalpha: "0", category: [ { start: "1/1/2018", end: "7/1/2018", label: "Week 1" }, { start: "8/1/2018", end: "14/1/2018", label: "Week 2" }, { start: "15/1/2018", end: "21/1/2018", label: "Week 3" }, { start: "22/1/2018", end: "28/1/2018", label: "Week 4" }, { start: "29/1/2018", end: "4/2/2018", label: "Week 5" } ] } ] }; FusionCharts.ready(function() { var myChart = new FusionCharts({ type: "gantt", renderAt: "chart-container", width: "100%", height: "100%", dataFormat: "json", dataSource }).render(); });HTML:
<div id="chart-container"></div>