This is a migrated thread and some comments may be shown as answers.

drawDOM with cloned chart fails

3 Answers 169 Views
Drawing API
This is a migrated thread and some comments may be shown as answers.
Miguel
Top achievements
Rank 1
Miguel asked on 15 Jun 2017, 12:40 PM

Hi! I'm trying to make a PDF report via drawDOM, this report will need to have a grid and a chart that is being displayed in the site, but also a header that I need to add, that wont be displayed in the site.

Since drawDOM requires for the elements to be visible in the DOM, I clone the grid and the chart into a container, add my header, then export it whole. Grid works fine but the chart fails and I'm not sure why.

Here is an example with this issue: http://dojo.telerik.com/OvOrE

3 Answers, 1 is accepted

Sort by
0
Accepted
T. Tsonev
Telerik team
answered on 19 Jun 2017, 08:07 AM
Hello,

The drawDOM implementation does not support rendering SVG elements. As a result, the Chart instance takes over its own rendering during export.
This works because the intermediate format for the exported document and for the Chart is a Drawing API scene.

As you've noticed this doesn't work with a cloned Chart instance. To get around this you can keep the clone visible and move the Chart off-screen during export.

Regards,
T. Tsonev
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Miguel
Top achievements
Rank 1
answered on 21 Jun 2017, 05:05 PM

If I'm understanding correctly:

1. Clone the HTML of the chart.

2. Replace full chart in the site with the HTML clone.

3. Move full chart to the export container.

4. Export.

5. Bring back chart to it's original place in the site.

6. Delete HTML clone.

 

I'll have to try it to see how it behaves but it makes sense and it avoids having to re-create the chart with the data.

0
Accepted
T. Tsonev
Telerik team
answered on 23 Jun 2017, 01:32 PM
Hello,

That's pretty much it. It should not be necessary to re-create the chart as it's only being moved in the DOM.

Regards,
T. Tsonev
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Drawing API
Asked by
Miguel
Top achievements
Rank 1
Answers by
T. Tsonev
Telerik team
Miguel
Top achievements
Rank 1
Share this question
or