Show Data on Google Pie Chart using Python Flask

Last Updated : 30 Dec, 2022

In this article, we are going to build a mini project by using a Flask using Python and that will demonstrate to us the use of a google pie chart. A single web page on which input will be taken from users e.g an activity for how long they are performing. After clicking on submit it will generate a pie chart. It can be integrated into our application by putting javascript code into the page on which we are going to show the pie chart. Let’s dive into the project. follow each and every step properly.

What is Google Pie Chart?

The pie chart is a great way to represent data in numerical proportions. It’s a circular disk graphic on that data represented by different slices and colors. Google has provided these great tools for free, Not just only pie chart makers but it includes all other visualization ways. Mainly Our focus will be only on the pie chart. It has some types of 3D pie charts, Donut charts will see them while building the project.

Step to Implement Google Pie Chart using Python Flask

Step 1: Create a Virtual environment

Step 2: Create one project folder and open it in vs code. Enter the command in the terminal “virtual env”. This will create a virtual environment for us and once it’s done, activate the “env/Scripts/activate.ps1” command in the terminal.

Show Data on Google Pie Chart using Python Flask

Step 3: The next step is to create a template folder. You should get a folder structure like this:

Step 4: Getting Input Data From Users

We required an HTML file for the form and a function to take the data. Create a form.html file inside the templates folder. Add the following codes to the respective files.

Python3

<!DOCTYPE html > 
<html lang = "en" > 
<head > 
    <meta charset = "UTF-8" > 
    <meta http-equiv = "X-UA-Compatible" content = "IE=edge" > 
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0" > 
    <title > Document < /title > 
</head > 
<body > 
  
    <form action = "{{ url_for("get_data__show_chart")}}" method = "post" > 
    <div > 
       <table > 
        <tr > 
           <td > 
                <input type = "text" placeholder = "Title of pie chart" name = "title" > </tr > 
            </td > 
            <td > 
                <input type = "height" placeholder="height" name="ht" ></tr> 
            </td > 
            <td > 
                <input type = "width" placeholder="width" name="wt" ></tr> 
            </td > 
        </tr > 
        <tr > 
            <th > Daily Activities</th> 
            <th > Time in Hours</th> 
        </tr > 
        <tr > 
            <td > <input type="text" name="act1" placeholder="Activity 1"></td> 
            <td > <input type="number" name="t1" placeholder="Time 1"></td> 
        </tr > 
        <tr > 
            <td > <input type="text"  name="act2" placeholder="Activity 2"></td> 
            <td > <input type="number" name="t2" placeholder="Time 2"></td> 
        </tr > 
        <tr > 
            <td > <input type="text" name="act3" placeholder="Activity 3"></td> 
            <td > <input type="number" name="t3" placeholder="Time 3"></td> 
        </tr > 
    </table > 
    </div > 
    <button type = "submit" style="display:block;">Submit</button> 
</form > 
</body > 
</html > 

Step 5: The get_data__show_chart function will receive the post request that is the user data to proceed further and display the chart by rendering the index.html file else if it does not receive a post request then it will render the form.html file.

Python3

from flask import Flask, render_template, request 
  
app = Flask(__name__) 
  
  
@app.route("/", methods=['GET', 'POST']) 
def get_data__show_chart(): 
    if request.method == 'POST': 
        title = request.form.get('title') 
        height = request.form.get('ht') 
        width = request.form.get('wt') 
  
        activity_1 = request.form.get('act1') 
        time1 = request.form.get('t1') 
  
        activity_2 = request.form.get('act2') 
        time2 = request.form.get('t2') 
  
        activity_3 = request.form.get('act3') 
        time3 = request.form.get('t3') 
  
        return render_template('chart.html',  
                               act1=activity_1,  
                               act2=activity_2,  
                               act3=activity_3,  
                               t1=time1, 
                               t2=time2, t3=time3,  
                               ht=height, wt=width,  
                               title=title) 
  
    return render_template('form.html', name='form') 

Step 6: Data Representation using Pie Charts

We have to create chart.html which contains the javascript code to generate a pie chart from the input data that we got from the form.html file. Pie charts have 3 types:

Simple chart
3D chart
Donut Chart

google.charts.load(‘current’, {‘packages’:[‘corechart’]}): google pie chart tool required a core chart package so it will load it.

drawcharts(): Includes the code to add the data, the no of columns and rows, and how should it be represented on the chart that information we have to provide it.

To create a 3D chart we just have to add is3D: true in the options. Similarly, all other data and options will remain the same. To create a Donut chart we have to add pieHole: 0.4 inside the options object.

HTML

# templates/Chart.html 
  
<html > 
   <head > 
        <h1 > Data Representation by using Pie charts < /h1 > 
    </head > 
    <body > 
        <div style = "border: 1px solid black;"> 
            <div id = "simple_chart"></div> 
            <div id = "3dchart"></div> 
            <div id = "donut_chart"></div> 
        </div > 
        <script type = "text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
        <script type = "text/javascript"> 
  
            google.charts.load('current', {'packages': ['corechart']}) 
  
            google.charts.setOnLoadCallback(drawCharts) 
  
            function drawCharts() { 
                var data = new google.visualization.DataTable() 
              data.addColumn('string', 'Daily Activity') 
              data.addColumn('number', 'Hours'); 
              data.addRows([ 
                  ['{{act1}}', {{t1}}], 
                  ['{{act2}}', {{t2}}], 
                  ['{{act3}}', {{t3}}] 
              ]); 
  
              var options_1 = { 
                  'title': 'Simple Chart', 
                  'width': '{{wt}}', 
                             'height': '{{ht}}' 
              } 
  
              var options_2 = { 
                  'title': '3D Chart', 
                            'width': '{{wt}}', 
                            'height': '{{ht}}', 
                            'is3D': true, 
              } 
  
              var options_3 = { 
                  'title': 'Donut Chart', 
                  'width': '{{wt}}', 
                          'height': '{{ht}}', 
                          'pieHole': 0.4, 
              } 
  
              var simple_chart = new google.visualization.PieChart(document.getElementById('simple_chart')); 
              simple_chart.draw(data, options_1); 
  
  
              var _3dchart = new google.visualization.PieChart(document.getElementById('3dchart')); 
              _3dchart.draw(data, options_2); 
  
              var donut_chart = new google.visualization.PieChart(document.getElementById('donut_chart')); 
              donut_chart.draw(data, options_3);             } 
        </script > 
    </body > 
</html > 

To run our project activate the virtual environment and enter the following command to run the application. Then visit the URL to check out the results