How to pass a List values into the google pie chart in Python Flask

Question

I need to pass a List value from a data frame in to the Google Pie Chart as shown below.

Help to pass the Jinja code into the Java script.

@app.route('/home',methods =['GET','POST'])
def homepage():
    data = pd.read_csv('flask_fm/static/module_wise.csv')
    #pd_data = df_ora.to_dict()
    print(data)
    print(data.columns.values)
    print(list(data.values.tolist()))
    return render_template('homepage.html', row_data=list(data.values.tolist()))

Result Set:- [['ranjith', 200], ['master', 400], ['vighas', 431], ['libmap', 525], ['aram', 421], ['svam', 444], ['dnemaf', 555]]

HTML:

 <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([

          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

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

        var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
        chart.draw(data, options);
      }
    </script>

<div id="donutchart" style="width: 900px; height: 500px;"></div>

I need to include something as like below, instead of the hardcoded list as provided in the HTML file.

{% for i,j in row_data  %}
[i, j],
{% endfor %}

Any inputs on this and help to share us on how to embed the jinja template here in the java script?

Answer 1

For demo purposes let's say your route looks like this:

@app.route("/", methods=["GET", "POST"])
def homepage():
    values = [
        ["Task", "Hours per Day"],
        ["Work", 11],
        ["Eat", 2],
        ["Commute", 2],
        ["Watch TV", 2],
        ["Sleep", 7],
    ]
    return render_template("index.html", row_data=values)

Then inside the template we can use the tojson filter so we can pass the data to the arrayToDataTable function:

<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() {
    const json = {{ row_data|tojson }}
    const data = google.visualization.arrayToDataTable(json);

    const options = {
      title: 'My Daily Activities',
      pieHole: 0.4,
    };

    const chart = new google.visualization.PieChart(document.getElementById('donutchart'));
    chart.draw(data, options);
  }
</script>

<div id="donutchart" style="width: 900px; height: 500px;"></div>