在JavaScript的piechart中使用SQL数据（来自PY查询）

我正试图编写一个程序，使用SQL数据库中的数据在html文件中绘制一个图形图表。 我查询db以返回类别总和的列表，但我不知道如何在html文件中获取该数据，因为我需要它在Java脚本代码的列表中。 我试图理解JSON，但真的不理解。 这是我的PY和HTML代码，作为参考，我在drawchart函数的列表中写了两项

@app.route("/")
@login_required
def index():
    #gets total sum of each category
    totals = db.execute("""
                SELECT category, SUM (amount)
                FROM inputs
                WHERE user_id = :user_id
                GROUP BY category
                """, user_id=session["user_id"])

    return render_template("index.html", totals=totals)

{%extends“layout.html”%}
{%block title%}
指数
{%endblock%}
{%block main%}
load（'current'，{packages:['corechart']}）；
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=new google.visualization.arrayToDataTable([
[‘类别’、‘金额’]，
[“存款”，2]，
[‘薪水’，4]
]);
变量选项={
标题：“收入和支出类别”
};
var chart=new google.visualization.PieChart（document.getElementById（'PieChart'）；
图表绘制（数据、选项）；
} 
{%endblock%}

{% extends "layout.html" %}

{% block title %}
    Index
{% endblock %}

{% block main %}
    <script src="https://www.gstatic.com/charts/loader.js"></script>
    <script>
    google.charts.load('current', {packages: ['corechart']});
    google.charts.setOnLoadCallback(drawChart);
        
      function drawChart() {
          var data = new google.visualization.arrayToDataTable([
              ['Category', 'Amount'],
              ['Deposit', 2],
              ['Salary', 4]
          ]);
          
          var options = {
              title: 'Income and Expenses Categories'
          };
          
          var chart = new google.visualization.PieChart(document.getElementById('piechart'));
      
          chart.draw(data, options);
      } 
    </script>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
{% endblock %}