The dhtmlxGantt library allows you to export data from the Gantt chart in the Excel and iCal formats. You can also import data into Gantt from an Excel file.
There is a common API endpoint https://export.dhtmlx.com/gantt which serves for all export methods (exportToPDF, exportToPNG, exportToMSProject, etc.) and for the importFromExcel method. Max request size is 10 MB.
There is also a separate API endpoint https://export.dhtmlx.com/gantt/project specific for the MSProject export/import services (exportToMSProject/importFromMSProject only). Max request size: 40 MB.
To export data from the Gantt chart to an Excel document, do the following:
gantt.plugins({
export_api: true
});
<input value="Export to Excel" type="button" onclick='gantt.exportToExcel()'>
<script> gantt.init("gantt_here");
gantt.parse(demo_tasks);
</script>
Related sample: Export data : MS Project, PrimaveraP6, Excel & iCal
Related sample: Export data: store online
The exportToExcel() method takes as a parameter an object with several properties (all the properties are optional):
Calling the export method with optional properties
gantt.exportToExcel({
name:"document.xlsx",
columns:[
{ id:"text", header:"Title", width:150 },
{ id:"start_date", header:"Start date", width:250, type:"date" }
],
server:"https://myapp.com/myexport/gantt",
callback: function(res){
alert(res.url);
},
visual:true,
cellColors:true,
data:{},
date_format: "dddd d, mmmm yyyy"
});
The Export module expects the start_date and end_date columns to have the Date type and the duration column to have the number type.
In case of applying custom templates, it is necessary either to return a value of the expected type or to define a different value in the name property of the column configuration. For instance:
gantt.config.columns = [
...
{name: "start_date", align: "center", width: 100, resize: true,
editor: start_dateEditor},
{name: "end_date", align: "center", width: 100, resize: true,
editor: end_dateEditor},
{name: "duration_formatted", align: "center", width: 40, resize: true,
editor: durationEditor,
template: function(task){ return formatter.format(task.duration_formatted); }
},
...
];
Otherwise, the Gantt data won't be exported. Check the related example.
To export the Gantt chart with a custom data set (i.e. not with the data presented in the initial Gantt chart), use the data property in the parameter of the exportToExcel method:
gantt.exportToExcel({
name:"document.xlsx",
data:[
{id:1, text:"Project #1", start_date:"01-04-2020", duration:18},
{id:2, text:"Task #1", start_date:"02-04-2020",duration:8, parent:1},
{id:3, text:"Task #2", start_date:"11-04-2020",duration:8, parent:1}
]
});
Note, you cannot specify some URL as the value of the data parameter, just a data object.
You can add the colors of tasks to the exported Excel file of the Gantt chart via setting the value of the visual property to "base-colors":
gantt.exportToExcel({
visual: "base-colors", cellColors: true
})
Related sample: Export colors of tasks
Since there is no way to automatically map arbitrary columns of the Excel document to Gantt data model, the export service converts a document to an array of rows which is returned in JSON. Conversion of the resulting document to the Gantt data is the responsibility of end developers.
In order to convert an Excel file, you need to send the following request to the export service:
The request parameters are:
For example:
<form action="https://export.dhtmlx.com/gantt" method="POST"
enctype="multipart/form-data">
<input type="file" name="file" />
<input type="hidden" name="type" value="excel-parse">
<button type="submit">Get</button>
</form>
Alternatively, you can use the client-side API:
gantt.importFromExcel({
server:"https://export.dhtmlx.com/gantt",
data: file,
callback: function(project){
console.log(project)
}
});
Related sample: Import Excel file
Where file is an instance of File which should contain an Excel (xlsx) file.
gantt.importFromExcel requires HTML5 File API support.
The response will contain a JSON with an array of objects:
[
{ "Name": "Task Name", "Start": "2018-08-11 10:00", "Duration": 8 },
...
]
where:
gantt.importFromExcel({
server:"https://export.dhtmlx.com/gantt",
data: file,
sheet:2, // print third sheet
callback: function (rows) {}
});
To export data from the Gantt chart to an iCal string, do the following:
gantt.plugins({
export_api: true
});
<input value="Export to iCal" type="button" onclick='gantt.exportToICal()'>
<script> gantt.init("gantt_here");
gantt.parse(demo_tasks);
</script>
Related sample: Export data : MS Project, PrimaveraP6, Excel & iCal
Related sample: Export data: store online
The exportToICal() method takes as a parameter an object with the following properties (optional):
Calling the export method with optional properties
gantt.exportToICal({
server:"https://myapp.com/myexport/gantt"
});
Back to top