Несколько графиков в соответствии с годом, месяцем и днем, используя FLASK, график js ajax - PullRequest
0 голосов
/ 20 марта 2019

Я хочу создать диаграмму, используя Jas & AJAX Flask Chart, чтобы при нажатии на Год данные могли поступать в месяцах, а если я нажимал на месяцы, то они приходились по дням.

вот мои бэкэнд-коды.

import json
from flask import Flask,Markup,render_template, jsonify
import psycopg2

conn = psycopg2.connect("dbname=mychatroom user=postgres password=postgres")
cur = conn.cursor()

app = Flask(__name__)

@app.route('/')
def index():
   return render_template('index.html')
 
def getMessagesPerYear():
   query="select date_part('Year', time), count(time) from chatbotmessages group by 1;"
   cur.execute(query)
   data = cur.fetchall()
   return  data

data=getMessagesPerYear()

msg=[]
Year=[]
for i, j in data:
    j=int(j)
    i=int(i)
    msg.append(j)
    Year.append(i)


@app.route("/admin/<company>", methods=['GET', 'POST'])
def chart():
    legend = 'Year Wise'
    labels = Year[::-1]
    values = msg[::-1]
    return jsonify({'data': render_template('charts.html', values=values, labels=labels, legend=legend)})

    

@app.route("/admin/<company>/<year>")
def getMessagesPerMonth(company,year):
    a= request.get("")
    query="select date_part('Month', time), count(time) from chatbotmessages where date_part('Year', time)={} group by time;".format(Year)
    cur.execute(query)
    data = cur.fetchall()
    msg=[]
    Month=[]
    for i, j in data:
        msg.append(int(j))
        Month.append(int(i))
    data_dict=dict(zip(Month,msg))
    month_lst = {1:0, 2:0, 3:0, 4:0, 5:0, 6:0, 7:0, 8:0, 9:0, 10:0, 11:0, 12:0}
    for mon in data_dict:
        if mon in month_lst:
            month_lst[mon]=data_dict[mon]
            m=[]
            c=[]
        for k, v in month_lst.items():
            m.append(k)
            c.append(v)
    legend = 'Month Wise'
    labels = m
    values = c
    return jsonify({'data': render_template('charts.html', values=values, labels=labels, legend=legend)})
   
@app.route("/company/<year>/<month>/")
def getMessagesPerDay(company,year, month):
   cur.execute("SELECT date_part('day',time), count(message) FROM chatbotmessages where date_part('Year', time)={} AND date_part('Month', time)={} GROUP BY time, message".format(Year, Month))
   data = cur.fetchall()
   Days=[]
   Msgs=[]
   for i, j in data:
      Days.append(int(i))
      Msgs.append(j)
   data_dict=dict(zip(Days,Msgs))
   def msgDict():
      if int(Month)==4 or int(Month)==6:
         msg_dict=dict(zip(range(1,31),[0]*30))
      elif int(Month)==9 or int(Month)==11:
         msg_dict=dict(zip(range(1,31),[0]*30))
      elif  int(Month)==2 and int(Year)%4==0:
         msg_dict=dict(zip(range(1,30),[0]*29))
      elif int(Month)==2 and int(Year)%4!=0:
         msg_dict=dict(zip(range(1,29),[0]*28))
      else:
         msg_dict=dict(zip(range(1,32),[0]*31))
      return msg_dict
   msg_dict=msgDict()
   for i in data_dict:
      if i in msg_dict:
         msg_dict[i]=data_dict[i]
   Day=[]
   msg_num=[]
   for k, v in msg_dict.items():
      Day.append(k)
      msg_num.append(v)
   legend = 'Day Wise'
   labels=Day
   values=msg_num
   data_dict=dict(zip(labels,values))
   
 
if __name__ == "__main__":
    app.run(host='0.0.0.0', port=5000)

Вот мой код внешнего интерфейса. Я должен использовать JQUERY / AJAX, чтобы перейти к графику месяца и графику дня, нажимая кнопки года и месяца.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Message Chart</title>
    <!-- import plugin script -->
    <script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js'></script>
  </head>
  <body>
    <h1> Messages Per Year </h1>
    <!-- bar chart canvas element -->
    <canvas id="myChart" width="600" height="400"></canvas>
    <p id="caption">The chart is displaying a line chart of messages per year.</p>

    <script>
      // Global parameters:
      // do not resize the chart canvas when its container does (keep at 600x400px)
      Chart.defaults.global.responsive = false;
      hoverRadius: 4;
      // define the chart data
      var chartData = {
        labels : [{% for item in labels %}
                   "{{item}}",
                  {% endfor %}],
        datasets : [{
            label: '{{ legend }}',
            fill: false,
            lineTension: 0.1,
            backgroundColor: "rgba(75,192,192,0.4)",
            borderColor: "rgba(75,192,192,1)",
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: "rgba(75,192,192,1)",
            pointBackgroundColor: "#fff",
            pointBorderWidth: 1,
            pointHoverRadius: 8,
            pointHoverBackgroundColor: "rgba(75,192,192,1)",
            pointHoverBorderColor: "rgba(220,220,220,1)",
            pointHoverBorderWidth: 2,
            pointRadius: 1,
            pointHitRadius: 10,
            data : [{% for item in values %}
                     {{item}},
                    {% endfor %}],
            spanGaps: false
        }]
      }

      // get chart canvas
      var ctx = document.getElementById("myChart").getContext("2d");

      // create the chart using the chart canvas
      var myChart = new Chart(ctx, {
        type: 'line',
        data: chartData,
      });
    </script>
  </body>
</html>

Я начинаю свою карьеру. Каждая помощь высоко ценится. Заранее спасибо!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...