DEV Community 👩‍💻👨‍💻

Manoj Mohan
Manoj Mohan

Posted on

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

  1. Install python and setup environment for development. Please follow link for more information on this. Also, activate virtual environment.
  2. Download CanvasJS 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()
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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 %}
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

Run the flask app

py chart-sample.py
Enter fullscreen mode Exit fullscreen mode

CanvasJS Chart Integration with Flask App

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!!!

Top comments (0)

Create an Account!
Now it's your turn!
 
🗒 Share a tutorial
🤔 Reflect on your coding journey
❓ Ask a question

Create an account to join hundreds of thousands of DEV members on their journey.