Tutorial on creating chart in Flask App using CanvasJS
Tags: chart, dashboards, flask, app
Published: 2022-06-07 18:18:59

---
title: Tutorial on creating chart in Flask App using CanvasJS
published: true
description: Tutorial on creating chart in Flask App using CanvasJS Chart library
tags: chart, dashboards, flask, app
//cover_image: https://direct_url_to_image.jpg
---

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
* [Python Development Environment](https://www.digitalocean.com/community/tutorial_series/how-to-install-and-set-up-a-local-programming-environment-for-python-3)
* [Flask](https://flask.palletsprojects.com/)
* [CanvasJS](https://canvasjs.com)

### Installation

1. Install python and setup environment for development. Please follow [link](https://www.digitalocean.com/community/tutorial_series/how-to-install-and-set-up-a-local-programming-environment-for-python-3) for more information on this. Also, activate virtual environment.
2. Download [CanvasJS](https://canvasjs.com/download-html5-charting-graphing-library/) and copy canvasjs.min.js to static folder.
3. 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
](https://canvasjs.com/docs/charts/chart-options/data/datapoints/) 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](https://canvasjs.com/docs/charts/chart-options/) 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
```

![CanvasJS Chart Integration with Flask App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mbd90la0x25vmtsxsfcx.png)
 
 
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](https://canvasjs.com) for more examples on charts. Adios!!!