Printing huge gantt with customization and pagination

Gantt
#1

Hello,

Let’s say i would like to print a very big gantt (in height, not width) with many activities and links.
I would have to deal with multiple pages.
And on each page, i need to have a header (title), a footer (legend).
What’s the right way to achieve this ?

Can i do it with only 1 gantt object using the lib ? Do i have to create a gantt object for each page ?

And let’s say i want to have an additionnal timeline at the bottom if the user prints in A3 format.
Is there a better way than creating a second gantt with no activity on each page ?

#2

Hello,
Right now, there is no built-in feature to display the header and footer on each page. It will be added in the future update of the export module, but I cannot give you any ETA on when it is going to be available for the online export server. But if you are using the standalone export module or have the license for it, you can try the unreleased version that has this functionality. To do that, you can submit a support request via email, specify the license number and mention this topic.

Otherwise, you need to implement a custom solution by using the Gantt API and Javascript. It is possible to add custom HTML elements to the header and footer` parameters of the export function:
https://docs.dhtmlx.com/gantt/desktop__export.html#parametersoftheexportmethods:~:text=in%20the%20output%20Gantt%20chart-,header,the%20output%20PDF%20image.%20Note%2C%20you%20can%20use%20any%20HTML%20here,-server

So, you can add the elements and include the position: fixed style rules, then the elements will be displayed on each page.
Here is a similar example:
https://snippet.dhtmlx.com/x2vigqyk

But Gantt is printed on the all sizes of the page, and right now, there is no way to change it. So, you can try adding empty task rows that will provide an empty space for the footer and header. You just need to find a proper formula to always have the exact height for the task rows for each page. This approach is described in the following article:

Here is the snippet that can help you to start implementing your solution:
https://snippet.dhtmlx.com/w905ht5t?mode=wide

#3

Hello ramil , sorry for the late reply.
So i checked your last snippet, but i don’t really understand how this export works. The PDF looks like a puzzle with some pages having activites, some are blank, that’s not really what i want.

I made a drawing to show exactly what i want to do :

Is it technically possible to achieve this with DHTMLX ?

#4

Hello,

i want to do :
header / footer / timescale (up + down) on each page

In the current version of the export module, there is no built-in way to display a custom header and footer on each page. You need to implement a custom solution for that. In the future, the dev team will add that feature, but I cannot give you any ETA.

Right now, it works this way:

711×622 63.3 KB

1024×599 69.6 KB

As the article in the blog says, you need to implement a custom solution to not tear the tasks between the pages and to show the header on each page. The easiest way to do that is to add empty task rows. You can use that approach to display the footer as well. But you need to implement a custom solution to calculate the sizes of empty task rows for each page.

To show custom elements on each page, you need to add the position: fixed style rule.
Here is an example:
https://snippet.dhtmlx.com/qjkh2x55

And this is how it works in combination with the implementation of creating empty task rows:
https://snippet.dhtmlx.com/bahly0gq

i want to do :
link between activities cross pages

Gantt is exported the same way as you would see in the browser (except headers). So, if there are some parts of Gantt that don’t have the tasks, you will also have that in the exported file.

If there is a link between tasks, it will be displayed across the pages.

If you want to hide some dates that don’t have any tasks, you need to do that before exporting the data. For that, you can use the ignore_time function:
https://docs.dhtmlx.com/gantt/api__gantt_ignore_time_other.html

Here is an example of how it can be implemented:

And this is how it works with the export function:
https://snippet.dhtmlx.com/5qb6gn06

#5

Thanks for your answer.
That may be a dumb question but I see that all your snippets are using the exportToPDF function.
What’s the difference between this function, and just displaying the full gantt in a blank page, with my fixed headers / footers / empty tasks / cutomization , and pressing CTRL+P → save as PDF ?

The added value of exportToPDF is not clear to me as i only want to get vertical multi pages gantt, and that i have very specific needs that are not covered yet by the function (header / footer / timescale on each page + more specific things like possibility to have multiple milestones on the same line , and possibility to duplicate parent tasks on the next page to not loose track of where we are in the gantt

#6

Hello,
The browser print function is an alternative way to export the data from Gantt. The main difference is that the browser has limited formats, but the export module allows exporting huge charts in the same file (for example 50000 tasks within 137 years). In most cases, this is related to a single page in PDF, but you can also do that with multiple pages, though, it takes more time and server resources. Also, it is possible to customize the sizes instead of using the predefined formats.

The browser printing can be a better option if the chart can fit the predefined sizes or if you want to export unsafe elements (for example, Canvas).
By using the Zoom-to-Fit functionality, you can shrink Gantt and make it fit the sizes:

1918×994 253 KB

https://docs.dhtmlx.com/gantt/samples/?sample='03_scales/13_zoom_to_fit.html'&filter=''