Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

Starting FusionCharts Suite XT 3.4, FusionCharts has introduced several events for Gantt charts.

In this section, you will be introduced to the various events that you can raise for gantt charts.

The dataPlotClick Event

To understand how Gantt chart events work, we will look at one example - we will configure the dataPlotClick event for the Gantt chart.

The Social Media Optimization Gantt chart configured to capture data from the dataPlotClick event and display it in an annotation below the chart looks like this:

FusionCharts will load here..

In the chart above, when you click a process all details related to that process are shown in the rectangle annotation rendered below the chart.

The data structure needed to configure the dataPlotClick event for the Gantt chart is given below:

{ "chart": { "dateformat": "mm/dd/yyyy", "caption": "Social Media Optimization", "subcaption": "Project Plan", "chartbottomMargin": "90", "showLabel": "0" }, "categories": [ { "category": [ { "start": "08/01/2014", "end": "08/31/2014", "label": "Aug '14" }, { "start": "09/01/2014", "end": "09/30/2014", "label": "Sep '14" }, { "start": "10/01/2014", "end": "10/31/2014", "label": "Oct '14" }, { "start": "11/01/2014", "end": "11/30/2014", "label": "Nov '14" }, { "start": "12/01/2014", "end": "12/31/2014", "label": "Dec '14" }, { "start": "01/01/2015", "end": "01/31/2015", "label": "Jan '15" }, { "start": "02/01/2015", "end": "02/28/2015", "label": "Feb '15" }, { "start": "03/01/2015", "end": "03/31/2015", "label": "Mar '15" } ] } ], "processes": { "fontsize": "12", "isbold": "1", "align": "left", "process": [ { "id": "PROCESS_1", "label": "Identify Customers" }, { "id": "PROCESS_2", "label": "Survey 500 Customers" }, { "id": "PROCESS_3", "label": "Interpret Requirements" }, { "id": "PROCESS_4", "label": "Market Analysis" }, { "id": "PROCESS_5", "label": "Brainstorm concepts" }, { "id": "PROCESS_6", "label": "Define Ad Requirements" }, { "id": "PROCESS_7", "label": "Design And Develop" }, { "id": "PROCESS_8", "label": "Mock test" }, { "id": "PROCESS_9", "label": "Documentation" }, { "id": "PROCESS_10", "label": "Start Campaign" } ] }, "tasks": { "task": [ { "id": "1", "start": "08/04/2014", "end": "08/10/2014", "label": "test" }, { "id": "2", "start": "08/08/2014", "end": "08/19/2014" }, { "id": "3", "start": "08/19/2014", "end": "09/02/2014" }, { "id": "4", "start": "08/24/2014", "end": "09/02/2014" }, { "id": "5", "start": "09/02/2014", "end": "09/21/2014" }, { "id": "6", "start": "09/21/2014", "end": "10/06/2014" }, { "id": "7", "start": "10/06/2014", "end": "01/21/2015" }, { "id": "8", "start": "01/21/2015", "end": "02/19/2015" }, { "id": "9", "start": "01/28/2015", "end": "02/24/2015" }, { "id": "10", "start": "02/24/2015", "end": "03/27/2015" } ] }, "connectors": [ { "connector": [ { "fromtaskid": "2", "totaskid": "3", "color": "#008ee4", "thickness": "2" }, { "fromtaskid": "4", "totaskid": "5", "color": "#008ee4", "thickness": "2" }, { "fromtaskid": "5", "totaskid": "6", "color": "#008ee4", "thickness": "2" }, { "fromtaskid": "6", "totaskid": "7", "color": "#008ee4", "thickness": "2" }, { "fromtaskid": "7", "totaskid": "8", "color": "#008ee4", "thickness": "2" }, { "fromtaskid": "9", "totaskid": "10", "color": "#008ee4", "thickness": "2" } ] } ], "milestones": { "milestone": [ { "date": "3/28/2015", "taskid": "10", "color": "#f8bd19", "shape": "star", "tooltext": "Completion of First Campaign" } ] }, "annotations": { "origw": "750", "origh": "550", "autoscale": "1", "groups": [ { "id": "info", "items": [ { "id": "infoBg", "type": "rectangle", "x": "$canvasCenterX-140", "y": "$chartEndY-15", "tox": "$canvasCenterX +140", "toy": "$chartEndY-90", "fillcolor": "#CCCCCC" }, { "id": "infoText", "type": "Text", "fontSize": "11", "fillcolor": "#333333", "isHTML": "1", "text": "Click on Task to get Details", "x": "$chartCenterX", "y": "$chartEndY-53" } ] } ] } }
{
    "chart": {
        "dateformat": "mm/dd/yyyy",
        "caption": "Social Media Optimization",
        "subcaption": "Project Plan",
        "chartbottomMargin": "90",
        "showLabel": "0"
    },
    "categories": [
        {
            "category": [
                {
                    "start": "08/01/2014",
                    "end": "08/31/2014",
                    "label": "Aug '14"
                },
                {
                    "start": "09/01/2014",
                    "end": "09/30/2014",
                    "label": "Sep '14"
                },
                {
                    "start": "10/01/2014",
                    "end": "10/31/2014",
                    "label": "Oct '14"
                },
                {
                    "start": "11/01/2014",
                    "end": "11/30/2014",
                    "label": "Nov '14"
                },
                {
                    "start": "12/01/2014",
                    "end": "12/31/2014",
                    "label": "Dec '14"
                },
                {
                    "start": "01/01/2015",
                    "end": "01/31/2015",
                    "label": "Jan '15"
                },
                {
                    "start": "02/01/2015",
                    "end": "02/28/2015",
                    "label": "Feb '15"
                },
                {
                    "start": "03/01/2015",
                    "end": "03/31/2015",
                    "label": "Mar '15"
                }
            ]
        }
    ],
    "processes": {
        "fontsize": "12",
        "isbold": "1",
        "align": "left",
        "process": [
            {
                "id": "PROCESS_1",
                "label": "Identify Customers"
            },
            {
                "id": "PROCESS_2",
                "label": "Survey 500 Customers"
            },
            {
                "id": "PROCESS_3",
                "label": "Interpret Requirements"
            },
            {
                "id": "PROCESS_4",
                "label": "Market Analysis"
            },
            {
                "id": "PROCESS_5",
                "label": "Brainstorm concepts"
            },
            {
                "id": "PROCESS_6",
                "label": "Define Ad Requirements"
            },
            {
                "id": "PROCESS_7",
                "label": "Design And Develop"
            },
            {
                "id": "PROCESS_8",
                "label": "Mock test"
            },
            {
                "id": "PROCESS_9",
                "label": "Documentation"
            },
            {
                "id": "PROCESS_10",
                "label": "Start Campaign"
            }
        ]
    },
    "tasks": {
        "task": [
            {
                "id": "1",
                "start": "08/04/2014",
                "end": "08/10/2014",
                "label": "test"
            },
            {
                "id": "2",
                "start": "08/08/2014",
                "end": "08/19/2014"
            },
            {
                "id": "3",
                "start": "08/19/2014",
                "end": "09/02/2014"
            },
            {
                "id": "4",
                "start": "08/24/2014",
                "end": "09/02/2014"
            },
            {
                "id": "5",
                "start": "09/02/2014",
                "end": "09/21/2014"
            },
            {
                "id": "6",
                "start": "09/21/2014",
                "end": "10/06/2014"
            },
            {
                "id": "7",
                "start": "10/06/2014",
                "end": "01/21/2015"
            },
            {
                "id": "8",
                "start": "01/21/2015",
                "end": "02/19/2015"
            },
            {
                "id": "9",
                "start": "01/28/2015",
                "end": "02/24/2015"
            },
            {
                "id": "10",
                "start": "02/24/2015",
                "end": "03/27/2015"
            }
        ]
    },
    "connectors": [
        {
            "connector": [
                {
                    "fromtaskid": "2",
                    "totaskid": "3",
                    "color": "#008ee4",
                    "thickness": "2"
                },
                {
                    "fromtaskid": "4",
                    "totaskid": "5",
                    "color": "#008ee4",
                    "thickness": "2"
                },
                {
                    "fromtaskid": "5",
                    "totaskid": "6",
                    "color": "#008ee4",
                    "thickness": "2"
                },
                {
                    "fromtaskid": "6",
                    "totaskid": "7",
                    "color": "#008ee4",
                    "thickness": "2"
                },
                {
                    "fromtaskid": "7",
                    "totaskid": "8",
                    "color": "#008ee4",
                    "thickness": "2"
                },
                {
                    "fromtaskid": "9",
                    "totaskid": "10",
                    "color": "#008ee4",
                    "thickness": "2"
                }
            ]
        }
    ],
    "milestones": {
        "milestone": [
            {
                "date": "3/28/2015",
                "taskid": "10",
                "color": "#f8bd19",
                "shape": "star",
                "tooltext": "Completion of First Campaign"
            }
        ]
    },
    "annotations": {
        "origw": "750",
        "origh": "550",
        "autoscale": "1",
        "groups": [
            {
                "id": "info",
                "items": [
                    {
                        "id": "infoBg",
                        "type": "rectangle",
                        "x": "$canvasCenterX-140",
                        "y": "$chartEndY-15",
                        "tox": "$canvasCenterX +140",
                        "toy": "$chartEndY-90",
                        "fillcolor": "#CCCCCC"
                    },
                    {
                        "id": "infoText",
                        "type": "Text",
                        "fontSize": "11",
                        "fillcolor": "#333333",
                        "isHTML": "1",
                        "text": "Click on Task to get Details",
                        "x": "$chartCenterX",
                        "y": "$chartEndY-53"
                    }
                ]
            }
        ]
    }
}

Given below is a brief description of the various events that can be configured for Gantt charts:

Event Name Description

dataPlotClick

This event is fired when a task is clicked.

processClick

This event is fired when a process is clicked.

processRollOver

This event is fired when the mouse pointer moves over a process. In Gantt chart, process element represents one process on the Gantt chart. You can show team members, projects, or a task list as a process - there’s no restriction to that.

processRollOut

This event is fired when the pointer moves out of a process.

categoryClick

This event is fired when a category is clicked.

categoryRollOver

This event is fired when the pointer moves over a category.

categoryRollOut

This event is fired when the pointer moves out of a category.

connectorClick

This event is fired when a connector is clicked.

connectorRollOver

This event is fired when the pointer moves over a connector.

connectorRollOut

This event is fired when the pointer moves out of a connector.

milestoneClick

This event is fired when a milestone is clicked.

milestoneRollOver

This event is fired when the pointer moves over a milestone.

milestoneRollOut

This event is fired when the pointer moves out of a milestone.

There! You have now seen the events that can be configured for a Gantt chart.

Top