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.
Link to the app: http://apps.wavemakeronline.com/CoronaTracker/
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.
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.
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.
In the advanced settings for chart widget, there are several configuration options provided for configuring the axis titles, values, bar spacing etc.
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”?
How to build Maps Visualization
Creating a 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.
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.
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.
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.
Defining Color Map and Dataset
Color map needed for the maps prefab can be created as a variable, shown below.
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.