When it comes to enterprise-level data visualizations, the dashboard is the medium that showcases an organization’s most important metrics. The ability to export data visualizations to pdf simply makes sharing those metrics easier.

As you know, dashboards graphically represent enterprise information and enable higher-quality data analysis and the implementation of informed decisions. This is because a well-designed enterprise dashboard provides decision-makers with all of the data beneficial to organizational growth. The result, if implemented properly, is better policies and more desirable business outcomes.

While an on-screen dashboard is ideal for real-time discussions or in-person corporate presentations, there are times when that simply isn’t enough. Imagine a scenario where the department head loves your presentation and requests a copy to show his own boss. The solution is simple, you can export data visualizations to PDF with FusionExport.

The simplest way to export your infographic dashboard is to generate a PDF report.  You may think the process is a tedious one, but it isn’t. Not if you have FusionExport.

Read on to learn how you can 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 done.

saas-dashboard

How can I quickly export data visualizations to PDF using FusionExport?

Once your FusionCharts dashboard is up and running you can get started learning how to export that information to PDF using FusionExport and Node.js SDK. here is how it is done:

FusionExport Server Setup

Before you can actually proceed with writing 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

Exporting 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 be able to 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 key difference is that, in this instance, you create a separate HTML file and load it into your JavaScript code instead of creating an HTML string directly in your JavaScript file. This prevents the code from becoming a mess and promotes best practice with the separation of 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.

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, here is an interesting case study by Facilitate.com that talks about how FusionExport helped them to 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 to export data visualizations to PDF and create incredible reports.

Download FusionExport and get started today!

Take your data visualization to a whole new level

From column to donut and radar to gantt, FusionCharts provides with over 100+ interactive charts & 2,000+ data-driven maps to make your dashboards and reports more insightful

Explore FusionCharts

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Your next great dashboard starts here

With our interactive and responsive charts, extensive documentation, consistent API, and cross-browser support - delight your customers with kick-ass dashboards

Explore FUSIONCHARTS