Skip to main content

COVID-19 Visualization using WaveMaker - Part 2

· 4 min read

In my last blog post, we saw how the Corona Tracker app works and we discussed how to build a dashboard using WaveMaker. I recommend you to read the part-1 of the blog first. In this post, we will see how to build visualization for charts and visualization for maps.

Quick Recap

Link to the app:

Previously, we covered how to import REST API as datasource for the app and how to create a variable to access the REST API, and binding the widgets to the created variable.

For more information, see Corona Tracker App, walkthrough of the app, and how to build the dashboard.

How to build Charts Visualization

WaveMaker has in-built nvd3 based charts which are used for building plots for visualization in this app. Drag-n-drop any chart widget to canvas and bind the dataset property to the Variable for plotting data as shown below.

DnD Chart widget

Bind values

Configuring axes

After binding the variable for the dataset, configure x-axis and y-axis from the attributes of the dataset. By just picking these attributes your chart will be ready for viewing.

In this particular case for the bar chart, we have picked country on x-axis and confirmedCases attribute from API, to be depicted for each country on y-axis.

Configuring titles

In the advanced settings for chart widget, there are several configuration options provided for configuring the axis titles, values, bar spacing etc.

Configuring titles

Top affected countries

Top countries bar chart is ready!

Wait, How did we pick only 10 countries from the entire list of 180+ countries returned by the API?

Also, how did we calculate the metrics for “Rest of World”?

This is where low-code comes into play, you can write javascript code to customize your dataset. After fetching the API response, you can calculate any custom metrics and also create a separate dataset for top countries as shown.

low code

How to build Maps Visualization

Maps is not an in-built widget in WaveMaker, using datamaps javascript library a Prefab is created. Datamaps takes JSON input for countries with their code and a colormap to plot the visualization.

Prefabs are typically built by a javascript developer who knows the nuances of working with a javascript library and creates a widget or prefab out of it. The Prefab developer will provide attributes that are available to WaveMaker low-code developers when the widget is dropped onto the canvas.

Creating a Prefab


Download the, and import it the Prefabs section to use it straightaway. For more information about how to use it, see Importing Prefab.


To create a Datamaps Prefab, see a detailed documentation of How to Create a Prefab Using D3 Library DataMaps.

The following are the attributes provided by the Datamaps prefab developer that will appear in the Studio properties panel for binding.

Prefab config

Testing the prefab independently

A Prefab project is another type of a project, where you can build a reusable component or widget and publish it to the workspace. Prefab developers will be able to test the prefab independent of the application by providing test data through an editor, as shown.

Prefab config

Prefab config

Publishing a Prefab

After the prefab is tested independently, it can be published to the workspace so that WaveMaker developers can start using it as a widget in the Studio.

Prefab config

Using Maps Prefab as a widget

After the Prefab is published, under the prefabs section in Studio the maps prefab appears just like any other widget.

maps prefab

Defining Color Map and Dataset

Color map needed for the maps prefab can be created as a variable, shown below.

maps prefab

Using javascript, we have created a custom maps dataset from the REST API response, by calculating the color codes based on the confirmed cases in each country as shown.

maps prefab


Using single-click deployment from WaveMaker, the app is deployed on to containers and made available publicly. Entire application was built by a single developer in 1 week.

See Also

COVID-19 Visualization using WaveMaker - Part 1