Gantt Charts

Gantt charts are commonly used to track activities during time. With little code you can achieve, in Chart FX, a Gantt chart like the following

Setting the Gantt Type

The first step in creating a Gantt style chart is to set the Gallery property with the GANTT chart type as follows:


chart1.setGallery(Gallery.GANTT);

It is important to understand that when you set this style, the axis will be shifted. The X-axis (categorical) draws vertically (left side) and the Y-axis (numerical) draws in the bottom of the chart. This is important to mention as all of the properties that you set regarding the Y-axis will affect the bottom axis and not the left side axis as you would normally expect.

Also, the GANTT type will display horizontal bars in the Plot area.

Passing Data to Gantt Charts

There are two parameters you must pass to a Gantt chart: where the bar begins and where it ends, according to the data type that the Y-axis (bottom) has been set. This means that if you set a Min of 0 and a Max of 200 for the Y-axis, the bars must contain a beginning value and an ending value that are numbers.

On the other hand, if you set the Min and Max to be dates, the value of the bars must be set with dates so they can be represented according to the format of the Y-axis.

The properties involved in passing data to a Gantt chart are the Value property and IniValue property that must be used in conjunction with OpenData and CloseData methods.

The following example shows how you can set values for a Gantt chart with a Y-axis represented in a numerical format. Please note how the Y-axis is set with numerical values for its min and max before sending the data to the chart.


chart1.setGallery(Gallery.GANTT);
// First set the Min and Max for the Y-axis
chart1.getAxisY().setMin(0);
chart1.getAxisY().setMax(200);
// Then we can use the Value and IniValue
// for the Gantt Chart. Let's suppose it has 3 bars
chart1.openData(COD.VALUES, 1, 3);
chart1.openData(COD.INI_VALUES, 1, 3);
chart1.setIniValue(0, 0, 10);
chart1.setValue(0, 0, 30);
chart1.setIniValue(0, 1, 40);
chart1.setValue(0, 1, 80);
chart1.setIniValue(0, 2, 100);
chart1.setValue(0, 2, 180);
chart1.closeData(COD.VALUES);
chart1.closeData(COD.INI_VALUES);

The following example shows how you can set values for a Gantt chart with an axis represented in a date-formatted. Please note how dates are set for the Min and Max in the Y-axis and values set with the Value and the IniValue properties correspond to dates:


Calendar calendar = new GregorianCalendar();
Calendar calendarTemp = (GregorianCalendar) calendar.clone();

//Set Min and max for the Y-axis
chart1.getAxisY().setMin(Chart.dateToNumber(calendar));
calendarTemp.add(GregorianCalendar.DAY_OF_YEAR, 120);
chart1.getAxisY().setMax(Chart.dateToNumber(calendarTemp));
calendarTemp.add(GregorianCalendar.DAY_OF_YEAR, -120);

chart1.openData(COD.VALUES, 1, 3);
chart1.openData(COD.INI_VALUES, 1, 3);

// First activity: from day 0 to day 10
chart1.setIniValue(0, 0, Chart.dateToNumber(calendarTemp));
calendarTemp.add(GregorianCalendar.DAY_OF_YEAR, 10);
chart1.setValue(0, 0, Chart.dateToNumber(calendarTemp));
// Second Activity: from day 30 to day 80
calendarTemp.add(GregorianCalendar.DAY_OF_YEAR, 20);
chart1.setIniValue(0, 1, Chart.dateToNumber(calendarTemp));
calendarTemp.add(GregorianCalendar.DAY_OF_YEAR, 50);
chart1.setValue(0, 1, Chart.dateToNumber(calendarTemp));
// Third Activity: from day 90 to day 110
calendarTemp.add(GregorianCalendar.DAY_OF_YEAR, 10);
chart1.setIniValue(0, 2, Chart.dateToNumber(calendarTemp));
calendarTemp.add(GregorianCalendar.DAY_OF_YEAR, 20);
chart1.setValue(0, 2, Chart.dateToNumber(calendarTemp));

chart1.closeData(COD.VALUES);
chart1.closeData(COD.INI_VALUES);

Note the use of the static method dateToNumber to convert all dates to the internal format that Chart FX uses to handle dates.

When using data binding, you will need to use the DataType property to set the IniValues, as follows:


//DataSet = SELECT Activity, Start, Duration FROM TASKS
chart1.setDataType(0, DataType.LABEL);
chart1.setDataType(1, DataType.INIVALUE);
chart1.setDataType(2, DataType.VALUE);

More information about DataType can be found on the Passing Data to Chart FX for Java chapter.

But my Y-axis is displayed on the bottom of the chart and I want it on top?

In order to create the chart displayed in the figure shown above, we made use of a secondary Y-axis, where the data series was assigned to the secondary Y-axis and its settings (Min, Max, etc.) while the primary Y-axis Visible property was set to false, as follows:


//Firt Set the Min and Max for the YAxis
chart1.getAxisY().setMin(calendar.getTimeInMillis());
calendarTemp.add(GregorianCalendar.DAY_OF_YEAR, 120);
chart1.getAxisY().setMax(calendarTemp.getTimeInMillis());
calendarTemp.add(GregorianCalendar.DAY_OF_YEAR, -120);

'//Finally the primary Y-axis is hidden in the chart
chart1.getAxisY.setVisible(false);

Assigning Activity Labels

Activity labels are set like any other legend in the chart. Using the Legend property or the Label property in the Axis Object.

What about independent colors?

You may change the color of the bars assigning different colors for each point in the chart. The code should look like:


int totSeries = chart1.getNSeries();
int totValues = chart1.getNValues();
PointAttributes redPoints = new PointAttributes(chart1);
redPoints.setColor(java.awt.Color.red);
PointAttributes bluePoints = new PointAttributes(chart1);
bluePoints.setColor(java.awt.Color.blue);
for (int i=0;i<totSeries;i++)
for (int j=0;j<totValues;j++)
{
if (chart1.getValue(i,j) >= myLimit)
// Red to the points that plot above the limit
chart1.setPoint(i,j,redPoints);
// Blue to the points that plot below the limit
chart1.setPoint(i,j,bluePoints);
}