WaveMaker Docs

WaveMaker Docs

  • Get started
  • Widgets
  • Mobile
  • How-to
  • Enterprise
  • Releases
  • Blog
  • Sign-in

›All Blog Posts

All Blog Posts

  • Mutual TLS Support in REST APIs
  • Monitoring performance and health of deployed WaveMaker app
  • Mitigating Spring Zero-day Vulnerability CVE-2022-22965
  • WaveMaker application pom.xml
  • Upgrading saml to saml2-service-provider
  • Archiving WaveMaker 9 Projects
  • URL Change in WaveMaker Android WebView
  • Announcement about Angular 11 Update
  • Mitigating Log4J 2 Vulnerability CVE 2021 44228
  • Ending Support of WaveMaker 9 Projects
  • Git Branching Strategy
  • Important Announcement about Angular 10 Update
  • Accessibility Support in WaveMaker
  • Generating .aab files using wm-cordova-cli or AppChef
  • WaveMaker Studio enables faster database imports
  • Integrate SAP HANA Database with WaveMaker
  • Redshift Database Integration
  • Important Announcement about Changes to Documentation Domain
  • WaveMaker Releases 10.7 Version
  • Theme Builder with some coding (Build + Edit)
  • Understanding Scaling of WaveMaker Applications
  • Automatically Import your Website Branding Styles into a Theme
  • Certificate Pinning Case Study
  • Cordova 10.0.0 Upgrade
  • WaveMaker Releases 10.6 Version
  • Retain UI State in WaveMaker Apps
  • Theme builder is ready with a new update
  • PostgREST OpenAPI support in WaveMaker
  • Fully automated and scalable test execution using k8s
  • New file picker for mobile apps - Improvements in UI to select files in mobile
  • WaveMaker releases 10.5 version
  • Deliver faster applications with WaveMaker!
  • GraphQL in a Micro Services Architecture
  • Build Themes for WaveMaker Apps Without Any Coding
  • COVID-19 Visualization using WaveMaker - Part 2
  • COVID-19 Visualization using WaveMaker - Part 1
  • WaveMaker Integrates with DigitalOcean Kubernetes for App Deployments
  • Deployment Experience made better!
  • OpenAPI support in WaveMaker
  • WaveMaker platform is updated to use WKWebView.
  • Deliver WaveMaker Apps as Micro Frontend Modules
  • All-new WaveMaker docs with a powerful Search
  • Welcome to the WaveMaker Developers Blog

COVID-19 Visualization using WaveMaker - Part 1

April 27, 2020

Deepak Anupalli

Alongside the crisis that COVID-19 had brought to the world, there has never been so much prominence for the numbers. Almost every household, governments, businesses, media etc. are contemplating these numbers, creating models for prediction, taking measures to flatten these curves. That’s when we immediately jumped on to create an application using our own low-code platform.

Using WaveMaker, you can almost instantly create a chart or plot for visualization from any datasource. There are several API sources for COVID-19 data and with no code, using out-of-the-box widgets and charts the application has been built in just a few days.

In this series of blog post, we discuss how to build a dashboard, and in the next post, we will see how to build visualization for charts and maps. But before, let's do a little walkthrough of the app.

Corona Tracker App

Link to the app: http://apps.wavemakeronline.com/CoronaTracker/

app

screenshot

Not only can you quickly build the dashboard, it is responsive automatically and one can access it on a mobile device as well as on a large screen.

screenshot

Quick walkthrough of the app

The Corona Tracker application has an extensive dashboard with key metrics globally, i.e. Confirmed cases across several countries, recovered, deaths reported etc. The dashboard provides visualization for top 10 affected countries, plotting their death rates against recovery percentages, number of affected people in 1 million population etc.

This app also features datamaps with data set published by John Hopkins University, to visualize the spread of COVID-19 across the globe over a timeline.

screenshot-data-maps-new-cases

How to build the dashboard

Using WaveMaker, the elements of the dashboard can be built in just 4 steps without writing code.

  1. Import datasource, REST API in this case
  2. Create variable to access the REST API
  3. Visually drag-n-drop widgets onto the canvas or editor
  4. Bind the widgets to Variable

Step 1: Import datasource, REST API in this case

The primary source of data for the dashboard are the following 2 REST APIs:

https://api.coronatracker.com/v3/stats/worldometer/country
https://api.coronatracker.com/v3/stats/worldometer/global

Import the REST APIs using Web Services import editor, as shown below

screenshot-import-rest

Step 2: Create Variable to access REST API

Create a Page for the dashboard, and create a Variable within this page for the imported REST API, which enables invocation of the API whenever the page is accessed.

screenshot-bind-variables

Step 3: Drag-n-drop widgets on to Canvas

Key metrics for confirmed cases, recovery & deaths are built as tiles as shown. Each tile is further divided into sections using a Grid Layout which can be further customized to represent the data. Grid Layout is used to define the arrangement of various widgets on the page, by dividing the page into several responsive blocks. The size of each block can be configured and new columns and rows can be inserted as needed.

screenshot

Step 4: Bind widgets to the Variable for data

After arranging the widgets on the canvas, we can bind data to these widgets from the created variable using the Properties panel. WaveMaker automatically identifies the JSON response structure from the imported REST API and makes it available for binding through variables.

screenshot

screenshot

screenshot

Bingo! We have the metrics from the REST API in our dashboard page.

Wait!, how did we get the other metric for % of recovered people?

Apart from just binding the data to API response, WaveMaker enables writing simple expressions as shown below to compute data. f(n) = (totalRecovered * 100) / totalConfirmed gives the % recovery, alongside using other data formatting rules.

screenshot

Step 5: Deploy to the cloud and we are done!

For more information, see how to deploy an app with One-Click Deployment.

What's next?

In the next series of the blog post for developing a Covid-19 visualization using WaveMaker, see how to build visualization for charts and visualization for maps.

See Also

COVID-19 Visualization using WaveMaker - Part 2

Tweet
Recent Posts
  • Corona Tracker App
  • Quick walkthrough of the app
  • How to build the dashboard
    • Step 1: Import datasource, REST API in this case
    • Step 2: Create Variable to access REST API
    • Step 3: Drag-n-drop widgets on to Canvas
    • Step 4: Bind widgets to the Variable for data
    • Step 5: Deploy to the cloud and we are done!
  • What's next?
  • See Also
WaveMaker
  • PRICING
  • PARTNERS
  • CUSTOMERS
  • ABOUT US
  • CONTACT US
Terms of Use | Copyright © 2013-2023 WaveMaker, Inc. All rights reserved.