Live Edit
Overview
In the Live Edit mode, a special UI is enabled that allows users to edit Gantt charts on-the-fly. It is possible to edit the data structure by moving rows, change the duration and position of timeline elements, create and remove connections between them, and edit the data grid text.
To learn more, see the sections below. They demonstrate the default behavior of the chart in the Live Edit mode and explain how to enable / disable it and adjust its appearance and other settings.
Note: For the correct work of the Live Edit mode, as well as of Gantt charts in general, the id data field is required.
Default Behavior
This section describes the default behavior of the chart in the Live Edit mode and lists the events triggered by users' actions. By handling events, you can change the default behavior - see the Events article to learn more.
Please keep in mind that in addition to the special events mentioned below, all Live Edit interactions (as well as any interactions with Gantt charts) trigger row events.
1. Editing Data Grid Text
Double-clicking on data grid labels allows altering their text.
It triggers a data tree event:
| Value | Description |
|---|---|
| treeItemUpdate | A data item has been updated. |
2. Editing Data Structure
You can edit the structure of the data by dragging and dropping rows up and down. It is possible to change both the sequence of rows and their hierarchical relationships.
A data tree event is triggered:
| Value | Description |
|---|---|
| treeItemMove | A data item has been moved. |
3. Editing Elements
Drag and drop timeline elements to change their positions on the timeline. To change the duration and progress of an element, use duration thumbs on its sides and the slider on the progress bar.
Also, you can draw new connectors with the help of connector thumbs on the sides of tasks. To remove a connector, select it and press Del in Windows or Cmd-Backspace in Mac OS.
A data tree event and a connector event are triggered:
| Value | Description |
|---|---|
| treeItemMove | A data item has been updated. |
| beforeCreateConnector | A connector is about to be created. |
The following sample shows how the Live Edit mode works. All types of editing are enabled on the whole chart:
Enabling / Disabling
You can enable the Live Edit mode either on the whole chart or on its part: on the data grid, on the timeline, or on a particular element (except for connectors).
Depending on the part of the chart, different types of editing are enabled:
| Part of Chart | Editing Data Grid Text | Editing Data Structure | Editing Elements |
|---|---|---|---|
| Chart | ✔ | ✔ | ✔ |
| Data Grid | ✔ | ✔ | |
| Timeline | ✔ | ✔ | |
| Element | ✔ |
Note: To learn more about the types of editing, see the Default Behavior section.
To allow or forbid editing the whole chart, pass true / false to the edit() method of the chart:
// allow editing the chart
chart.edit(true);
To allow or forbid editing a part of the chart, access this part and pass true / false to its edit() method:
// allow editing the data grid
chart.dataGrid().edit(true);
// allow editing the timeline
chart.getTimeline().edit(true);
// allow editing milestones
chart.getTimeline().milestones().edit(true);
// allow editing periods
chart.getTimeline().periods().edit(true);
Below, there are two samples, one with a Project chart and another with a Resource chart. They show how enabling the Live Edit mode on different parts of the chart looks like:
Settings
It is possible to adjust the appearance and other settings of the chart in the Live Edit mode. You can change the way how rows and elements are colored when they are being dragged by users. Also, you can configure controls - duration and connector thumbs on elements and sliders on progress bars.
To access these settings, combine the edit() method of the chart / data grid / timeline / element with methods of the classes listed below:
| Settings | Class | Part of Chart |
|---|---|---|
| Editing Data Structure Rows | anychart.core.gantt.edit.StructureEdit | Chart Data Grid Timeline |
| Editing Elements Elements Controls | anychart.core.gantt.edit.ElementEdit | Element |
Note: To learn more about the types of editing, see the Default Behavior section.
Rows
It is possible to change the way how rows are colored when they are being dragged by users.
First, access either the whole chart or its part: the data grid or the timeline.
Then combine edit() with methods of the anychart.core.gantt.edit.StructureEdit class:
- fill() to set the fill of the row
- stroke() to set the stroke of the row
- placementStroke() to set the stroke of the line marking the target position
In the following sample, rows in the Live Edit mode have different stroke settings on the data grid and on the timeline. Other settings are applied to the whole chart.
// allow editing the chart
chart.edit(true);
// configure the appearance of rows in the live edit mode
chart.edit().fill("#dd2c00", 0.2);
chart.edit().placementStroke("#dd2c00", 2, "5 2", "round");
chart.dataGrid().edit().stroke("#dd2c00", 2);
chart.getTimeline().edit().stroke(null);
Elements
You can change the way how elements are colored when they are being dragged by users.
First, access an element type (except for connectors) or all elements.
Then combine edit() with methods of the anychart.core.gantt.edit.ElementEdit class:
Please note that sliders on progress bars inherit the settings of tasks. To override them, use the edit() method of progress bars.
To set the preview stroke of connectors, use the previewStroke() method of connectors.
In the sample below, fill and stroke settings are applied to all elements and overridden for baselines and progress sliders. Also, the preview stroke of connectors is set.
// allow editing the chart
chart.edit(true);
// configure the appearance of timeline elements in the live edit mode
var timeline = chart.getTimeline();
timeline.elements().edit().fill("#dd2c00", 0.2);
timeline.elements().edit().stroke("#dd2c00", 2);
timeline.baselines().edit().stroke("#dd2c00", 2, "5 2", "round");
timeline.tasks().progress().edit().fill("#00bfa5");
timeline.connectors().previewStroke("#dd2c00", 2, "5 2", "round");
Controls
You can configure controls - duration and connector thumbs on elements and sliders on progress bars.
First, access an element type (except for connectors) or all elements.
Then combine edit() with methods of the anychart.core.gantt.edit.ElementEdit class:
- thumbs() to access duration thumbs
- connectorThumbs() to access connector thumbs
- start() + thumb() / connectorThumb() to access thumbs on the left sides of elements
- end() + thumb() / connectorThumb() to access thumbs on the right sides of elements
To configure duration thumbs and connector thumbs, use methods of anychart.core.gantt.edit.Thumb:
- type() + enums from anychart.enums.MarkerType to set the type
- fill() and stroke() to set the fill and stroke
- size() to set the size
- horizontalOffset() and verticalOffset() to set the horizontal and vertical offset
To adjust sliders on progress bars, use the edit() method of progress bars or let them inherit the settings of tasks, as shown in the Elements section above.
The following sample shows how to configure thumbs. Please note that there are connector thumbs of different types on the left and on the right sides of elements:
// allow editing the chart
chart.edit(true);
// access the timeline and timeline elements
var timeline = chart.getTimeline();
var elements = timeline.elements();
// configure duration thumbs
elements.edit().thumbs().size(10);
elements.edit().thumbs().stroke("#dd2c00", 2);
elements.edit().thumbs().fill("#00bfa5");
// configure connector thumbs
elements.edit().connectorThumbs().size(15);
elements.edit().connectorThumbs().fill("#dd2c00");
elements.edit().connectorThumbs().stroke("#dd2c00", 2);
// configure connector thumbs on the right
elements.edit().end().connectorThumb().type("triangleRight");
elements.edit().end().connectorThumb().horizontalOffset(-1);
// configure connector thumbs on the left
elements.edit().start().connectorThumb().type("triangleLeft");
elements.edit().start().connectorThumb().horizontalOffset(1);
// configure sliders of progress bars
timeline.tasks().progress().edit().fill("#00bfa5");
timeline.tasks().progress().edit().stroke("#dd2c00", 2);
Events
The events triggered by users' actions in the Live Edit mode are listed in the Default Behavior section of this article. The Events article explains how to handle them and change the default behavior.