Data visualization and reporting app with Electron.js
With the advent of Electron.js, it became possible to develop a cross-platform desktop application using JavaScript, HTML, and CSS — web technologies.
This tutorial aims to cover the basics of building a cross-platform app with Electron and enabling it with data visualization and reporting functionality.
The philosophy of the framework is “Write once and distribute everywhere”. Hence, your reporting app will run on all popular platforms and fit a wide audience of end-users.
If you already have an Electron.js application, jump straight to the Getting the pivot table library section.
What you will get
Upon the tutorial completion, you’ll get a desktop app running on Windows, macOS, and Linux. It will deliver a powerful interactive dashboard where end-users can compose customized reports with the drag-and-drop interface. The reporting tool can be configured to work with static JSON/CSV files, data from SQL databases (Oracle, MySQL, PostgreSQL, etc), MongoDB, SSAS, Elasticsearch, or a custom data source.
We’ll be building the dashboard iteratively.
So, arm yourself with your favorite IDE and let’s begin.
Step 0: Preparing data
Data always comes first. Once you decide which dataset to test the reporting app, move to the next step.
For demo purposes, I’ve chosen the University Ranking Data from Kaggle. With our data dashboard, we’ll be able to find out which universities are best by different criteria.
Step 1: Creating an Electron.js app
Let’s create a simple Electron.js app by following the steps from the official guide.
Step 2: Configuring the project
In the main.js file, an entry point for our application, write code that is responsible for opening an application window once the app is ready:
If your data should be stored locally, create a data folder. We’ll be accessing data files from this folder for our report.
Step 3: Getting the pivot table library
Install the npm package of the pivot table:
npm install flexmonster
Open index.html and add a container where you want to render the pivot table control:
Next, create a .js file (e.g., dashboard.js) and include the module there:
require(‘flexmonster’);
Step 4: Configuring a pivot table report
Define a variable that holds your report. A report object describes how the fields should be arranged on the grid, which aggregation to apply to the values, how to filter data, and more.
Create an instance of the pivot table in dashboard.js and set this report:
The next step is to embed the pivot table into the index.html file. Simply add a new script:
Finally, let’s take care of the component’s styles by including them into the index.html:
You can switch to another report theme to make the dashboard match with the design of your app.
Run the project from the console:
npm start
Congrats! Your pivot table is up and running. It’s ready to assist in data analysis.
Step 5: Adding pivot charts
To empower your project with more data visualization capabilities, repeat the same steps but for a new component — pivot charts. You can specify a similar report but with the chart view type specified in options.
You’re all set! Let’s run the project again:
npm start
Results
Awesome work!
Here’s what you’ve got so far:
Conclusion
This time, you learned how to create a desktop application for self-service analytics.
This is your first step towards building enterprise analytical software.
You can deliver it to your end-users and let them interact with the data and uncover insights.
Every end-user can be a report designer since all necessary reporting features are available via the UI:
- aggregating data (summarizing, averaging, counting, etc)
- hierarchical grouping
- interactive sorting and filtering data (by labels, values, or dates)
- conditional & number formatting
The composed reports can be easily exported to PDF, Excel, or HTML.
As a developer, you can customize its functionality to make it fit the specific needs of end-users and personalize their reporting experience through localization and colorful report themes.
Project code
You are welcome to get the data visualization project on GitHub and run it.
Useful links
If your project depends on the data from the SQL database, you may benefit from using Flexmonster Data Server — a server-side solution for data processing that runs on all three major operating systems. Just as your app. Plus, it allows working with large volumes of data. If used as a DLL library, you can additionally configure role-based access to your reporting system.
