最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How could I pass data to chart.js with flask? - Stack Overflow

programmeradmin1浏览0评论

I recently trying to make dashboard which datas from mongodb with flask. But I cannot send datas to chart.js. I got the data from mongodb and send to javascript and try to loop data with jinja2.

@app.route("/dashboard")
def dashboard():
    limit = request.args.get("limit",12,type=int)
    dashboardDatas = mongo.db.dashBoard
    dashDatas = dashboardDatas.find().limit(limit)

    return render_template("dashboard.html", dashDatas = dashDatas)
        <canvas id="myChart" height="50"></canvas>

        <script>
            var ctx = document.getElementById('myChart').getContext('2d');
            var myChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: [ {% for item in dashDatas %} 
                                '{{item._id}}', 
                                {% endfor %} ],
                    datasets: [{
                        label: '# of Votes',
                        data: [ {% for item in dashDatas %}
                                {{item.logistic}},
                                {% endfor %}],
                        borderColor: [
                            'rgba(255, 99, 132, 1)',
                        ],
                        backgroundColor: [
                            'rgba(255, 99, 132, 0.2)',
                        ],
                        borderWidth: 0.5
                    }]
                },
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true
                            }
                        }]
                    }
                }
            });
            </script>

And I got empty chart. What did I do wrong?

I recently trying to make dashboard which datas from mongodb with flask. But I cannot send datas to chart.js. I got the data from mongodb and send to javascript and try to loop data with jinja2.

@app.route("/dashboard")
def dashboard():
    limit = request.args.get("limit",12,type=int)
    dashboardDatas = mongo.db.dashBoard
    dashDatas = dashboardDatas.find().limit(limit)

    return render_template("dashboard.html", dashDatas = dashDatas)
        <canvas id="myChart" height="50"></canvas>

        <script>
            var ctx = document.getElementById('myChart').getContext('2d');
            var myChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: [ {% for item in dashDatas %} 
                                '{{item._id}}', 
                                {% endfor %} ],
                    datasets: [{
                        label: '# of Votes',
                        data: [ {% for item in dashDatas %}
                                {{item.logistic}},
                                {% endfor %}],
                        borderColor: [
                            'rgba(255, 99, 132, 1)',
                        ],
                        backgroundColor: [
                            'rgba(255, 99, 132, 0.2)',
                        ],
                        borderWidth: 0.5
                    }]
                },
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true
                            }
                        }]
                    }
                }
            });
            </script>

And I got empty chart. What did I do wrong?

Share Improve this question asked Nov 17, 2020 at 11:08 blueskybluesky 551 silver badge7 bronze badges 4
  • I have a little knowledge in python, usually in js for loop is used for iterating it won't be return an array back, i feel like that can you check it – Beginner Commented Nov 17, 2020 at 11:13
  • Just try instead of looping pass the datasets and labels as array something like this, and create the array in python code . => return render_template("dashboard.html", dashDatas = dashDatas, labels = labels, datasets = datasets) – Beginner Commented Nov 17, 2020 at 11:22
  • It would help if you attach the generated HTML. – voyager42 Commented Nov 17, 2020 at 13:24
  • Can you please include the output of print(dashDatas) (pastebin link if long) – v25 Commented Nov 17, 2020 at 18:43
Add a ment  | 

2 Answers 2

Reset to default 7

My approach is to store the labels and data in lists in the Flask view, pass them to the template and transform them to JSON with the tojson filter.

Suppose you have labels = ['a', 'b', 'c'] and data = [1, 2, 3] in your view. You can pass them to Chart.js in your template as

let chart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: {{ labels|tojson }},
    datasets: [{
      label: 'My 1st dataset',
      backgroundColor: 'rgb(255, 99, 132)',
      borderColor: 'rgb(255, 99, 132)',
      data: {{ data|tojson }}
  }]
});

Version (library) 1 of chartjs has important differences to version 2 in terms of usability. Fine references are: . version 1: https://blog.ruanbekker./blog/2017/12/14/graphing-pretty-charts-with-python-flask-and-chartjs/ . version 2: https://towardsdatascience./flask-and-chart-js-tutorial-i-d33e05fba845

发布评论

评论列表(0)

  1. 暂无评论