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:

Defaults

Controls

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.

Compound action	Interaction	Typical effect	Pointers
Timeline part
Connectors creating	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.	A pointer that is shown when a connector thumb is hovered The connector thumb shown when the interval is hovered The unconnected connector line That's how the final connector looks like
Connector deleting	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.	The pointer cursor which is shown when the connector is hovered and selected
Duration changing	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	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.	The dragger
Changing the duration of 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
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("arrowLeft");
timeline.editFinishConnectorMarkerType("arrowRight");

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);

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 (anychart.enums.EventType.TREE_ITEM_MOVE),
  • "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: anychart.enums.EventType.TREE_ITEM_MOVE
  • source: null
  • sourceIndex: null
  • target: "Part 3"
  • targetIndex: 2
  • item: "Part 1"

    var tree = anychart.data.tree(getData(), anychart.enums.TreeFillingMethod.AS_TABLE);
    tree.listen(anychart.enums.EventType.TREE_ITEM_MOVE, 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 (anychart.enums.EventType.TREE_ITEM_UPDATE)
• "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(), anychart.enums.TreeFillingMethod.AS_TABLE);
  tree.listen(anychart.enums.EventType.TREE_ITEM_UPDATE, 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": anychart.enums.EventType.TREE_ITEM_UPDATE
• "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 (anychart.enums.EventType.TREE_ITEM_CREATE),
• "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(), anychart.enums.TreeFillingMethod.AS_TABLE);
  tree.listen(anychart.enums.EventType.TREE_ITEM_CREATE, 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 (anychart.enums.EventType.TREE_ITEM_REMOVE),
• "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(), anychart.enums.TreeFillingMethod.AS_TABLE);
tree.listen(anychart.enums.EventType.REMOVE, 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. anychart.enums.EventType.BEFORE_CREATE_CONNECTOR),
• "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:

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.

The following sample demonstrates how these fields can be used for providing the user some information about the connectors.

// 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);
});

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.

Baseline changing

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:

• editPreviewFill() - for changing the fill color of the preview bar,
  • editPreviewStroke() - for changing the stroke color of the preview bar,
  • editProgressFill() - for changing the fill color of the progress part of the time interval bar,
  • editProgressStroke() - for changing the stroke color of progress.

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"
});