Pivot Table Chart Custom export

[Filippo]

Hi, thanks for support.

I'm working with Syncusion ej2 for react inside NextJs and I'm trying to set up a pivot table with it's own chart.

In documentation I found the chartExport method to export ONLY the chart.

I would like to know if there was a way to bypass saving the file directly to send it to an API that would allow me to save it server-side.

What I found: ref.current.exportChart(...) -> browser download

What I need: ref.current.customExportChart(..) -> blob/file/what image format you want  -> api -> sever saving

Thanks, again,

phil

[AngelinFaithSheeba PaulvannanRajadurai]

Hi Filippo,

We regret to inform you that currently we don’t have support to generate the blob data in chart exporting.

Please let us know if you have any concerns.

Regards,

Angelin Faith Sheeba.

[Filippo]

Hi, thanks for your support.

I was able to find a way to achieve the same result.

I know that is not technically correct but I believe that this is the only way to do what I need.

Through a ref, I use the chart prop to obtain the rootID, which allows access, via DOM, to the outerHTML of the chart, which is in saveable and interpretable SVG format.

const pivotChart = PivotViewRef.current.chart
let CHARTSVG = document.getElementById(pivotChart.canvasRender.rootId).children[1].outerHTML
console.log(CHARTSVG)

Thanks again,

have a good day,

phil.

[AngelinFaithSheeba PaulvannanRajadurai]

Hi Filippo,

We have prepared a sample to get the base64 string of the chart image. Please check the snippet and sample below.

Code example:

exportClick() {

    var svg = document.querySelector('#PivotView_chart_svg');

    var svgData = new XMLSerializer().serializeToString(svg);

    var canvas = document.createElement('canvas');

    document.body.appendChild(canvas);

    var svgSize = svg.getBoundingClientRect();

    canvas.width = svgSize.width;

    canvas.height = svgSize.height;

    var ctx = canvas.getContext('2d');

    var img = document.createElement('img');

    img.setAttribute('src', 'data:image/svg+xml;base64,' + btoa(svgData));

    img.onload = function () {

      ctx.drawImage(img, 0, 0);

      var imagedata = canvas.toDataURL('image/png');

      console.log(imagedata); // printed base64 in console

      canvas.remove();

    };

  }

Sample: https://stackblitz.com/edit/react-8hg8d3?file=index.js

Output screenshot:

Please let us know if you have any concerns.

Regards,

Angelin Faith Sheeba.

[Filippo]

Hi, thanks for support.

It was helpul.

Regards,

phil.

[AngelinFaithSheeba PaulvannanRajadurai]

Hi Filippo,

Please contact us if you have any other queries. We are always happy to assist you.

Regards,

Angelin Faith Sheeba.