Events and Gantt data serialization

This tutorial will look at the way we can use Gantt chart’s events to track for changes, serialize, and restore the data.

Events

Data changes

Use "valueschanged" event of the Gantt chart, to track all changes on the chart’s data: tasks added and removed, dragged, resized, linked, etc.

TypeScript

chart.events.on("valueschanged", function(ev) {
  // Values changed
});

JavaScript

chart.events.on("valueschanged", function(ev) {
  // Values changed
});

"valueschanged" event is executed every time something changes, including intermediate values, when animations are playing out. To avoid wasteful repetition of the event handler calls, we can use “debounced” events instead:

TypeScript

chart.events.onDebounced("valueschanged", function(ev) {
  // Values changed
  // This will execute only once after 500ms of the last "valueschanged" invocation
}, 500);

JavaScript

chart.events.onDebounced("valueschanged", function(ev) {
  // Values changed
  // This will execute only once after 500ms of the last "valueschanged" invocation
}, 500);

Markers added or removed

When markers are added or removed, the Gantt chart invokes its "datemarked" and "dateunmarked" events respectively.

TypeScript

gantt.events.on("datemarked", function(ev) {
  console.log("Date marked: " + ev.date + " (" + new Date(ev.date) + ") in " + ev.dataItem.get(name));
});

gantt.events.on("dateunmarked", function(ev) {
  console.log("Date unmarked: " + ev.date + " (" + new Date(ev.date) + ") in " + ev.dataItem.get(name));
});

JavaScript

gantt.events.on("datemarked", function(ev) {
  console.log("Date marked: " + ev.date + " (" + new Date(ev.date) + ") in " + ev.dataItem.get(name));
});

gantt.events.on("dateunmarked", function(ev) {
  console.log("Date unmarked: " + ev.date + " (" + new Date(ev.date) + ") in " + ev.dataItem.get(name));
});

Serializing data

For a complete snapshot of the Gantt chart’s data, we need to query three data storages:

• Series data
• Category axis’ data
• Primary timeline axis’ marker data

The following example extracts all three and serializes into a JSON forma, suitable for transfer to a backend or saving into browser’s local storage.

TypeScript

// Get data
const ganttData = {
  axis: chart.yAxis.data.values,
  series: chart.series.data.values,
  markedDates: chart.xAxisMinor.axisRanges.values.map(function(range) {
    return range.get("value");
  })
};

// Serialize data into string for storage
const gantDataSerialized = JSON.stringify(ganttData);

JavaScript

// Get data
var ganttData = {
  xAxis: chart.yAxis.data.values,
  series: chart.series.data.values,
  markedDates: chart.xAxisMinor.axisRanges.values.map(function(range) {
    return range.get("value");
  })
};

// Serialize data into string for storage
var gantDataSerialized = JSON.stringify(ganttData);

Loading saved data

To load series and axis data, simply use their respective data.setAll() methods.

To restore marker data, use Gantt chart’s markDate() method.

TypeScript

// Unserialize data
const ganttData = JSON.parse(gantDataSerialized);

// Set series and axis data
chart.yAxis.data.setAll(ganttData.axis);
chart.series.data.setAll(ganttData.series);

// Mark dates
am5.array.each(ganttData.markedDates, function(value) {
  chart.markDate(value);
});

JavaScript

// Unserialize data
var ganttData = JSON.parse(gantDataSerialized);

// Set series and axis data
chart.yAxis.data.setAll(ganttData.axis);
chart.series.data.setAll(ganttData.series);

// Mark dates
am5.array.each(ganttData.markedDates, function(value) {
  chart.markDate(value);
});

Example

The following example shows how Gantt events can be used to track any changes, serialize and store them in browser’s local storage, for retrieval and loading across multiple sessions.

Open in CodePen