Tutorial on creating chart in Flask App using CanvasJS

If you came across any dashboards, you would have definitely thought of how can we create such beautiful dashboards representing data in graph form to visualize and understand the data in such a clean way. Hold on, today we are going to learn how can we create such meaningful chart in flask app using CanvasJS Chart library. CanvasJS Chart is JS library which provide simple API to create a chart on a web page. So without delaying any further lets start.

Prerequisites

Installation

Install python and setup environment for development. Please follow link for more information on this. Also, activate virtual environment.
Download CanvasJS and copy canvasjs.min.js to static folder.
Install flask using pip in the environment pip install flask

Creating a Basic Flask App

We will create a chart-sample.py to import flask package and set up flask configuration. We will define a route for URL '/' to bind it to a function which will use render_template function for rendering an HTML file index.html

from flask import Flask, render_template
app = Flask(__name__)

@app.route('/')
def chart_sample():
    return render_template("index.html")

if __name__ == '__main__':
   app.run()

Passing data to template file

We will pass the data to be displayed in the chart to index.html file using another argument data in render_template function.

def chart_sample():
    data = { 'apple': 50, 'orange': 10, "banana": 25, "mango": 30, "grape": 28 }
    return render_template("index.html", data = data)

Create a template page

We will create index.html in templates folder. It will contain the div with id chart-container and we will include CanvasJS library previously saved in static folder.

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Integration of CanvasJS Chart in Flask web app</title>
        <script type = "text/javascript" src = "{{ url_for('static', filename = 'canvasjs.min.js') }}" ></script>
    </head>
    <body>
        <div id="chart-container" style="width: 50%; margin: auto; height: 300px;"></div>
    </body>
</html>

Parsing data received from flask app in format accepted by CanvasJS

We will loop through the data dictionary and store it in an array dataPoints with label and y objects of dataPoint as accepted by CanvasJS. Please check out the documentation page
for more information about the dataPoints object of CanvasJS.

var dataPoints = [];
{% for key, value in data.items() %}
    dataPoints.push({ label: "{{ key }}", y: {{ value }} })
{% endfor %}

Creating chart with dataPoints

Now, we will create a chart using dataPoints we made in previous step and add some of the chart options to beautify the chart. Please check out the this page for more information about the chart options.

var chart = new CanvasJS.Chart("chart-container", {
    title: {
        text: "CanvasJS Chart in Flask WebApp"
    },
    theme: "light2",
    data: [{
        dataPoints: dataPoints
    }]
});
chart.render();

Run the flask app

py chart-sample.py

Viola! You have created a simple column chart in Flask App using CanvasJS Chart.

Hope you learned some basics for creating chart in Flask App using CanvasJS. I will also bring few more tutorial in the series for creating advanced chart in flask app. So stay tuned for next tutorial. Also, check out CanvasJS for more examples on charts. Adios!!!

Blog