Hi,
I wonder if this is even doable…
When I want to export gantt chart using gantt.exportToPNG,
I want to traverse the entire list of tasks, and begin exporting a file at every 15 tasks ( 2 files get created, if I have 30 tasks in total).
Any idea?
Thanks,
Sun
Hello Sun,
It is possible, here is the snippet:
snippet.dhtmlx.com/099037625
But it is not a reliable method to export the data by tasks, because the task is not displayed if there is no its parent. So if you try to export without changing “number_of_tasks” variable, you will get two pages from the snippet, but only the first one will have the data.
You can also try exporting according to a certain dates range. The tasks without parents still won’t be displayed, but it is not a big problem when the task’s parent is a project as projects are resized to get the start date of the earliest task and the end date of the latter task. Here is the snippet:
snippet.dhtmlx.com/801ca85ae
Hi Ramil,
With brute force, I was able to get it to work somehow - I couldn’t believe even my own feat!
Then comes snags where the export doesn’t get translated correctly from screen to export file(png).
I noticed 2 issues:
#1) missing date in the start field on the grid section ( it gets clipped during export)
#2) Empty space to the end of timeline section.
What I see on the screen is NOT what I get in export!
Please help? - see the picture attached below…
Thanks,
Sun
Hello Sun,
I suppose it might happen because of the fonts or styles. If you export the data with the raw: true parameter, Gantt will export everything you see on the page. You need to include custom styles if you have them. But if you zoom the page, that won’t be reflected in the exported file. Also, if the export service doesn’t have access to fonts or styles, they won’t be applied.
Here is an example with zoom and different fonts:
http://snippet.dhtmlx.com/d1ffafd81
If that doesn’t help you, I need a sample of your code to see what exactly affects you. You can modify the snippet above and after you see that it reproduces the issue, click on the “Share” button and copy the link for the snippet.
You are right that I use custom style in the export header.
On the screen, the following style is on:
“.gantt_task_content{ padding-left: 3px;padding-right: 3px; color:#222; overflow: visible; direction: ltr;”
But when it is rendered as in .png export, I would get empty space to the right (as shown above)
If I remove ‘overflow: visible; direction: ltr;’ in the export header style,
The empty space is removed ( this is what I would expect) but then it would clip the text as seen below - see the following picture:
In a nutshell, ‘overflow: visible; direction: ltr’ is applied without problem on screen, but this causes empty space in exporting - it doesn’t translate this particular style 100% when in export.
A) on Screen: … No problem here.
$('#mutable-stylesheet').empty().text('.gantt_task_content{ color:#222; overflow: visible; direction: ltr;}');
B.1) on Export - with empty space … Problem!
…
headerStyleALL = ‘.gantt_task_content{ padding-left: 3px;padding-right: 3px; color:#222; overflow: visible; direction: ltr;} ’;
header = headerStyleALL;
…
gantt.exportToPNG({
name: ‘GLUE_Export_’ + timestamp + ‘.’ + exportType,
server: server,
raw: true,
orientation:“portrait”,
locale: locale,
header: header
});
B.2) on Export - with clipped text - problem!
headerStyleALL = ‘.gantt_task_content{ padding-left: 3px;padding-right: 3px; color:#222;} ’;
The rest is the same as above.
So B.1 and B.2 result in problem although the name of the problem differs.
Very puzzling…
Any idea?
Many thanks,
Sun
A) Screen:
http://snippet.dhtmlx.com/312c9f590
I made the task’s text very long and turned on the style: ‘overflow: visible’
It goes out of the time boundary…
Hello Sun,
Thank you for giving us more details about your case.
We reproduced the issue and I added it in our tracker so the dev team will take care of it.
