# Drawing FlexPie in PDF

Learn how to add charts to Wijmo's PDF module in this tutorial 

## Content


## As a Raster Image

Any __FlexChartBase__-based control can be converted into a raster image. Here is the technique to do so:

* Instantiate __FlexPie__ control.
* Convert it to a raster image using the control's __saveImageToDataUrl__ method.
* Draw the image onto the document using the __PdfDocument__'s __drawImage__ method.

```javascript
flexPie.saveImageToDataUrl(chart.ImageFormat.Png, (url) => {
    doc.drawText('Total expenses by category:');
    doc.drawImage(url);
    doc.end();
});
```

#### Raster image in PDF
![PDF Raster](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/pdf/pdf-flexpie-raster.png)

Check out the Demo [here](/wijmo/demos/PDF/DrawingFlexPieSVG/purejs) 

## As SVG

The same technique can be applied to the create an SVG image:

* Instantiate __FlexPie__ control.
* Convert it to a SVG image using the control's __saveImageToDataUrl__ method.
* Draw the image onto the document using the __PdfDocument__'s __drawSvg__ method.

The only difference here is the __drawSvg__ method is invoked instead of __drawImage__.

```javascript
flexPie.saveImageToDataUrl(chart.ImageFormat.Svg, (url) => {
    doc.drawText('Total expenses by category:');
    doc.drawSvg(url);
    doc.end();
});
```

#### SVG image in PDF
![PDF SVG](https://cdn.mescius.io/document-site-files/images/3c7113e2-10b3-45ed-8f3b-9fb1e0af2b74/pdf/pdf-flexpie-svg.png)

Check out the Demo [here](/wijmo/demos/PDF/DrawingFlexPieSVG/purejs) 

> __Note__: You can use this technique for any of the Charts in Wijmo (not just FlexPie).