Making a Dashboard About COVID-19 in Portugal
This article explains using ApexCharts library to make graphic gadgets with the representation of COVID-19 new cases in Portugal.
Join the DZone community and get the full member experience.Join For Free
An example of a use case could be the exploration of data related to the COVID-19 pandemic in Portugal. Today, many aspects of our lives are dominated by the consequences of that pandemic and, as in many other areas of activity, providing information in a simple manner, where the conclusions of the end users are easy to evaluate, is of vital importance.
Currently, we have a Dashboard with all this information, which is updated daily with the data provided by the Portuguese government and that you can check below:
If you look at it, the design is a little different from what we usually have in Dashboards by default since, in this case, we have to use an external graphics library to make it even more attractive.
Throughout this post we tell you how to design and generate a graphics gadget using this graphics library step-by-step.
Confinement is the trending issue in many countries. In the case of Portugal, the aim is to measure it in terms of the number of people infected per 100,000 inhabitants in the last 14 days, an analysis which is carried out in every municipality, delimiting the levels of risk using this metric.
Therefore, we consider it relevant that every Portuguese person know the risk level of the area they are at—and thus know the limitations associated with that level—as well as what is their evolution and what is the level of comparative risk within that list.
It is thus an ideal use case for generating information graphs, since showing the information in table form is staying halfway there because you manage to lose the attention of the interested parties.
However, to obtain this type of graph, you must follow a path that implies that the data is in perfect conditions to be presented. For this reason, in the following diagram, we highlight what would be necessary to achieve this:
We are sure that this diagram not only responds to the purpose of this example, but it also shows many other needs that exist in the daily life of companies for digitalization processes. I dare say that it reflects the following:
- The onesait Platform responds to the need for the process completely, from start to finish.
- Each sub-process has a specific, specialized tool for each requirement.
- These tools, although integrated, are autonomous from each other, so they can be removed, replaced, or extended without any problem, allowing an optimum adaptation to each process' and client's realities.
- For the example, we suggest that all of this can be solved in a single process developed in a programming language. However, this would make it more difficult to implement, more complex to maintain, and a real headache when it comes to scaling up in technical and functional terms.
The Onesait Platform provides all this (and more!) in one single platform and, in the simplest of situations, without requiring great programming knowledge, as we could say from the example we are looking at today.
This is because most of the tools that we are going to use have graphic interfaces to support their development, which allows for easy interpretation and mapping between the technology and its functional objective.
Thus, first you would start by preparing the ontologies (concept underlying to the Semantic DataHub) with all the necessary data; that is to say, the collection of information by health region (ARS), municipality and date, detailing these dimensions for the new cases per 100,000 inhabitants in the last 14 days (incidence proportion), along with the variation since the last date.
Lastly, and as a result of a product weighted by various factors, you select the level of risk at each moment, a level previously calculated using a Notebook.
To prepare the data for its use in the charts, we create a DataSource (a conceptual tool of the Dashboards) named «DS_MINICIP_INCID», which carries out a SQL query on the interested ontology, and it is done in the following way:
The answer to this DataSource can be consulted from this JSON file.
Then, the Dashboard is created from scratch, as described below:
The initial configuration of the Dashboard must include the URL of the ApexCharts library. This can be done by adding the following line:
<script src = "https://cdn.jsdelivr.net/npm/apexcharts"> </script>
Once the Dashboard has been created, it will be empty. Start by adding a Template-type Gadget and editing it by following these steps:
Two important points to consider are these:
- You must select «AngularJS» as the template type.
- As the DataSource, select the previously created one: «DS_MINICIP_INCID».
In the first editor, the HTML one, we define the following (we have included explanatory comments in the code to understand what is being done):
Besides, we will also use one of the functions that are available by default in the creation of the gadget template like so:
Having done all of this, we save and compile the Gadget. Once this is done, we will create in the DataLink a connection between the option in the selected drop-down list and the data source in order to automate the application of the filter seen below:
In this particular case, the source Gadget and the destination Gadget are the same (the Template Gadget we have created). We are also going to use, as our source field, the SendFilter function parameters used in the «ng-change» part of the HTML and, as destination field, the field of the data source to which the filter is applied like so:
- Source gadget: The name of the gadget in the source drop-down list.
- Source field: «ars».
- Target gadget: The name of the gadget in the target drop-down list.
- Target field: «health region».
Once this has been done, we should obtain a chart similar to the following one:
Published at DZone with permission of Pedro Moura. See the original article here.
Opinions expressed by DZone contributors are their own.