This content originally appeared on Level Up Coding - Medium and was authored by Maksym Mostovyi
Exporting Dashboard Charts To PDF In 5 Steps.
Here I will explain how easy it is to extract charts out of Dashboard with one of the open-source JavaScript libraries and several lines of code.
To get started, I just created a simple dashboard with 3 charts: line chart, bar chart, and pie chart. For charting I used ChartJS, but we can use different charting libraries like D3, ECharts, etc. In the header of each chart widget, we need to add a button that will trigger the export. Here is how the dashboard looks like:
The next step is the implementation of export functionality. For that, we can use jsPDF. It’s an open-source JavaScript library that will help us to convert charts to PDF. It can be used with any JS framework, but in my example, I will use it with vanilla JavaScript.
The library can be imported to a project using CDN. Functionality should be called once we click on the export button. Let’s implement it in the next five steps:
- Selecting a chart element.
- Converting it to an image.
- Declaring jsPdf with preferred orientation.
- Adding an image to PDF with png format and proper dimensions.
- Saving PDF.
Here is how the code looks like:
I’ve wrapped all these steps mentioned above into a separate function to avoid code duplication. Everything that function requires is an id of elements and dimensions. These are passed as arguments. By the way, full implementation of the dashboard you can find in my GitHub.
As you see the implementation takes just 5 lines of code and functionality is done. It is worth saying that this is just quite a simple example. In the real scenario, maybe, we would want to add some text, title, paging, and so on. And it is actually possible, for that we need to refer to jsPDF docs.
Hope my quick guide was helpful. Try it yourself, because practice is the best wrapping up. Cheers!
Exporting Dashboard Charts To PDF was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by Maksym Mostovyi
Maksym Mostovyi | Sciencx (2022-01-04T15:17:36+00:00) Exporting Dashboard Charts To PDF. Retrieved from https://www.scien.cx/2022/01/04/exporting-dashboard-charts-to-pdf/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.