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
anddonut
. 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 slices
option:
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
For more information on Google pie chart you can read here.
Thanks for reading.
Thank you for publishing this, I truly don’t understand why google made it so difficult to get data into their chart service dynamically..