Table of Contents
What Is A Gantt Chart?
What Are The Features Of A Gantt Chart?
JavaScript Gantt charts come with a variety of benefits. Gantt charts allow you to display both time and date. Moreover, using data with multiple and irregular divisions of dates on a timeline, you can customize the labels. In addition, you can also customize the cosmetic properties of each category. Furthermore, you can customize the input and output data formats with Gantt charts. This allows you to provide dates in a JSON file in some format and customize the output format in another. Moreover, you can also display the completion of each task in percentages, which you can define with the slackFillColor attribute.Data Table
Gantt charts also allow you to show a data table at the side of the chart, which can be highly customized to your liking. Additionally, you can restrict the Gantt view pane area to specific data and time duration. You can also link a task to a process by specifying an ID. Hence, you can define multiple tasks for each process. This can prove beneficial in cases where the Gantt chart indicates allotted work for all team members. With a Gantt chart, it becomes easy to visualize the multiple jobs allocated to each member. Moreover, you can hide/show task labels, individual taskbar dates, task labels, and even show individual taskbars as groups. Additionally, you can even customize connectors to connect any two tasks on the Gantt chart. The connectors can be rendered in four different ways and connected to either start, end, or both.Milestones
Furthermore, you can display milestones as polygons or stars with customizable properties at specified dates. You can also display additional tool text for milestones. Moreover, trend lines or zones can be added to Gantt charts to highlight a particular date or a range of dates. You can, for example, add a trend line to represent “Today,” or one to illustrate “Holiday,” and so on. In addition, you can even customize tooltip properties to show task dates or as part of a tooltip. You can even add additional macros to create dynamic tooltips.Legends
Finally, Gantt charts allow you to add a legend to the chart to display color keys and fully customize legend cosmetics. Furthermore, you can customize the chart’s colors using pre-defined palettes and single color theme selectors. You can specify the width ratio for distributing the data table and Gantt area. Gantt charts also allow you to display round-edged task bars and customize the gradient mix and shadow effect for taskbars. You can easily add annotations to the Gantt chart to display additional information. You can also enable hovering and customize hovering properties for categories, processes, connectors, and taskbars.How Can You Create A Simple Gantt Chart In JavaScript?
- First, define the data you want to use.
- Second, specify the visual timeline for the JavaScript Gantt chart.
- Next, define the processes.
- Finally, define the tasks.
FusionCharts.ready(function() { var socialMediaPlan = new FusionCharts({ type: 'gantt', renderAt: 'chart-container', width: '750', height: '500', dataFormat: 'json', dataSource: { "chart": { "dateformat": "mm/dd/yyyy", "caption": "Social Media Optimization", "subcaption": "Typical Steps Involved", "theme": "fusion", "canvasBorderAlpha": "40" }, "categories": [{ "category": [{ "start": "08/01/2014", "end": "08/31/2014", "label": "Aug '14" }, { "start": "09/01/2014", "end": "09/30/2014", "label": "Sep '14" } ] }], "processes": { "fontsize": "12", "isbold": "1", "align": "right", "process": [{ "label": "Identify Customers" }, { "label": "Survey 500 Customers" }, { "label": "Interpret Requirements" }, { "label": "Market Analysis" }, { "label": "Brainstorm concepts" } ] }, "tasks": { "task": [{ "start": "08/04/2014", "end": "08/10/2014" }, { "start": "08/08/2014", "end": "08/19/2014" }, { "start": "08/19/2014", "end": "09/02/2014" }, { "start": "08/24/2014", "end": "09/02/2014" }, { "start": "09/02/2014", "end": "09/21/2014" } ] } } }).render(); }); |