Show Data on Google Pie Chart using Python Flask

Introduction

We will show data on Google pie chart using Python Flask API. We will show some static data on Google chart API using Flask web application. The data are built in a dictionary format using Python API and we display data on chart by rendering the Flask template.

Pie charts are generally used to show percentage or proportional data and usually the percentage represented by each category is provided next to the corresponding slice of pie.

Prerequisites

Python 3.7.4, Flask 1.1.1, Google Pie Chart API

Creating Project Directory

First step is to create a project root directory under which we will put all our required files for the project.

Let’s say I am going to create a project root directory pie-chart.

We may not mention the project root directory in subsequent sections and we will assume that we are talking with respect to the project’s root directory.

Configuring Flask

Create the below app.py script(py is the extension to indicate Python script) where we import the flask module. This file should be created under the project root directory. Notice how we create flask instance.

from flask import Flask

app = Flask(__name__)

Configuring URLs

Next we will create main.py script that will define the URI and render a template file for displaying data on Google pie chart.

Ideally the data should come from database or any other source and a chart should be generated based on real data. But for example purpose, here we are hard-coding the data to be displayed on pie chart.

We use http method GET for displaying view. By default http method is GET if you do not specify http method.

We use render_template function from flask to show the view. We pass the data as an argument to the render_template function.

from app import app
from flask import jsonify, request, render_template
		
@app.route('/google-charts/pie-chart')
def google_pie_chart():
	data = {'Task' : 'Hours per Day', 'Work' : 11, 'Eat' : 2, 'Commute' : 2, 'Watching TV' : 2, 'Sleeping' : 7}
	#print(data)
	return render_template('pie-chart.html', data=data)
		
if __name__ == "__main__":
    app.run()

View – Template File

Create a templates directory under the project’s root directory and create a template file pie-chart.html with the below content.

Now we will add Google chart API to display our data on chart. We will iterate dictionary items to build the pie chart.

We are also checking whether data is string or not. If the data type is string then we quote around it otherwise we simply put the integer value.

We configure chart options using options array with title and whether the pie chart should be rendered as 3D (is3D = true) or not (is3D = false) . By default pie chart is not rendered as 3D (is3D = false) .

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Show Data on Google Pie Chart using Python Flask</title>
	<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(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
			{% for key, value in data.items() %}
				{% if value is string %}
					['{{ key }}', '{{ value }}'],
				{% else %}
					['{{ key }}', {{ value }}],
				{% endif %}
			{% endfor %}
        ]);

        var options = {
          title: 'My Daily Activities',
          is3D: true,
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
        chart.draw(data, options);
      }
    </script>
</head>
<body>
	<div style="margin: 10px 0 0 10px;width: 1000px">
		<h3>Show Data on Google Pie Chart using Python Flask</h3>
		
		<div id="piechart_3d" style="width: 900px; height: 500px;"></div>
	</div>
</body>
</html>

Running and Testing the Application

Now navigate to the project’s root directory and execute the command python main.py as shown in the below image, your server will start on default port 5000.

If you want to change the port then you can change the line app.run() to app.run(port=50001), where 5001 is the new port.

Hit the URL http://localhost:5000/google-charts/pie-chart to open the home page and you will see below output on the page:

Making Donut Chart

If you want to make donut chart then update options array as follows:

var options = {
  title: 'My Daily Activities',
  pieHole: 0.5
};

Remember you cannot make both 3D and donut. So you have to choose any one of them and if you do, pieHole will be ignored.

The pieHole option should be set to a number between 0 and 1, corresponding to the ratio of radii between the hole and the chart. Numbers between 0.4 and 0.6 will look best on most charts. Values equal to or greater than 1 will be ignored, and a value of 0 will completely shut your piehole.

By applying above changes to the pie chart your donut chart will look like the below image:

Rotating a Pie Chart

By default, pie charts begin with the left edge of the first slice pointing straight up. You can change that with the pieStartAngle option:

var options = {
  title: 'My Daily Activities',
  is3D: true,
  pieStartAngle: 100
};

Here, we rotate the chart clockwise 100 degrees with an option of pieStartAngle: 100.

Notice you can make the chart 3D while you rotate.

Exploding a Slice

You can separate pie slices from the rest of the chart with the offset property of the slicesoption:

var options = {
  title: 'My Daily Activities',
  is3D: true,
  slices: {  
	2: {offset: 0.2},
	3: {offset: 0.3}
  }
};

Your chart output will be similar to the below image:

Removing Slices

To omit a slice, change the color to 'transparent':

var options = {
  title: 'My Daily Activities',
  is3D: true,
  slices: {
	1: { color: 'transparent' }
  }
};

We have removed the slice number 1.

Source Code

download source code

For more information on Google pie chart you can read here.

Thanks for reading.

Roy Tutorials