Table of Contents
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>
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>
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>
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>
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>
Have you ever spent hours buried in documentation, hunting for a specific piece of code?…
Do you feel like your data is a cryptic puzzle, locked away from revealing its…
In web development, mastering JavaScript charting libraries is crucial for keeping up with the fast-paced…
Ever spend an afternoon neck-deep in documentation, searching for that one elusive code snippet? Or…
In the dynamic world of data visualization, the need for precision and innovation has never…
Are you drowning in data but struggling to find the insights that drive real business…