Data Visualization using FastAPI and EasyCharts

Joshua Jamison

Published in

Analytics Vidhya

4 min readJul 6, 2021

There are many useful insights that can be pulled from data if visualized for consumption.

There are a number of tools in existence which can provide data visualizations, but few which allow dynamic updates via an easy to use and consume API— Enter FastAPI & EasyCharts.

FastAPI

For those who have not yet discovered this web-framework, FastAPI is one of the fastest growing tools for developers for creating rich, self documenting, and easily consumable APIs which follow OpenAPI spec, AKA swagger.

EasyCharts

A FastAPI ‘plugin’ which can be used to create dynamically updating data visualizations in a web browser via a RestAPI.

Getting Started

Lets look into how create a basic chart that tracks your host / container / pod’s CPU & Memory Utilization using EasyCharts.

Installation

$ pip install easycharts

Additional dependencies for scheduling & collecting resource utilization

$ pip install psutils
$ pip install easyschedule

Import Dependencies

Along with easycharts and fastapi, easyschedule is imported to provide a regular cadence of for collecting statistics.

Setup Scheduler & EasyCharts

Here we defined a cron schedule called every_minute which will be used later when setting up our monitoring method.

Within the fastapi application server startup actions, the scheduler is started, and ChartServer created.

The ChartServer accepts the FastAPI server, the name of the database to store chart data, and the default path to access charts.

Start the Charts Server

$ uvicorn --host 0.0.0.0 --port 8220 monitor:server

Right away, the API provides the ability to view, create, update, and delete charts via the API.

Creating a Chart

A chart can be created via the API, or at our application startup. Any previously created Charts are automatically available.

When a chart is created, it should be initialized with labels (y) and data (x) values.

If a chart already exists, create_dataset() will not impact existing chart data.

Viewing the Chart

Only a single datapoint(x,y) exists right now, since this was added with the creation of the chart.

Updating the Chart

Like creating a table, adding data to the chart can be performed both via API or via a background task on the server.

First we defined a resource_monitor() task which is decorated by our to run every minute, as per the every_minute schedule we defined above.

This update task is very similar to the creation, in that we collect our label(y) for the current time, and the CPU / Memory Usage (x) while using the update_dataset() to target our existing charts by name.

Restart the Chart Server

Our complete code should look similar to this.

Now the scheduler should begin to add datapoints for our host’s cpu & memory utilization every minute. Watch as the graph dynamically updates.