here<\/a>).<\/p>\n<html>\n<head>\n<script src=\"https:\/\/cdn.anychart.com\/releases\/8.6.0\/js\/anychart-core.min.js\"><\/script>\n<script src =\"https:\/\/cdn.anychart.com\/releases\/8.6.0\/js\/anychart-gantt.min.js\"><\/script>\n<\/head>\n<body>\n<div id = \"container\" ><\/div>\n<script>\nanychart.onDocumentReady(function () {\n\t\/\/ create data\n\tvar data = [{\n\t\tid: \"1\",\n\t\tname: \"Development Life Cycle\",\n\t\tactualStart: Date.UTC(2018, 01, 02),\n\t\tactualEnd: Date.UTC(2018, 06, 15),\n\t\tchildren: [{\n\t\t\t\tid: \"1_1\",\n\t\t\t\tname: \"Planning\",\n\t\t\t\tactualStart: Date.UTC(2018, 01, 02),\n\t\t\t\tactualEnd: Date.UTC(2018, 01, 22),\n\t\t\t\tconnectTo: \"1_2\",\n\t\t\t\tconnectorType: \"finish-start\",\n\t\t\t\tprogressValue: \"75%\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"1_2\",\n\t\t\t\tname: \"Design and Prototyping\",\n\t\t\t\tactualStart: Date.UTC(2018, 01, 23),\n\t\t\t\tactualEnd: Date.UTC(2018, 02, 20),\n\t\t\t\tconnectTo: \"1_3\",\n\t\t\t\tconnectorType: \"start-start\",\n\t\t\t\tprogressValue: \"60%\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"1_3\",\n\t\t\t\tname: \"Evaluation Meeting\",\n\t\t\t\tactualStart: Date.UTC(2018, 02, 23),\n\t\t\t\tactualEnd: Date.UTC(2018, 02, 23),\n\t\t\t\tconnectTo: \"1_4\",\n\t\t\t\tconnectorType: \"start-start\",\n\t\t\t\tprogressValue: \"80%\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"1_4\",\n\t\t\t\tname: \"Application Development\",\n\t\t\t\tactualStart: Date.UTC(2018, 02, 26),\n\t\t\t\tactualEnd: Date.UTC(2018, 04, 26),\n\t\t\t\tconnectTo: \"1_5\",\n\t\t\t\tconnectorType: \"finish-finish\",\n\t\t\t\tprogressValue: \"90%\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"1_5\",\n\t\t\t\tname: \"Testing\",\n\t\t\t\tactualStart: Date.UTC(2018, 04, 29),\n\t\t\t\tactualEnd: Date.UTC(2018, 05, 15),\n\t\t\t\tconnectTo: \"1_6\",\n\t\t\t\tconnectorType: \"start-finish\",\n\t\t\t\tprogressValue: \"60%\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"1_6\",\n\t\t\t\tname: \"Deployment\",\n\t\t\t\tactualStart: Date.UTC(2018, 05, 20),\n\t\t\t\tactualEnd: Date.UTC(2018, 05, 27),\n\t\t\t\tconnectTo: \"1_7\",\n\t\t\t\tconnectorType: \"start-finish\",\n\t\t\t\tprogressValue: \"100%\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: \"1_7\",\n\t\t\t\tname: \"Maintenance\",\n\t\t\t\tactualStart: Date.UTC(2018, 05, 30),\n\t\t\t\tactualEnd: Date.UTC(2018, 06, 11),\n\t\t\t\tprogressValue: \"40%\"\n\t\t\t},\n\n\t\t]\n\t}];\n\t\/\/ create a data tree\n\tvar treeData = anychart.data.tree(data, \"as-tree\");\n\n\t\/\/ create a chart\n\tvar chart = anychart.ganttProject();\n\n\t\/\/ set the data\n\tchart.data(treeData);\n\t\/\/ configure the scale\n\tchart.getTimeline().scale().maximum(Date.UTC(2018, 06, 30));\n\t\/\/ set the container id\n\tchart.container(\"container\");\n\t\/\/ initiate drawing the chart\n\tchart.draw();\n\t\/\/ fit elements to the width of the timeline\n\tchart.fitAll();\n});\n<\/script>\n<\/body>\n<\/html><\/code><\/pre>\nCustomizing the Gantt chart design<\/h2>\n
AnyChart provides a wide range of options to customize the design of data visualizations to suit your individual preferences and needs. In the data fields, you can set various attributes to customize the look and feel of your Gantt chart.<\/p>\n
For example, here are some data fields I specified in the above Gantt chart example:<\/p>\n
\nid<\/code><\/strong> \u2014 sets the unique identifier of every task;<\/li>\nname<\/code><\/strong> \u2014 sets the name of every task;<\/li>\nactualStart<\/code><\/strong> \u2014 sets the start date of every task;<\/li>\nactualEnd<\/code><\/strong> \u2014 sets the end date of every task;<\/li>\nconnectTo<\/code><\/strong> \u2014 is a type of connector that sets the target task;<\/li>\nconnectorType<\/code><\/strong> \u2014 sets the type of connector, which can be \u201cstart-start,\u201d \u201cstart-finish,\u201d \u201cfinish-start,\u201d or \u201cfinish-finish\u201d;<\/li>\nprogressValue<\/code><\/strong> \u2014 sets the progress value of every task as a percentage.<\/li>\n<\/ul>\nFurthermore, AnyChart allows the following types of tasks, which can be visualized in different ways:<\/p>\n
\n- regular tasks<\/strong> \u2014 do not have relationships with other tasks;<\/li>\n
- parent tasks<\/strong> \u2014 have parent-child relationships with other tasks;<\/li>\n
- milestones<\/strong> \u2014 visualize events with zero duration. They can be specified by setting the same date on the
actualStart<\/code> and actualEnd<\/code> fields.<\/li>\n<\/ul>\nLoading data as a table<\/h2>\n
If you want to create a chart by loading data from a relational database, you can organize the data as a table with parent\/child links.<\/p>\n
In that case, the parent<\/code> field of every item should have the id<\/code> value of its parent specified. Also, you should set the parent of a root item to null<\/code>, or just fail to specify it.<\/p>\nHere is what I\u2019m talking about:<\/p>\n
(You can also view the code here<\/a>).<\/p>\nvar data = [{\n\t\tid: 1,\n\t\tparent: null,\n\t\tname: \"Root\",\n\t\tactualStart: Date.UTC(2018, 01, 02),\n\t\tactualEnd: Date.UTC(2018, 06, 15),\n\t},\n\t{\n\t\tid: 2,\n\t\tparent: 1,\n\t\tname: \"Parent 1\",\n\t\tactualStart: Date.UTC(2018, 01, 02),\n\t\tactualEnd: Date.UTC(2018, 01, 22),\n\t\tprogressValue: \"90%\"\n\t},\n\t{\n\t\tid: 3,\n\t\tparent: 2,\n\t\tname: \"Child 1\u20131\",\n\t\tactualStart: Date.UTC(2018, 01, 23),\n\t\tactualEnd: Date.UTC(2018, 02, 20),\n\t\tprogressValue: \"75%\"\n\t},\n\t{\n\t\tid: 4,\n\t\tparent: 2,\n\t\tname: \"Child 1\u20132\",\n\t\tactualStart: Date.UTC(2018, 02, 23),\n\t\tactualEnd: Date.UTC(2018, 02, 23),\n\t\tprogressValue: \"60%\"\n\t},\n\t{\n\t\tid: 5,\n\t\tparent: 1,\n\t\tname: \"Parent 2\",\n\t\tactualStart: Date.UTC(2018, 02, 26),\n\t\tactualEnd: Date.UTC(2018, 04, 26),\n\t\tprogressValue: \"80%\"\n\t},\n\t{\n\t\tid: 7,\n\t\tparent: 5,\n\t\tname: \"Child 2\u20131\",\n\t\tactualStart: Date.UTC(2018, 04, 29),\n\t\tactualEnd: Date.UTC(2018, 05, 15),\n\t\tprogressValue: \"30%\"\n\t},\n];<\/code><\/pre>\nAlso, when you load data as a table, don\u2019t forget to change the second parameter in the anychart.data.tree()<\/code> method from \u201cas-tree\u201d<\/code> to \u201cas-table\u201d<\/code>, so the whole line looks as follows:<\/p>\nvar treeData = anychart.data.tree(data, \"as-table\");<\/code><\/pre>\nHere is a screenshot of the Gantt chart created when data is loaded as a table:<\/p>\n
![\"Gantt](\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2019\/09\/create-gantt-chart-2.png\")
<\/p>\n
Conclusion<\/h2>\n
That\u2019s it!<\/p>\n
As you can see, creating a Gantt chart using the AnyChart JavaScript charting library is simple and straightforward.<\/p>\n
In this tutorial, I\u2019ve just scratched the surface about what you can accomplish with Gantt charts. I hope you\u2019ve learnt the amazing capabilities of this type of chart and how it can assist you in managing your web development tasks.<\/p>\n
Of course, you can have a look at the easy to follow AnyChart\u2019s Gantt chart documentation<\/a> to learn more ways of tweaking the Gantt chart to fit your design requirements and assist you in tracking your project management activities.<\/p>\nAll the best.<\/p>\n
\nThe “Create Simple Gantt Chart Using JavaScript \u2014 Tutorial”\u00a0article is published on the AnyChart blog with permission of Alfrick Opidi.<\/p>\nOriginally appeared on Towards Data Science<\/a> under the title “How to Create a Simple Gantt Chart Using JavaScript” on August 28, 2019.<\/em><\/p>\n
![\"Create](\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2019\/09\/Gantt-chart-can-greatly-visualize-data-for-project-management.jpg\")
<\/p>\n![\"Gantt](\"https:\/\/www.anychart.com\/blog\/wp-content\/uploads\/2019\/09\/create-gantt-chart-1.png\")
<\/p>\n