Live Edit UI

Overview

The Live Edit mode allows you to edit any part of your Gantt chart without touching the code. All you need to do is to use the mouse to change the duration, position or connections.

In the following sample you can disable or enable editing mode and try to change whatever you like:

JsFiddle Playground

Defaults

There are several pointer cursors a user can see while working with AnyGantt. They are used to edit intervals and Gantt charts' data tree structure, and those changes are displayed by the Gantt diagram.

All controls' appearance can be edited by using special methods, which are described below, or by choosing the theme you prefer.

Action Interaction Effect Pointers
Creating connectors Position the pointer over the connector thumb of an interval or a milestone, press the button and move the mouse. If you haven't pointed the interval you want to connect with, there is a preview line drawn to help the user not to get lost; the timeline and data grid both will be scrolled while dragging the connector line inside the scale total range. If you hover the bar you want to connect with, there's a final connector preview shows up: depending on where the bar is hovered (left or right part), the connector will stick to the appropriate side. Release the mouse button. If you hover the interval bar, watch the final connector preview and then release the mouse, there will be the "beforeCreateConnector" event dispatched by the Gantt diagram (or by its timeline, if it was created in the standalone mode) unless it was prevented. Then the connector will be created and the intervals will become logically connected. If the "beforeCreateConnector" event was prevented, no connector will be created.
You can find more about events in Event Listeners article.
One interval becomes connected to another and the connector is shown. Connector creater
A pointer that is shown when a connector thumb is hovered

Connector thumb
The connector thumb shown when the interval is hovered

Dashed connector
The unconnected connector line

Final connector
That's how the final connector looks like
Deleting connectors Hover the connector and select it. The cursor will become of a pointer type, the connector will become of an orange color. To remove the connector, press "Delete" in Windows or "cmd+Backspace" in Mac. The connector will be removed. The connector will be destroyed.

Progress slider
The pointer cursor which is shown when the connector is hovered and selected

Changing duration Hover the duration changing thumb, press the left mouse button and drag the cursor. You will see the preview contour - a preview of the interval duration. You can drag it to any date you need, the scale range will be automatically lengthened if necessary. When you release the button, the "update" event will be dispatched by the Gantt tree. Find more information about those events downwards. The actual time or the baseline interval becomes longer of shorter

Horizontal resizer
The horizontal resizer

Drag&drop Hover the interval or a milestone, press the button when the pointer is of dragging type, drag it to the place where you need to put it (scale range will change automatically). The data tree will dispatch the "update" event immediately. Read about Gantt events in the following. Drags the interval through the time without lengthening or shortening it.

Dragger
The dragger

Changing the progress Hover the bar, look for the slider and press the button. Drag it and drop where needed. At this moment the Gantt tree dispatches the "update" event. Read more about events below. Lengthens or shortens the progress part of the task.

Progress slider
Progress slider

Data Grid part
Changing the Gantt chart tree structure Hover the row (item), press the button and drag it to wherever you need. When you release the button, the tree will dispatch the "move" event. Note that there are some situations when you cannot change the structure: it's not possible to make the item a child of itself and a milestone is not able to have children. Changes the Gantt chart tree structure visually and logically.

Customizing Controls

The controls above are shown in their default state. AnyChart provides anyone an opportunity to become unique and remarkable, so it is not hard to customize colors and shapes of all chart details - even so small as Live Edit Chart Controls.

When an interval on a Live Edit Chart is hovered, its controls appear. It is possible to drag the interval, make it longer or shorter, drag the scroller or connect this interval to another one. To make the connectors' controls of another type, size or color, just use the editStartConnectorMarkerType() and editFinishConnectorMarkerType() methods - those are responsible for the connector marker type, which you can choose from the Marker Type List.

// set the connector control marker type
timeline.editStartConnectorMarkerType("arrow-left");
timeline.editFinishConnectorMarkerType("arrow-right");

The editStartConnectorMarkerSize() and editFinishConnectorMarkerSize() methods manage the size of the start and finish connector controls of an interval.

// set the connector control marker size
timeline.editStartConnectorMarkerSize(30);
timeline.editFinishConnectorMarkerSize(30);

To set the desired position for both connector controls, use the editStartConnectorMarkerHorizontalOffset() and editFinishConnectorMarkerHorizontalOffset() methods. They accept integer values (px). Positive values will shift the controls to the right and negative ones will shift them to the left.

// set the connector control marker offset
timeline.editStartConnectorMarkerHorizontalOffset(10);
timeline.editFinishConnectorMarkerHorizontalOffset(-10);

The editStartConnectorMarkerVerticalOffset() and editFinishConnectorMarkerVerticalOffset() methods do the same as a couple of previous ones, but in vertical direction. Positive values will shift the controls downwards and negative ones will shift them upwards.

// set the connector control marker offset
timeline.editStartConnectorMarkerVerticalOffset(-7);
timeline.editFinishConnectorMarkerVerticalOffset(7);

There are other controls on an interval. The editIntervalWidth() method changes the width of the conrol which helps to change the interval's length:

// the width of the interval length editor
timeline.editIntervalWidth(15);

JsFiddle Playground

Events

Changes made in Live Edit mode lead to data changes. Events can be used to track and handle the changes.

Data Tree Events

move

The data tree dispatches the "move" event when the Gantt chart tree structur is changed. Gantt chart dispatch this when it catches the live mode changes in Gantt charts' data structure made by user. It has several fields:

  • "type": the event type ("treeItemMove"),
  • "source", the data item where item is moved from,
  • "sourceIndex": the "source" item index,
  • "target": the data item where item is moved to,
  • "targetIndex": the target item index,
  • "item": the item moved (dragged and dropped).

For example: the parent item "Part 1" is moved inside another parent item, "Part 3", making the Gantt tree arborize. Then the "move" event will be dispatched with these parameters:

  • type: "treeItemMove"
  • source: null
  • sourceIndex: null
  • target: "Part 3"
  • targetIndex: 2
  • item: "Part 1"
var tree = anychart.data.tree(getData(), "as-table");
tree.listen("treeItemMove", function(e){
	chart.title.text("The " + e.itemIndex + " item was moved");
});

update

"Update" event will be dispatched by the data tree when anything is changed. For example, if you move an actual time bar of any task or process, there will be "update" event dispatched by the Gantt chart data tree because of changing the fields' values.

Our "update" event includes the following fields:

  • "type": the event type ("treeItemUpdate")
  • "item": a DataItem object
  • "path": path to the field with changed value, always in array format
  • "field": the field which value was changed
  • "value": the new value for the field
var tree = anychart.data.tree(getData(), "as-table");
tree.listen("treeItemUpdate", function(e){
	chart.title.text("The " + e.itemIndex + " item was updated");
});

For example: the second period of a tree data item "Act 1" is made longer. The start date was 02/27, end date 03/03. The end date is changed to 08/03. So, there will be one field edited - "actualEnd" of the second period. Then the "update" event will have these parameters:

  • "type": "treeItemUpdate"
  • "item": "Act 1"
  • "path": ["periods", 1, "end"]
  • "field": "periods"
  • "value": 1425772800000

create

The "create" event is dispatched when a new tree data item is created. It has the following fields:

  • "type": the event type ("treeItemCreate"),
  • "target": the name of the target where the new object is put in,
  • "targetIndex": the index of a target,
  • "item": a DataItem object.
var tree = anychart.data.tree(getData(), "as-table");
tree.listen("treeItemCreate", function(e){
 	chart.title.text("The " + e.itemIndex + " item was created");
});

remove

When an object is removed, the Gantt tree dispatches the "remove" event. Its fields are similar to those the "create" event has:

  • "type": the event type ("treeItemRemove"),
  • "source": the name of the target where the object is removed from,
  • "sourceIndex": the index of a source,
  • "item": a DataItem object.
var tree = anychart.data.tree(getData(), "as-table");
tree.listen("treeItemRemove", function(e){
	chart.title.text("The " + e.itemIndex  " item was removed");
});

Grid Events

beforeCreateConnector

The "beforeCreateConnector" event is similar to the "create", but this is dispatched by the Gantt diagram opposite to Gantt tree in other events situations and it is dispatched before the action itself, so it will not have any information about the source. To get this information one has to listen to the "update" event. The fields of the "beforeCreateConnector" event are:

  • "type": the event type (e.g. "beforeCreateConnector"),
  • "source": which data item the connector starts from,
  • "target": which data item the connector ends at (is connected to),
  • "connectorType": the connector type.

Connector Events

There is a list of events connectors dispatch:

Event Description
connectorselect Dispatched when connector is selected
connectorclick Dispatched when connector is clicked
connectordblclick Dispatched when connector is doubleclicked
connectormouseover Dispatched when the mouse cursor is over a connector
connectormouseout Dispatched when the mouse cursor leaves the connector area
connectormousemove Dispatched when the mouse cursor moves over a connector
connectormousedown Dispatched when the mouse button is pushed down and the mouse cursor is over the connector
connectormouseup Dispatched when the mouse button is released and the mouse cursor is over the connector

These events have several standard fields (such as type, clientX, clientY, etc.), and also some information about the active connector. The table below describes those special fields.

Field Description
fromItemIndex The index of a data item, which connector starts from
toItemIndex The index of a data item, which is the final point for the connector
connType The connector type
fromItem The item which connector starts from
toItem The item which is the final point for the connector
path The path of a connector polyline. Optional
arrow The path of a connector arrow polyline. Optional
fromPeriodIndex The index of a period in the fromItem, which connector starts with. Optional
toPeriodIndex The index of a period in the fromItem, which connector starts with. Optional

The following sample demonstrates how these fields can be used to get information about a connector.

// listen to the connectorclick event and change the title 
chart.listen('connectorclick', function(e){
  chart.title(e.fromItem.get('name') + ' to ' + e.toItem.get('name') + ': ' + e.connType);
});

JsFiddle Playground

Data Grid

You can change the structure of the Gantt chart data by simply dragging any element to wherever you need in the DataGrid.

The parent items can be expanded and collapsed. Click "+"/"-" sign or double-click the row with the item (this might be prevented with the usage of Event Listeners).

Timeline

Change the duration

You can change the duration of the interval, its start and end time. Hover right or left thumbs, see if the control is of this type and drag it.

Drag&Drop

Also you can change the start and end date without changing the duration of the interval - you can simply drag the actual time bar to wherever you want. Hover the element, wait for this control and drag the interval.

Change the connectors

If you need to add the connections of some elements, you can do it also by simply dragging the connector thumb of an actual time bar. Again, hover the side of an actual time bar, catch the connector thumb and drag it to the element you need.

Note that it's not possible to drop connectors into a baseline, as they cannot have ones.

Progress

Another difference between the behavior of the actual time bar and its baseline is in having progress. You may notice that some of the actual time bars are colored differently and the progress part is of dark color. Those are the intervals of parent items, so when you change their progress, you change the progress for the whole group.

Changing baseline

As it has been noted, the baseline bar looks and behaves almost like an actual time bar, with the difference of not having any progress and connectors, as it shows the planned time. The position in time and the duration can be changed using the same controls.

Milestones

You cannot change the duration of a milestone as they have no duration, but you still can drag it to another position. They have no progress as well, because they represent instantaneous events in time.

Scrolling

When you change the length of the time bars or move them or milestones later or earlier than the screen with Gantt chart displays, the display will start scrolling automatically. Also, in live mode the Gantt chart's scales' ranges can automatically expand when the minimum and maximum range values are hit while scrolling.

Coloring

Besides basic Gantt chart elements, there are some more elements which show up in the Live Edit mode. You can alter the view of these elements using special methods described below.

Connectors have only stroke and thumbs (no fill), use the connectorPreviewStroke() method to change the stroke color:

var timeline = chart.getTimeline();

// changing the color of the connector preview to red
timeline.connectorPreviewStroke("red", 1, "5 2");

To change the thumbs' fill and stroke use the editConnectorThumbFill() and editConnectorThumbStroke() methods.

To change the edit preview display use the following methods:

Thumbs fill color and stroke can be changed, use the editIntervalThumbFill() and editIntervalThumbStroke() methods for that:

// sets edit interval thumb fill
timeline.editIntervalThumbFill("red");

You can define colors as objects as well:

// sets edit interval thumb fill
timeline.editIntervalThumbFill({
    color: "red"
});

JsFiddle Playground