Recently I’ve faced a challenge of finding fully customizable and easy-to-integrate web components which can serve as embedded BI tools for analysis, reporting, and visualization in my application.
And even more difficult is to find solutions that are compatible with the Angular framework and doesn’t complicate the maintenance of the application.
I guess I’m not alone in that so I’ve decided to share my experience with other developers which might face the same problem.
Today I’ll cover briefly the features of Angular and leave out other theoretical details about its the most basic concepts - I’m sure you’ll find insightful articles here in the community of dev.to and on the pages of Angular documentation.
Besides, in the light of the recent framework’s updates, it may be useful to know which tools are worth to be a part of the project that is running on the latest version of Angular.
On top of this, we’ll create a simple yet powerful report which has all the potential to help in further analysis. I can’t wait to share a demo with you.
TL;DR: jump right to the section with useful links which should help you to get your hands dirty with practice.
The process of building dynamic client-side applications (single or multi-page) with Angular is accompanied with various benefits. By choosing Angular, you take advantage of the following features:
- A modular design of code which makes the application’s components easy to manipulate. Consequently, the code is more organized and readable.
- Decoupled components
- Simplified MVC architecture
- A static typing of TypeScript under the hood which provides type safety and makes the code easier to maintain and refactor.
- Powerful CLI that automates the creation of an Angular application.
- An active and growing community of developers that share their knowledge about the framework and solutions to problems.
- Support for multiple platforms.
All the above-mentioned features lead to improved productivity in building the web, desktop, and mobile applications.
However, Angular has a high learning curve, especially when compared with React. But the efforts put into learning and mastering it are worth the results you will achieve.
Now let’s move further to the solution for web reporting in your project.
Its main advantage is compatibility with various client-side technologies including Angular and AngularJS.
To get started, you need to choose the type of data source that is used in your application. The most common one is an SQL/NoSQL database but JSON, CSV sources, and OLAP cubes are supported equally.
As soon as you’ve embedded Flexmonster into your project and loaded the data into it, you can make use of all the built-in features to start configuring your own interactive report. After all, the report can be exported to Excel, PDF, Image, and HTML.
Nextly, I’d like to outline the list of analytical features which came in handy for my reporting purposes.
- Aggregation functions (i.e. 16 built-in functions and the ability to create custom ones)
- Organizing the data is possible using sorting, grouping and filtering features
- The drag-and-drop feature
- Slicing & dicing
- Embedded pivot charts.
Personally, I find the whole process as simple as copy-paste. Here’s a tutorial which helped me to get started.
If you, your users or teammates need not only aggregate the data but also visualize it, an excellent idea is to build an interactive dashboard inside the app or give an ability to do so. Many analysts are fond of dashboards since they help in tracking business metrics and making data-driven decisions. And, as a developer, you may know that it takes a lot of time to build and configure it upon the ad-hoc or recurring requests.
Let’s consider the second tool that will save you time and help your web project stand out with an interactive data visualization.
It’s hard to find a better charting web service in a segment of free software than Google Charts.
Google Charts is compatible with Angular as well - I’ve managed to find a wrapper for it on npm.
This is how a dashboard with Flexmonster and Google Charts can look like:
As you see, charts and tables are not in opposition to each other. On the contrary, they shine together when combined. A dashboard has the potential to enhance the communication of the analysis results.
Today I’ve tried to analyze the benefits of Angular as a platform for building the dynamic web applications. However, one should be aware that Angular can simplify the development process as well as complicate it. Think thoroughly whether your particular project needs this framework or not.
Looking forward to hearing your feedback and suggestions.
These guides helped me to walk through the process of integration with Flexmonster and Google Charts.