TimelineChart

This feature allows drawing line charts on top of the timeline area. Feature consists of two parts: chart and data providers. Chart provider is responsible for rendering the chart, while data provider is responsible for providing data for the chart. Feature itself manages the interaction between them, and tracks lifecycle events of the Gantt chart.

Timeline chart

//<code-header>
fiddle.title = 'Timeline chart';
//</code-header>
targetElement.innerHTML = '<p>This demo shows the timeline chart feature</p>';

const gantt = new Gantt({
    appendTo  : targetElement,
    height    : 350,
    startDate : '2019-07-07',
    endDate   : '2019-07-29',
    features  : {
        timelineChart : true
    },
    rowHeight : 60,
    project   : new ProjectModel({
        startDate : '2019-07-07',
        duration  : 30,
        events    : [
            {
                id       : 1,
                name     : 'Project A',
                duration : 30,
                expanded : true,
                children : [
                    {
                        id       : 11,
                        name     : 'Child 1',
                        duration : 1,
                        leaf     : true,
                        rollup   : true,
                        cls      : 'child1'
                    },
                    {
                        id       : 12,
                        name     : 'Child 2',
                        duration : 3,
                        leaf     : true,
                        rollup   : true,
                        cls      : 'child1'
                    },
                    {
                        id       : 13,
                        name     : 'Child 3',
                        duration : 0,
                        rollup   : true,
                        leaf     : true,
                        cls      : 'child1'
                    }
                ]
            }
        ],
        dependencies : [{
            id        : 1,
            lag       : 1,
            fromEvent : 11,
            toEvent   : 12
        },
        {
            id        : 2,
            lag       : 1,
            fromEvent : 12,
            toEvent   : 13
        }]
    })
});

Default implementation uses SVGChartProvider for rendering the chart using SVG elements, and GanttDataProvider as a data source. Those can be replaced and customized by setting the chartProviderClass and dataProviderClass configs. Custom implementation should subclass corresponding base classes: TimelineChartProviderBase, TimelineChartDataProviderBase and implement required methods.

For more information on how to create custom chart provider, see this guide.

Feature will track timeline element resize and scroll and notify the chart provider about them. Chart element normally would be repositioned vertically to always stay in the view. And horizontally it will be scrollable along with the timeline.

Feature will also track project model and time axis view model changes to request data for the chart from the data provider and pass it to the chart provider for rendering.

Simple usage example:

// Simple configuration
const gantt = new Gantt({
    features : {
        timelineChart : true
    }
});

Chart and data providers can be configured separately.

const gantt = new Gantt({
    features : {
        timelineChart : {
            chartConfig : {
                tooltipTemplate : function({ dataset, date }) {
                    return `
                        <div>${dataset.label}: ${DateHelper.as('d', parseInt(dataset.value))} days</div>
                        <div>${DateHelper.format(date, this.gantt.displayDateFormat)}</div>
                    `;
                }
            },
            dataProviderConfig : {
                defaultDataset : 'progress'
            }
        }
    }
});

This feature is disabled by default.

Configs

Common

disabledInstancePlugin

listenersEvents

Chart

chartProvider: Object

Configuration for the chart provider.

chartProviderClass: TimelineChartProviderBase

Class providing chart rendering functionality.

dataProvider: Object

Configuration for the data provider.

dataProviderClass: TimelineChartDataProviderBase

Class providing data for the chart.

selectedDatasets: String[]Also a property

Datasets to be displayed on the chart. Available datasets should be returned by the datasets accessor of the data provider. Changing this property will trigger chart repaint with the new dataset. Set to empty array to not draw anything.