Easily Export JavaScript Dashboard Visualizations to PDF

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.

What is an Easy Way to Create a Beautiful and Insightful SaaS Dashboard?

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!

How Can I Quickly Export Data Visualizations to PDF Using FusionExport?

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:

FusionExport Server Setup

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.

Node.js SDK Installation

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

How do I Export a Template HTML to PDF?

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

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.

What about Facilitate.com and Export Data Visualizations to PDF?

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.

Are you ready to get started?

Download FusionExport and get started today!