Flex charts are not scaling properly on export to pdf

Flex charts are not scaling properly on export to pdf

Posted by: spathi on 6 May 2019, 6:52 pm EST

• 

  spathi

  • Post Options:
  • Link
    Copy

  Posted 6 May 2019, 6:52 pm EST

  On exporting flex charts to pdf the charts are truncated in the pdf document.
  
  screenshots.zip

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 7 May 2019, 10:08 pm EST

  Hi,

  You need to set the width/height to fit image without the document’s boundary. Please refer to the following code snippet and the sample demonstrating the same:

  document.getElementById('btnExport').addEventListener('click', ()=>{
    let doc = new wijmo.pdf.PdfDocument({
        ended: (sender, args) => {
          wijmo.pdf.saveBlob(args.blob, 'sample.pdf')
        }
    });  //
    doc.drawText('Exporting chart to PDF');
    theChart.saveImageToDataUrl(wijmo.chart.ImageFormat.Svg, (url) => {
      doc.drawSvg(url, null, null, {
        width: doc.width
      });
      doc.end();
    });
  });
  

  https://stackblitz.com/edit/js-jcmizt?file=index.js

  ~sharad

• 

  spathi

  • Post Options:
  • Link
    Copy

  Posted 9 May 2019, 8:44 pm EST

  Thanks. The charts are scaling properly now.

  I have a requirement where we need to export items such as flex-charts, flex-grids and also linear and radial gauges to a pdf. I was able to export the charts and grids to a single pdf.
  
  Is there any way that we can export wj-linear-gauge and wj-radial-gauge to the pdf that includes the charts/grids.

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 12 May 2019, 6:25 pm EST

  You could use the PrintDocument class to convert controls like gauges to pdf. Please refer to the sample below:

  https://stackblitz.com/edit/angular-oxggt2

• 

  spathi

  • Post Options:
  • Link
    Copy

  Posted 15 May 2019, 1:06 am EST

  I used the PrintDocument to convert the gauges to pdf.

  When copyCss is set to true ( which is by default ) the graphs are rendering but no text is visible ( any text that is appended to the document and also the graph values ) in the document.

  On setting copyCss to false, all the text that is appended appears in the document but the radial gauge takes up the space of the entire document.

  It does not take the css when applied from the addCss method as well.screenshots.zip

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 17 May 2019, 12:06 am EST

  Since gauges are also svg elements, you could convert them to dataURI and then use PdfDocument’s drawSvg() method to draw them to pdf. Please refer to the following sample which demonstrates the same:
  
  https://stackblitz.com/edit/js-aecxar?file=index.js