如何在Flask-Google_Charts中创建多个动态图表

时间:2017-12-31 17:25:21

标签: python python-3.x flask google-visualization

我正在创建反馈应用,在结果部分,我需要为每个问题显示Google Charts。列是静态的 没有,但是数据需要动态设置,所以我使用window.load来显示页面。 显示数据的格式是

Question
chart

有更好的方法吗?

views.py

@expose('/_charts',methods=["GET","POST"])
def load_chart(self):
    stream_id=request.args.get('stream',0,type=int)
    subject_id=request.args.get('subject',0,type=int)
    teacher_id=request.args.get('teacher',0,type=int)
    question=[(ques.id,ques.question) for ques in Questions.query.all()]
    chart_data=[]
    for key,value in question:
        ans_yes=Submissions.query.filter_by(submission=1,question_id=key,subject_id=subject_id,user_id=teacher_id).count()
        ans_no=Submissions.query.filter_by(submission=2,question_id=key,subject_id=subject_id,user_id=teacher_id).count()
        my_chart=PieChart("teacher_chart"+str(key),options={'title': 'Submission', "width": 500,"height": 300,"is3D":True})
        my_chart.add_column("string", "Answer")
        my_chart.add_column("number", "percent")
        my_chart.add_rows([["Yes", ans_yes],
        ["NO", ans_no]])
        chart_data.append(my_chart)
        charts.register(my_chart)
    print(chart_data)
    return self.render('admin/result_chart.html',stream_id=stream_id,

问题=问题,chart_data = chart_data)

result_chart.html

 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div class="container">
    <div class="row" >
    {% for key,question in question %}
        <p>{{key}},{{question}}</p>
        <br>
        {{ charts.teacher_chart+key }}
        {% endfor %}

    </div>
</div>
<!-- <script  type="text/javascript" src="{{ url_for('static',filename='js/jquery-3.2.1.min.js') }}"></script> -->
{{ charts_init }}

错误

   WARNING in __init__ [/home/leon/Leon/Projects/OSFpyapp/osapp/lib/python3.5/site-packages/flask_googlecharts/__init__.py:257]:
Chart "teacher_chart5" not included on template.
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
WARNING in __init__ [/home/leon/Leon/Projects/OSFpyapp/osapp/lib/python3.5/site-packages/flask_googlecharts/__init__.py:257]:
Chart "teacher_chart2" not included on template.
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
WARNING in __init__ [/home/leon/Leon/Projects/OSFpyapp/osapp/lib/python3.5/site-packages/flask_googlecharts/__init__.py:257]:
Chart "teacher_chart4" not included on template.
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
WARNING in __init__ [/home/leon/Leon/Projects/OSFpyapp/osapp/lib/python3.5/site-packages/flask_googlecharts/__init__.py:257]:
Chart "teacher_chart3" not included on template.

Console.log错误

[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check
VM10716:1 Uncaught ReferenceError: google is not defined
    at eval (eval at globalEval (jquery.min.js?v=2.1.4:2), <anonymous>:1:1)
    at eval (<anonymous>)
    at Function.globalEval (jquery.min.js?v=2.1.4:2)
    at n.fn.init.domManip (jquery.min.js?v=2.1.4:3)
    at n.fn.init.append (jquery.min.js?v=2.1.4:3)
    at n.fn.init.<anonymous> (jquery.min.js?v=2.1.4:3)
    at n.access (jquery.min.js?v=2.1.4:2)
    at n.fn.init.html (jquery.min.js?v=2.1.4:3)
    at Object.<anonymous> (jquery.min.js?v=2.1.4:4)
    at j (jquery.min.js?v=2.1.4:2)

results.html

 <script type="text/javascript" charset="utf-8">
$(document).ready(function(){
    $("#teacher_select").on('click',function(){

            stream_id=$("stream_select").val();
            subject_id=$("subject_select").val();
            teacher_id=$("teacher_select").val();


        $('#showdata').load("{{url_for('results.load_chart')}}",'stream=stream_id')


    });

});

修改 好的,所以除了 [Deprecation] Synchronous XMLHttpRequest 之外我还修复了动态图表问题 但现在我遇到了一个新问题。我无法弄清楚如何以

的格式打印它
  

问题
图表

chart_data这里是一个列表,而问题循环是列表中的元组。

views.py

@expose('/_charts',methods=["GET","POST"])
    def load_chart(self):
        stream_id=request.args.get('stream',0,type=int)
        subject_id=request.args.get('subject',0,type=int)
        teacher_id=request.args.get('teacher',0,type=int)
        question=[(ques.id,ques.question) for ques in Questions.query.all()]
        chart_data=[]
        for key,value in question:
            ans_yes=Submissions.query.filter_by(submission=1,question_id=1,subject_id=1,user_id=2).count()
            ans_no=Submissions.query.filter_by(submission=2,question_id=1,subject_id=1,user_id=2).count()
            # ans_no=Submissions.query.filter_by(submission=2,question_id=key,subject_id=subject_id,user_id=teacher_id).count()
            my_chart=PieChart("teacher_chart"+str(key),options={'title': 'Submission', "width": 500,"height": 300,"is3D":True})
            my_chart.add_column("string", "Answer")
            my_chart.add_column("number", "percent")
            print("\t\t\t",ans_no)
            print("\t\t\t",ans_yes)
            my_chart.add_rows([["Yes", ans_yes],["NO", ans_no]])
            chart_data.append(my_chart.name)

            charts.register(my_chart)

        return self.render('admin/result_chart.html',stream_id=stream_id,question=question,chart_data=chart_data)

results.html

<div class="container">
    <div class="row" >


    {% for k in chart_data %}
    {% for key,questions in question %}
        <p>{{questions}}</p>

        {{ charts[k] }}

        {% endfor %}

        {% endfor %}
</div>
</div>

0 个答案:

没有答案