Journey into GSoC — Part 11

Omal Vindula
SCoRe Lab
Published in
2 min readSep 9, 2020

This week I have done something very interesting and cool! That is the implementation of some nice charts and visualizations of dengue incidents that are being reported from the community app.

As I’m a sane human being, I will be using a chart visualization library rather than creating my own charts from scratch. For this purpose, I have used the recharts library which you can find here. It is a very nice library with tons of customization and a with a lot of charts to choose from.

It's not just the matter of just using recharts, I have also written some flask endpoints to serve these charts with information that we require. The charts display various information such as the number of incidents reported, their breakdowns as shown below.

Looks pretty cool right?

Looks pretty cool right? using recharts was easy enough. But querying data from the SQL database was the hardest of all! I have also added a filtering function which draws charts based on the time we specify. For now, I have added 4 options — Charts of all time, this week, this month and this year.

Apart from this, I have also made this page mobile responsive as the chart layout shown above will not particularly play nice with slimmer viewports such as phones and tablets. You can see the responsive views below.

That’s it for this week… see you guys in the next week. Until then, stay safe!

The tablet view
The mobile view

--

--