Evolution of Webix Complex Widgets: JavaScript Pivot

We continue our series of articles on the evolution of Webix complex widgets and today we are going to plunge into the history of the Webix JavaScript Pivot Table – elaborating on the major changes the widget has undergone and the enhancements it is constantly receiving to ensure the users are provided with a wide range of possibilities facilitating their interaction with data.

We are going to study the subject carefully and see that the main objective of all Pivot improvements is to relieve some pressure on the businesses, reducing the amount of complex technical things they need to deal with and increasing the number of available tools for efficient data management and seamless operation of enterprises. Let’s start this fascinating journey and see how the Pivot has evolved over time.

What is a JavaScript Pivot Table?

A JS Pivot table is a widely used tool for data analysis that helps you represent data in a way most convenient for the subsequent work related to identifying trends, displaying and studying statistics, sales and finance analysis. It allows you to perform various operations upon the initial data set (a source table with the information you want to process) and populate the Pivot table with the summarized results.

Webix has designed its own advanced tool – the JavaScript Pivot Table – an in-house solution for handling aggregated data of any amount, analyzing and displaying them in a tabular format or using charts for their graphical representation.

The Webix Pivot we know today acquired the appearance and most of its advanced features just a few years ago in version 9.0. Let’s look into how the widget evolved gaining all new and new functionalities.

From 8.4 to 10.3: Pivot Transformation

The JavaScript Pivot Table 8.4 was equipped with all necessary features to successfully carry out complex calculations, accomplish data aggregation tasks, as well as represent data in charts (by means of initializing the Pivot Chart). It incorporated tools for filtering, sorting and comparing data. The widget provided the users with basic operations (sum, count, max, min) for summing, getting maximum and minimum values, as well as getting the number of numeric values. In addition to the existing ones the users were able to create custom functions for their particular cases and purposes.

As the widget developed up to the version 8.4 it was reinforced with quite a number of useful features: new events and properties, additional filters and placeholders for them, possibilities of accessing raw data, header sorting and value formatting, total column and footer, etc.

Here is the demo with the old version of the Webix JS Pivot:

Snippet: https://snippet.webix.com/9bumdqwa

Here is the demo of the old JS Pivot and the Pivot Chart (data and configuration are in sync):

Snippet: https://snippet.webix.com/kwsgrgrb

Although the Webix JavaScript Pivot 8.4 was a high demand solution that performed its functions at a decent level, in 2021 the Webix team concluded that the time to fully update the widget had come. It was a balanced decision based on the Webix team’s determination to focus on new advanced features and convenient configuration to ease the implementation and use of the Pivot for business apps.

Actually, the team had a number of reasons to introduce these major changes:

• the old Pivot provided the possibilities of representing data in the form of a table and a chart, nevertheless, these were two independent widgets (the Pivot and the Pivot Chart) you needed to configure separately. Each of them had an individual store where the data were loaded, so the chart and the table could be synchronized only manually, as shown in the above snippet;
• in the Pivot 8.4 a lot of things needed to be set up manually via API which meant additional burden on engineers in terms of development time and on businesses in terms of extra costs. This was the reason why the Webix team decided to provide its users with more comprehensive configuration opportunities for the Pivot Table and the Chart making complex functionalities accessible through the Pivot UI (a wider list of math methods, possibility to choose the way the data are grouped and represented);
• the Webix team carefully analyzed users’ feedback and realized that the introduction of some sought-after features required new approaches to code organization;
• the implementation of technical solutions for tackling the above-mentioned issues required Pivot UI updates as well.

The new Pivot Table version 9.0 (current version is 10.3) was released with major improvements, brand-new features, streamlined interface and received:

• an enhanced UI,
• three modes of data representation: Table, Tree and Chart,
• extra operations for carrying out complex calculations,
• enhanced settings that simplified data and UI configuration.

Moreover, the JavaScript Pivot became faster due to the upgraded logic and innovative techniques employed while designing its new version.

Here is the new Webix JavaScript Pivot demo version 10.3:

Let’s go ahead and take an in-depth look at the advanced features offered by the new Webix JavaScript Pivot Table.

Advanced Features of the JavaScript Pivot Widget

Let’s delve into the Webix Pivot notable functionalities that make it an outstanding data management solution. The characteristics indicated below significantly facilitate data manipulation and allow you to create visually compelling reports reflecting your business processes in a clear and accurate manner:

• advanced customization capabilities and flexible configuration. The prominent feature of the new Webix Pivot Table is that it was developed as a Jet app allowing for better customization opportunities and making the configuration process more flexible. Thus, you can incorporate the JS Pivot into your app as a Webix widget or initialize it as a Webix Jet app. The latter option (init as JetApp) is well suited for utilizing the widget separately (i.e. outside the Webix UI layout), including its integration as a single component into frameworks.
• three display modes: Table, Tree (inherited from the old Pivot) and Chart. An important update: in the new JS Pivot version, the Chart is no longer a separate widget, but an integral part of the Pivot Table and one of its modes – which means that the data for the modes are loaded once and becomes available for all of them. In other words, the issue of the source data synchronization is now solved.
• compact mode for the correct data representation on mobile devices.
• more operations (functions) for data processing.The Value section of the Settings panel offers quite a number of extra operations for data processing. The list of math methods is constantly expanding, thus, new operations appeared in the latest Webix 10.3 release. Meanwhile, it is still possible to add your own custom functions.
• more UI/functionality settings for end users.The Settings panel provides controls for the functionalities that were available only via API in the old Pivot version 8.4. Now end users have access to the extended configuration via the UI (highlight max and min values, display the footer, hide the repeated rows in the table Left panel).
• a wide range of chart types and functions for the Pivot Chart allowing to define labels for axes, specify the scale color, display or hide Chart lines.
• the possibility to choose the way the data are grouped in the Table and Tree modes: you can have the data grouped on the column axis (default setting) or choose the row axis grouping (Settings panel → Table section → Values on the row axis) depending on how you want to represent data in your report.
• export options that allow exporting the Pivot table to a number of formats, including PDF, PNG, Excel, CSV. These features are an integral part of the Webix UI library – they are continuously enhanced as the library develops and are available in a number of Webix widgets, including the Pivot.

The Webix Pivot is consistently being updated receiving more and more enhancements:

• possibility to freeze/unfreeze columns that display data groups via API;
• complex math editor for calculating values;
  

• possibility to define custom total operations and add custom complex operations (via API);
• possibility to define columns with totals for each value;
• availability of various chart types: Bar, Line, Radar, Area, Spline, Spline Area, Pie, Donut, Scatter;
• external data processing;
• switching the axis lines on/off in the Pivot Chart mode;
• configurable legend;
• markers and scales configuration for the Pivot Chart.

For detailed information on all the features and updates of the Webix JavaScript Pivot, please refer to the What’s New page in the documentation.

Scenarios When Choosing the Pivot is the Right Decision

We have just considered some technical details describing the Webix Pivot as software, but what about practical cases of using it as a solution for achieving tangible results?

Well, let’s take some examples of the spheres where the Pivot can be utilized as a powerful tool for multiple purposes:

• in marketing, e.g. for evaluating marketing campaigns or customer segmentation analytics;
• in the financial sphere, e.g. for carrying out financial analysis and creating financial reports;
• for human resources analytics, e.g. for performance evaluation;
• in retail and e-commerce for statistical analysis of sales performance;
• in business intelligence for tracking trends;
• in the travel and hospitality industry for evaluating booking trends or customer satisfaction measurement.

The list above can be almost endless as the Pivot is a functional tool for handling big amounts of data, aggregating and manipulating them, allowing you to easily and quickly have them at your disposal.

The versatile nature of the Webix Pivot can be proved by our customer’s showcase demonstrating the successful incorporation of the widget into a web-based planning and reporting platform for managing budget and forecast processes, automating reporting and analysis and building custom data models. By the way, this particular high-end enterprise solution was completely built around the Webix platform.

The Pivot is not the only Webix widget that has undergone many changes in recent years – read our article about File Manager Evolution where we compared its old and new version explaining in detail how it can facilitate the creation of a modern data management solution for your business.

Factors to Consider When Choosing a JavaScript Pivot

There is one thing left to carefully analyze when deciding on integrating a JS Pivot widget into your app – you need to be sure it perfectly suits you according to a number of characteristics. Here is the list of key questions that can be utilized for taking a decision:

• Does the Pivot provide capabilities for seamless integration with the technological stack of your app?
• Does it allow for deep customization?
• What about dealing with large datasets?
• Does it provide multiple functions allowing data processing?
• Does it have a user-friendly and intuitive interface?
• How are things going with scalability?

And here is the description of the Webix Pivot capabilities ensuring you will not have any issues associated with the above-mentioned points:

• the Webix Pivot widget enables seamless integration with modern front-end frameworks and libraries, as well as various back-end technologies;
• although quite a number of complex functionalities are available via the UI, the widget provides ample customization opportunities via API;
• the Webix Pivot is a complex widget created for the efficient management of huge data sets and it does a good job of handling this task. The new Pivot has a faster math core. After calculations are made, rendering of big amounts of data is successfully implemented with the help of lazy rendering;
• the widget is really multifunctional, equipping the users with numerous capabilities for data analysis and visualization: multiple built-in methods/calculations, possibilities of graphical representation of reports with the help of charts or highlighting cells in Pivot tables for visual clarity;
• the Pivot allows for the effortless and comfortable interaction with data via UI, furthermore, all the UI components rest on the thoughtful logic of users’ behavior and have complex functionalities beneath;
• the core idea of Webix is to create components that can easily be used for the development of scalable applications, which means each of its widgets provides for scalability while the Pivot is not an exception. In case the amount of data and calculations increases rapidly you can switch from the client-side to the server-side computations, i.e. use external data processing.

Conclusion

In this article, we have unveiled the never-ending process of Webix JavaScript Pivot evolution – its innovation, enhancement and progress that are meant to facilitate our users’ success in achieving their objectives.

Now, you are equipped with all necessary knowledge to accurately assess the advantages and extra benefits provided by this powerful and multifunctional tool. You know what to start with and focus on, so there is only one thing left – include the Webix Pivot into your project and learn things from your own experience. We are sure this will make things much easier and more cost-effective.

Download Pivot Free Trial