ALIAS: gantt

Example of Gantt Chart:

JavaScript embedding code:

    <script type="text/javascript">
    FusionCharts.ready(function(){
        var myChart = new FusionCharts({
            "type": "gantt",
            "dataFormat": "jsonurl",
            "dataSource": "chartdata.json"
            });
        });
    </script>

Data for this chart:

• JSON
• XML

Chart Attributes

Chart Captions

These attributes let you configure chart captions.

Chart Caption Cosmetics

These attributes let you configure the cosmetics of chart caption and sub-caption.

Functional Attributes

You can control a variety of functional elements on the chart. For example, you can opt to show/hide data labels, data values, y-axis values. You can also set chart limits and extended properties.

These attributes let you control the functional properties in a Gantt chart.

Chart Cosmetic Properties

These attributes let you configure chart cosmetics like background color, background alpha, canvas color & alpha etc.

Tool-tip Properties

These attributes let you configure tool-tip properties.

Legend Properties

In Gantt chart, the series name of each data-set shows up in the legend of the chart. If you do not need the legend, you can opt to hide the same.

Also, the legend can be placed at the bottom of the chart or to the right of the chart.

These attributes let you configure the functional and cosmetic properties for the legend.

Scroll-bar Properties

These attributes let you configure the scroll-bar.

Chart Padding & Margins

FusionWidgets XT allows you to manually customize the padding of various elements on the chart to allow advanced manipulation and control over chart visualization. Padding in FusionWidgets XT is always defined in pixels, unless the attribute itself suggests some other scale (like plotSpacePercent).

You can also define the chart margins. Chart margins refer to the empty space left on the top, bottom, left, and right of the chart. That means, FusionWidgets XT will not plot anything in that space.

It is not necessary for you to specify any padding/margin values. FusionWidgets XT automatically assumes the best values for the same.

These attributes let you configure the functional and cosmetic properties of chart paddings and margins.

<categories> element

Each <categories> element represents one visual timeline on the chart. The timeline divisions are controlled by child <category> elements of <categories> element.

The following attributes of <categories> element apply to all child <category> elements, unless explicitly specified for each <category> element.

<category> element

Each <category> element distributes the time line into visual divisions.

These attributes let you configure the <category> element.

<processes> element

All the processes for the chart are grouped under the <processes> element. Each process is represented by an individual <process> element.

The following attributes of <processes> element let you collectively specify cosmetic properties for each <process> element. You can also over-ride these properties by specifying the same for each <process> element.

These attributes let you configure the <processes> element.

<process> element

Each <process> element represents one process on the Gantt chart. You can show team members, projects, or task list as a process - there's no restriction to that.

These attributes let you configure the <process> element.

<tasks> element

The <tasks> element groups all the tasks that we've to show in the chart. Each task is represented by a element which is a child of the <tasks> element.

These attributes let you configure the <tasks> element.

<task> element

Each <task> element represents a task bar on the chart.

These attributes let you configure the <task> element.

<datatable> element

The following attributes of <datatable> element help you collectively control the cosmetics of each cell within the table. You can, however, control the properties of individual cells using attributes of <datacolumn> element or individual <text> element.

These attributes let you configure the <datatable> element.

<datacolumn> element

Each <datacolumn> element adds a column to the chart's data grid.

These attributes let you configure the <datacolumn> element.

<text> element

Each <text> element, child of <datacolumn> element, represents a single cell in the data column.

These attributes let you configure the <text> element.

<connectors> element

These attributes let you configure the cosmetics for all the connectors collectively.

<connector> element

Each <connector> element represents a connector that connects two tasks.

These attributes let you configure the cosmetics for each connector individually.

<milestones> --> <milestone> element

These attributes let you visually depict any crucial dates on the chart. You can create your own milestones on the chart based on date and task i.e., for a given task you can specify milestones on specific dates. You can also add tool text and link for the milestone. You can customize all the visual properties of the milestone including shape (star or polygon), size, and colors.

These attributes let you configure the <milestone> element of the <milestones> element.

<trendLines> --> <Line> element

Using the <trendlines> element (and children <line> elements), you can define trend lines on the chart.

Trend lines are horizontal lines spanning the chart canvas which aid in interpretation of data with respect to some pre-determined value. For example, if you are plotting sales data of current year, you might want to add previous year's average monthly sales as trend indicator for ease of comparison.

Use the code snippet shown below to render a trend-line on the chart:

    "trendlines": [{
     "line": [{
                "startvalue": "177500",
                 "color": "#9b59b6",
                 "displayvalue": "Target"
             }]
                    }]

These attributes let you configure the trendline cosmetic and functional properties.

<legend> element --> <item> element

These attributes let you configure the label and color for the <item> element of the <legend> element.