Использование Google Charts с Flask динамически - PullRequest
Новая
       28

Использование Google Charts с Flask динамически

0 голосов
/ 21 апреля 2020

Я совершенно новичок в построении приложений с Flask и Python.

Я пытаюсь создать столбчатые диаграммы Google, которые меняются динамически при изменении данных в моем файле Phython. Я пробовал много разных способов, которые описаны на stackoverflow, но они не соответствуют моему требованию.

Я не знаю о Javascript.

Мои данные выглядят следующим образом: 

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

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

Я уже пытался преобразовать этот список в JSON, но мне не удалось найти правильный формат.

Было бы здорово, если бы вы могли мне помочь. :)

Обновление: 


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

и диаграмма. html файл: 

{% 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 %}

и база. html файл: 

<!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>

Но это все равно не работает. - Я думаю, что есть проблема с переносом jsonData на JS.

...