🚀 New WebDataRocks v. 1.4.Check it out!

📝 Write for us!
Check out our guest posting guidelines. We'd love to share your experience and opinion with our dev community. 👩‍💻👨‍💻

WebDataRocks 1.4 release: meet new long-awaited features!

Autumn is coming not alone but with a new WebDataRocks 1.4 release! We are thrilled to present to you all the long-awaited features we have been working on all this time. 

Our product is created by developers for developers. Therefore, we understand that one of the main characteristics of good software is the ease of its integration into the project. 

Hence, in this release, we focused on making the development process as easy as possible.  Also, we made some handy updates and gave you new options to choose between stylish pivot table layouts.


Have you already checked your achievements this year? That is what an annual report is created for. You collect data, analyze it, and explore which of your decisions lead to such a result and based on conclusions, develop further strategies for the next year. 

How to create an annual report

Words “data” and “analyze” should nudge you towards the fact you have to deal with data visualization. So an annual report essentially means to be a convenient way to present information. But to make it as comfortable as it can be it is important to choose the right way to provide your data. 

The well-known thing is that charts and graphics are the best both for visualizing and analyzing information because it is very easy to compare measures. Although there can be situations when you can not use either of those. For example, you decided to check the progress of the employees. There are thousands of them which means your column chart (as for an example) will look like a comb and going through it would not be a pleasant thing. How to get around that? 

I suggest reviewing the real case

Imagine… December. Several days before Christmas. The North Pole. Everything is nearly ready: presents are wrapped, and sleigh is on the way. But Santa still has some spare time, so he decides to reward elves for their outstanding work. Also, he wants to motivate them to do their job even better next year. So he makes a big report where each elf can see himself, his indicators, and compare to others. How to do it beautifully and just in several steps?

Santa will definitely use WebDataRocks Pivot Table because it is free and provides all necessary features. Let’s have a look at his grid and how he managed to create it.

Step 1. Connecting data

As a data source, Santa used JSON and created a function that returns all this data right in code.

function getJSONData() {
return [{
"Employee name": "Gerald Tumini",
"Working hours": 2089,
"Percentage of satisfied customers": 100,
"Amount of processed applications": 2052,
"Amount of customers brought by": 46,
"dataSource": {
"data": getJSONData()

Step 2. Counting efficiency ratio

As you can see, there is no such column as efficiency ratio. Actually, it is the thing that needed to be found out so Santa created a calculating value using formula:

sum(\"Amount of toys made\") * sum(\"Percentage of satisfied customers\") / 100 / sum(\"Working hours\") "

It will calculate how many satisfied customers an elf “produces” per hour.

"uniqueName": "Efficiency ratio",
"formula": " sum(\"Amount of toys made\") * sum(\"Percentage of satisfied customers\") / 100 / sum(\"Working hours\") ",
"caption": "Efficiency ratio"

Also, Santa used sorting for this column so elves could easily understand how good or bad they are compared to the others.

"sorting": {
"column": {
"type": "desc",
"tuple": [],
"measure": "Efficiency ratio"

Step 3. Replacing values with icons

Why not display the efficiency ratio with icons instead of numbers? For such an interesting look, Santa implemented the customizeCell function which adds an icon to a cell depending on its value. By the way, Santa found icons on Flaticon.  customizeCell is applied to all cells on the grid, but since the ratio is the only metric we’d like to highlight with icons, we can use extra conditions to prevent our icons from appearing in other columns.

function customizeCell(cell, data) {
if (data.type == "value") {
if (data.value < 0.45 && data.value > 0) {
cell.text = "link to your image";
} else if (data.value > 0.45 && data.value < 0.5) {
cell.text = "link to your image";
} else if (data.value > 0.5 && data.value < 1) {
cell.text = "link to your image";
} else if (data.value > 1 && data.value < 1.17) {
cell.text = "link to your image";
} else if (data.value > 1.17 && data.value < 2) {
cell.text = "link to your image";

Step 4. Customizing icons

To save time, Santa added the class attribute to all the icons and named it “centered”. This way, he managed to create a unified style for all of them using CSS properties that control their size and appearance.

img.centered {
margin: auto !important;
padding-bottom: 10px;
color: transparent !important;
width: 28px;
height: 30px;
display: flex;
align-items: center;
font-size: 12px;
position: relative;
bottom: 4px;
left: 6px;

Step 5. Coloring the cells

As it is an official report, Santa created a beautiful pattern with corporate colors, red and green. For this, he simply applied conditional formatting to each measure:  he wrote the format of the cell after conditioning and formula that will always return true so the formatting will apply to the whole column.

"conditions": [
"formula": "#value > 1.17",
"measure": "Efficiency ratio",
"format": {
"backgroundColor": "#FDD835",
"color": "#FFFFFF",
"fontFamily": "Arial",
"fontSize": "12px"
"formula": "#value >= 2900",
"measure": "Working hours",
"format": {
"backgroundColor": "#689F38",
"color": "#FFFFFF",
"fontFamily": "Arial",
"fontSize": "12px"

And… Puff! The result

See the Pen Annual report – Santa edition by WebDataRocks (@webdatarocks) on CodePen.

Now all the elves will see how much they have made through this year and how proud Santa is for them (or not…) And Santa knows exactly who will receive some extra candies for his great work. Also, with such a beautiful Christmas report, everybody sure will feel the spirit of the holiday and be in the right mood!

With such an example, now you can create amazing and functional reports by yourself. If you are interested and want to learn more, check out the full demo on CodePen.

With any JavaScript development, you always want to make the process as comfortable, fast, and simple as possible while also improving product quality. For this purpose, there are frameworks that greatly simplify the process and save a lot of time. 

However, when you just start working on a project, you will immediately run into the problem of choosing the framework. Which one is better? Which one suits my project the best? These are some tricky questions I will try to cover in this article. 

How to choose the right framework?

For a better understanding of the topic, let’s highlight that depending on the conditions and your demands, the choice will differ so there is no definite answer to what is better. If this is the first time you faced such a problem, you will most likely try to find the most trustworthy framework. So here are several factors you should rely on.

  1. The reliability: can be assessed by the awareness and satisfaction of the community.
  2. The fact of the ease of study and comprehensibility: an important point during the first use.
  3. The framework’s benefits: you should pay attention to what this framework is “good at”. 
  4. The well-documented guides: will help you to find solutions quickly.

Some statistics

Now when we know what to focus on let’s have a look at some other lists of top JavaScript frameworks. Based on Stack Overflow Developer Survey 2020, we can conclude that the most popular is jQuery, then React and Angular.

(To learn more visit Stack Overflow)

But they also mention that “… jQuery is still king but is slowly losing ground to React.js and Angular year over year. …” jQuery is so popular mainly since many old projects are written on it. Still, now more and more developers are switching to other options.

Accordingly, choosing the most famous framework does not guarantee its coolness.  

(To learn more, visit Stack Overflow)

Judging by most dreaded and wanted frameworks, jQuery and Angular have slightly disappointed some users, and Vue.js became one of the most interesting frameworks along with React.

On theState of JavaScript,we can see the development over the years and clearly understand the community’s opinion about each of the frameworks. Altought, we come across several new names that have not been featured previously as Preact, Ember, and Svelte.

(If you want to see more and help to collect more data – go to State of JavaScript)

(If you want to see more and help to collect more data – go to the State of JavaScript)

Now I suggest making a small overview of each of the above frameworks and learn a little more about their features.

jQuery is an open-source JavaScript library written by John Resig that simplifies HTML, CSS, and JavaScript interaction. It was released in 2006 and has attracted a lot of developers.

What has made jQuery so popular is its ease of use, big community, and ability to keep the code concise and pretty simple. jQuery is primarily designed to find and manipulate elements on a web page easily.

? This framework is used in developing small desktop-based JavaScript applications. But jQuery can’t compete with the modern frameworks with advanced facilitation of JavaScript, less coding, and reusability of components. It makes large applications heavy by putting a lot of code.

React is one of the most talked-about frameworks in the modern world. It was released in 2014 by Facebook and is very similar to Angular but managed to surpass the last one quickly. React is flexible, can be combined with other frameworks, and has a huge community

On the other hand, due to multiple updates in the framework, it is difficult to make the optimized documentation, which makes it harder to start with it. However, the large community makes it easy for new learners to get the concepts.

? React is the right solution for single-paged applications and creating reusable UI components. Also, it’s a good idea to use it in large web applications.

Angular was officially launched in 2016 by Google and offered all the necessary features. One of the things that distinguish Angular from React is its two-way data binding, which means the real-time synchronization between the model and the view. It usually does not require additional libraries and such functions as component-based routing, project generation, and so on can be implemented with the means of Angular package. Although it requires much effort to learn and documentation can be too complex or confusing to read. Fortunately, the big community will always be there for you to help.

? Angular is useful in developing web and mobile apps, enterprise-based and both single- and multiple-page applications.

Vue is a simple and straightforward framework that continues to conquer the development industry since it was released in 2014. In fact, it combines the best from leading frameworks and at the same time is much easier to learn. At the same time, the Chinese documentation and not a very big community can become a problem.

? Vue is recommended for flexible design structures and is commonly used in building UI, single-paged apps.

Ember is a fast and well-organized framework developed in 2011 with proper documentation but complex syntax and slow updates. Because of the conventional structure and small community, the learning curve of this framework is hard.

? Ember is great for large-scale projects, complex ecosystems, and client-side apps.

Preact was designed to make a JavaScript framework small in size, yet offering all the same features as React. It is quick, effective, small in size and you can understand after several hours of learning.

? If you want to create a small application that does one function well, then Preact may be exactly what you need.

Svelte is one of the most promising frameworks that was launched in 2018. It is not well-known but, regarding its unique approach, is becoming more and more popular. It is faster than any other framework, simple and easy to learn, and uses the existing javascript libraries. The only problem is a very small community so it’s hard to find solutions for your problems.

? Svelte is good to write framework-independent apps or any web app.

Final words

In conclusion, I want to remind you that you can not single out the best framework. You have to build your decision on the desired result. So before choosing a framework for your project, I advise you to first work out its concept well and highlight the main characteristics, which it  must satisfy. 

If you liked the article and want to keep abreast of the programming news, follow Top Coding News to always know about new trends and exciting developments.