Lately, I’ve found a problem. I was looking for fully customizable web components, which would be easy to integrate with and can serve as embedded BI tools for analyzing, reporting and visualization in my application.
I’m using Angular so as a result, it is harder to find the solutions compatible with it. I think I’m not the one who faced such problem so let me share my experience.
In addition, we’ll make an easy but powerful report which will be able to help in further analysis. I’m already willing to show you a demo.
TL;DR: go just to the section with useful links that would help you with practice.
I’d like to begin with telling what is best in Angular in my opinion and how it helps to make the development process quicker and easier.
Building dynamic client-side applications (single or multi-page) with Angular has a lot of advantages:
- Thanks to the modular design of code, the application’s components are easy to manipulate. Therefore, the code is more organized and readable.
- Decoupled components
- Simplified MVC architecture
- A static typing of TypeScript under the hood provides type safety. It and makes the code easier to maintain and refactor.
- Powerful CLI automates the creation of an Angular application.
- Dev community is quite powerful.
These features improve productivity in building the web, desktop, and mobile applications.
Nevertheless, Angular may be quite complicated in learning especially in comparison with React.
Now let’s talk about the solution for web reporting in the project. I’ve used two web components: Flexmonster and Google Charts. Below are more details about each of them.
What is Flexmonster
After adding Flexmonster, you can use all the built-in features to start configuring your own interactive report. It the end, the report can be exported to Excel, PDF, Image, and HTML.
Next, let’s look through the list of analytical features which came in handy for my reporting purposes.
- Aggregation functions (e.g. 16 built-in functions and the ability to create custom ones)
- Sorting, grouping and filtering features
- The drag-and-drop feature
- Slicing & dicing.
How to integrate a pivot table with Angular
As for me, the whole process is as simple as copy-paste. Here’s a tutorial which can help to get started.
Dashboards & data visualization
If you need not only aggregate the data but also visualize it, a dashboard seems to be a good choice. Many analysts like dashboards as they help in tracking business metrics and making data-driven decisions. And, as a developer, you may know that you need a lot of effort to configure it for user requests.
Let’s look through the second tool that will save you time and bring some more data visualization.
What is Google Charts
Google Charts seems the best charting web service in a segment of free software.
How to load data in charts
Google Charts in Angular app
Google Charts is also compatible with Angular — I’ve found a wrapper for it on npm.
Here is my dashboard where Flexmonster and Google Charts are combined together:
You can see that the charts and tables shine together when being combined. A dashboard can enhance the communication of the analysis results.
I’ve tried to analyze the advantages of Angular as a platform for building dynamic web applications. But it is not a secret that the learning curve for Angular depends on the project type. Think carefully about whether your particular project needs this framework or not.
Looking forward to hearing your feedback and suggestions.
These guides can help you to walk through the process of integration with Flexmonster and Google Charts.
- My sample Angular dashboard
Here is the source code: CodeSandBox Project.
(I recommend to open a web page with a dashboard in a new tab/window as the embedded browser in this IDE doesn’t always show the results correctly)