Using Google Charts with Flask dynamically

Question

Using Google Charts with Flask dynamically

1.9k Views Asked by Siedlerbauer At 19 April 2025 at 10:13

I am completely new to App building with Flask and Python.

I am trying to create Google column charts, which change dynamically, when i change the data in my Phython file. I tried a lot of different way, which are described on stackoverflow, but they dont fit to my demand.

I have no knowledge about Javascript.

My data look like this list:

Status = [('active', '106297'), ('inactive', '236'), ('planned', '27453')]

@app.route('/test03')
def test03():
    return render_template('chart.html', **globals())

I already tried to convert this list into JSON, but i wasn't able to find the right format.

Would be really nice, if you can help me. :)

Update:


from flask import Flask, render_template, request, jsonify, url_for
import gviz_api

# Creating the data
description = {"name": ("string", "Name"),
               "salary": ("number", "Salary")}
data = [{"name": "Mike", "salary": 10000},
        {"name": "Jim", "salary": 800},
        {"name": "Alice", "salary": 12500},
        {"name": "Bob", "salary": 7000}]

# Loading it into gviz_api.DataTable
data_table = gviz_api.DataTable(description)
data_table.LoadData(data)

# Create a JavaScript code string.
jscode = data_table.ToJSCode("jscode_data",
                             columns_order=("name", "salary"),
                             order_by="salary")
# Create a JSON string.
jsonData = data_table.ToJSon(columns_order=("name", "salary"),
                         order_by="salary")

print("Finish")

app = Flask(__name__)
# charts = GoogleCharts(app)

@app.route('/')
def test():
    return render_template('chart.html', **globals())

if __name__ == '__main__':
    # app.run(debug=True, host='192.168.43.183', port=800) # Home

and the chart.html file:

{% extends 'base.html' %}

{% block head %}
  <script src="https://www.gstatic.com/charts/loader.js"></script>
  <script>
    google.charts.load('current', {packages: ['corechart']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      // Define the chart to be drawn.
      var data = new google.visualization.DataTable(jsonData);

      // Instantiate and draw the chart.
      var chart = new google.visualization.ColumnChart(document.getElementById('myPieChart'));
      chart.draw(data, null);
    }
  </script>
{% endblock %}

{% block body %}
<h1>Hello, this is my Columnchart-Test</h1>
  <!-- Identify where the chart should be drawn. -->
<div id="myPieChart"></div>
{% endblock %}

and the base.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="{{ url_for('static', filename='css/main.css') }}" type="text/css" rel="stylesheet">

    {% block head %}{% endblock %}
</head>
<body>
    {% block body %}{% endblock %}

</body>
</html>

But it still doesn't work. - I think there is a problem with the transfer of jsonData to JS.

Original Q&A

There are 2 best solutions below

**ulgkjgj** · Answer 1

I recently ran into the same exact problem when I was trying to create a chart for a web app I was making and even considered using chart.js because I suspected it would be easier but I found a solution. What you need to do is pass in the data to be graphed as a dictionary then loop through it using jinja formatting in the html file. i.e.

    from flask import Flask, render_template, request, jsonify, url_for
    import gviz_api


    @app.route('/')
    def test():
        return render_template('chart.html', data={"Name":"Salary", "Mike":10000, "Jim":800, "Alice":12500,"Bob":7000})

    if __name__ == '__main__':
        app.run(debug=True)

And the chart.html should be something like this

    {% extends 'base.html' %}

    {% block head %}
      <script src="https://www.gstatic.com/charts/loader.js"></script>
      <script>
        google.charts.load('current', {packages: ['corechart']});
        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {
          // Define the chart to be drawn.
          var data = new google.visualization.arrayToDataTable([
             {% for k, v in data.items() %}
                {% if v is string %}
                  ['{{ k }}', '{{ v }}'],
                {% else %}
                  ['{{ k }}', {{ v }}],
                {% endif %}
             {% endfor %}
          ]);


          // Instantiate and draw the chart.
          var chart = new google.visualization.ColumnChart(document.getElementById('myPieChart'));
          chart.draw(data, null);
        }
      </script>
    {% endblock %}

    {% block body %}
    <h1>Hello, this is my Columnchart-Test</h1>
    <!-- Identify where the chart should be drawn. -->
    <div id="myPieChart"></div>
    {% endblock %}

I dont think any changes need to be made to the base.html file. This worked for me so I think it should work for you too.

**Andy D** · Answer 2

You need to add {{ jsonData || safe }} in the template part and you just need to put the jinja bit.

I'm not sure about globals but jsonData=jsonData in the app.py returns template bit.

Template:

var data = new google.visualization.DataTable( {{ jsonData|safe }} );

app.py:

return render_template('chart.html', jscode=jscode, jsonData=jsonData)

Using Google Charts with Flask dynamically

There are 2 best solutions below

Related Questions in PYTHON

Related Questions in JSON

Related Questions in FLASK

Related Questions in GOOGLE-VISUALIZATION

Related Questions in GOOGLE-BARCHART

Trending Questions

Popular # Hahtags

Popular Questions