We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Pivot Table Chart Custom export

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


5 Replies 1 reply marked as answer

AP AngelinFaithSheeba PaulvannanRajadurai Syncfusion Team October 10, 2022 08:58 AM

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.



FI Filippo October 10, 2022 09:16 AM

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.


Marked as answer

AP AngelinFaithSheeba PaulvannanRajadurai Syncfusion Team October 11, 2022 09:12 AM

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(img00);

      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.



FI Filippo October 14, 2022 03:33 AM

Hi, thanks for support.

It was helpul.


Regards,

phil.



AP AngelinFaithSheeba PaulvannanRajadurai Syncfusion Team October 17, 2022 01:07 AM

Hi Filippo,


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


Regards,

Angelin Faith Sheeba.


Loader.
Live Chat Icon For mobile
Up arrow icon