Generating Dynamic Plots with Chart.js: in Flask: Add on to CS50‘s Web Track Finance

The final guided homework in HarvandX CS50’s Intro. to Computer Science, Web Track is called Finance. This assignment integrates Flask (Python), the use of an API Key and SQLite3 (Database) with the Web Development stuff we worked with before (HTML and CSS).

This assignment has us complete and create multiple pages to a web page. On this web page we can login (everyone who logs in automatically receives 10,000 USD dummy account to Buy and Sell Stocks). When we log in we come to an index page where a Table is shown with our current cash amount and the current value of our stocks. From this page we can navigate to a quote page, to look up current stock values, a buy page, and a sell page where we can buy and sell stocks respectively. Finally we have a history page where all of our transactions are shown in tabular form. With these HTML pages there is also a generalizes layout.html which these pages call and CSS page for general design. As this application is built using flask, in addition to our HTML pages, we also have an application.py with our python script.

Assuming that you have done this assignment or have something similar, the rest of this post will focus on the last point of this assignment: we need to add some flare for ourselves. I decided to add a few charts to better view my data. My goal is to add a pie chart to the index page to view the allocation of my assets and a bar chart to the history page to track the volume of how I historically buy and sell stocks.

I did this using Chart.js, https://www.chartjs.org/. To link the capabilities of chart.js to our application we need to add the source line of code. We can copy the following line under our usual suspects (jquery for Database SQL interfaceing, Popper and Bootstrap for element formatting and positioning):

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>

Now let us try to load a pie chart onto the index page. To plot anything in this library of charts we two list, one with labels (x) and one with the corresponding values (y). In the case of the pie chart we want a list of the stock Names and the current value of our stock holdings. To generate these list we need to go to application.py (our file containing the Flask-Python Script)

These list when printed are formatted as the following:

 ['AECOM', 'Chipotle Mexican Grill, Inc.', 'Tesla, Inc.', 'Cash']
 [1390.8, 2620.64, 4380.9, 1310.5899999999997] 

now if we pass these lists to the html page we can start plotting. With Chart.js we need to designate a canvas location for the chart. I placed my chart above the Index Table.

• 

• 

And the here is the tricky part, we need to reiterate through the list and essentially reconstruct it in the script section of our chart. Notice how the names of the stocks will be re-generated with “” and the numbers for the y axis do not need any quotes. For now ignore the background color block.

With this we get the following page chart.

Now let us do something about those colors. In order to color the chart we need a list colors that is the same length as our list of names. As we buy and sell new stocks our list will change size – to deal with this issue I decided to randomly generate a list of colors in Hex Color Code. The application block is shown below:

Here is an example of what this code generates.

 ['#A636C2', '#00CBD3', '#D93BA7', '#524FEE', '#656B69']  

Just like the other two lists we can pass our colors into the plot on index.html and we get the following chart.

For some reason my mouse did not track on the gif so well, but you get the point 🙂

W

From this point we are ready to move to the bar chart I wish to plot on my history.html page. At first I wanted to try to plot a lineal time series, but it seems that Chart.js does not support time series data.

For this plot we can go back to the history section of our application and generate a list of the Time-Stamps from transactions and a second list of the un-formated transaction volume.

These list should look something like the following:

['2020-10-29 19:09:46', '2020-10-29 19:09:46', '2020-10-29 19:09:46', '2020-10-29 19:09:46']  
[420.63, 849.16, 72.77, 145.54, 406.34, 812.68]  

And for the background colors in this chart I tried something different, there was a bit of code on the Documentation page of Chart.js (under scriptable/iterateable context) which happened to fit this box plot quite well. This script will alternate positive values between blue and green and negative values will be shown in red.

Here is how it turned out:

For some reason my mouse did not track on the gif so well, but you get the point 🙂

Thank you for reading. If you would also like to watch explained via video, check out my YouTube Video explanation:

till next time 🙂