The dashboard is the medium that showcases an organization’s most important metrics when it comes to enterprise-level data visualizations. The ability to export data visualizations to pdf makes it easier to share those metrics.
Business dashboards, as you may be aware, graphically represent enterprise information, allowing for higher-quality data analysis and the implementation of informed decisions. This is due to the fact that a well-designed enterprise dashboard provides decision-makers with all relevant data for organizational growth. If implemented correctly, the end result is better policies and more desirable business outcomes.
While an on-screen dashboard is ideal for real-time discussions or in-person corporate presentations, it isn’t always sufficient. Consider the following scenario: the department head likes your presentation and wants a copy to show his boss. The solution is simple: use FusionExport to export data visualizations to PDF.
The most straightforward way to export your infographic dashboard is to create a PDF report. You might think the process is time-consuming, but it isn’t. Not if you have FusionExport installed.
In this post, you’ll learn how to create powerful SaaS dashboards, export your data visualization dashboards, and transform them into beautiful PDF reports with FusionCharts and FusionExport.
Table of Contents
For the sake of this tutorial, we will refer to one of our previous tutorials that talks in detail about creating powerful SaaS dashboards with JavaScript and Bootstrap. If you already have your dashboard prepared and are ready to move ahead with generating PDF reports, then this tutorial is for you. If you haven’t created your dashboard yet, don’t worry about it. Go back and take a look at the tutorial. We will still be here when you are through!
Once your FusionCharts dashboard is up and running, you can learn how to export that information to PDF using FusionExport and Node.js SDK. Here is how you can do it:
Before you can write the code to export the PDF reports, you need to download and install the FusionExport server. It supports a variety of different languages and platforms. Go ahead and download the one that matches your preferences.
After downloading the zip file you need, unzip it, navigate to the main package directory, and run the following command.
./fusionexport
This will start your FusionExport server on the default port 1337.
After you have the FusionExport server set up, you need to install the Node.js SDK. The Node.js SDK will serve as the client for the FusionExport server.
Initiate a new Node project and run the following command to add the FusionExport Node client to your Node project.
npm install fusionexport-node-client --save
Before we make our dashboard available for PDF export, you need to create a simple HTML template that converts your data to PDF upon exporting. You can do that as follows:
Create a new JavaScript file, and call it export-dashboard.js. Next you need to import and initialize all the relevant dependencies you need for the PDF conversion.
const {
ExportManager,
ExportConfig
} = require('fusionexport-node-client'); const exportConfig = new ExportConfig(); const exportManager = new ExportManager();
After initializing the required modules, you will need to set up some basic configurations which tell the system that it needs to export our stuff in the form of a PDF.
let template = '<h1>Exporting PDF with FusionExport</h1>';
exportConfig.set('template', template);
exportConfig.set('type', 'pdf');
exportConfig.set('templateFormat', 'a4'); Once you have all your configuration done, you are ready to export your first HTML page to PDF. To do that, use the following piece of code:
exportManager.export(exportConfig, outputDir = '.', unzip = true)
.then((exportedData) => {
exportedData.forEach(data => console.log(data));
})
.catch((err) => {
console.log(err);
}); Upon running the following command in the terminal, you should see your HTML template exported as a PDF file. You can find it in your main project directory.
node export-dashboard.js
Exporting Your Dashboard to PDF is similar to how you exported the HTML template. The critical difference is that, in this instance, you create a separate HTML file and load it into your JavaScript code instead of making an HTML string directly in your JavaScript file. This prevents the code from becoming a mess and promotes best practices by separating concerns within your code.
Create a new file. Call it export-dashboard.html, and write the following piece of code into it.
<html>
<body>
<h1>Dashboard Export with FusionExport</h1>
<div id="dashboard"></div>
<script>
// Your FusionCharts Dashboard Code Goes Here...
</script>
</body>
</html> When you are done, the final code to export your dashboard to PDF should look something like the following:
const {
ExportManager,
ExportConfig
} = require('fusionexport-node-client'); const path = require('path'); const exportConfig = new ExportConfig(); const exportManager = new ExportManager();
const dashboardHTML = path.join(__dirname, 'export-dashboard.html');
exportConfig.set('dashboardFilePath', dashboardHTML);
exportConfig.set('type', 'pdf');
exportConfig.set('templateFormat', 'a4');
exportConfig.set('asyncCapture', true); exportManager.export(exportConfig, outputDir = '.', unzip = true)
.then((exportedData) => {
exportedData.forEach(data => console.log(data));
})
.catch((err) => {
console.log(err);
}); Upon running the
node export-dashboard.js
command again, in the main project directory, you should see your dashboard exported as a PDF file.
And that is it. Now you can easily export your FusionCharts dashboard and create PDF reports for further analysis and discussion.
If you want to learn more about how this works in a real-life use case, an interesting case study by Facilitate.com talks about how FusionExport helped them brainstorm and evaluate ideas for their legacy product FacilitatePro.
FusionExport has made it effortless to export complex dashboard designs and convert them into PDF reports. In addition to FusionCharts, FusionExport also works seamlessly to export your dashboards with Charts.js, HighCharts, D3.js, and others.
Comment below to tell us how FusionExport helped you export data visualizations to PDF and create incredible reports.
You can build complex web applications easily with Angular. But it’s a challenge to present…
JavaScript charts help transform raw data into clear, interactive visualizations that users can easily understand.…
Modern web applications depend on data visualization to transform complex information into clear, actionable insights.…
Data is a big part of modern software. Companies use charts to track sales, monitor…
Every day, businesses get more data than ever before. Looking at endless rows and columns…
Building interactive React charts from scratch can quickly become complicated. It becomes even more challenging…