【94日目】Django_日付情報を使ってグラフ作成①

　このnoteは、31歳未経験からエンジニアを目指して勉強していく記録を綴っているものです。現在はAdTechでカスタマーサクセスを担当しつつ、色んなチャンスに恵まれ、CS業務や子育てと並行しながらチャレンジしています。

　これからプログラミングを始める方にとってのTipsやモチベアップに繋げられるように頑張りたいと思っています。
--------------------------------------------

Djangoでのグラフ表示にチャレンジ中で、前回まではグラフだけのアプリを作ってとりあえず表示させてみる、というところまでやりました。

↓前回

本日から、自作してきたTodoアプリにグラフを実装したいと思います。
以下のようなグラフを作ろうとしています。

---

縦軸が【完了済タスクの数】で、横軸が【最終更新日】のグラフ
・完了日がバラついている人＝
　マルチタスクせず一つずつ終わらせている？
　タスクを細分化している？
・完了日が固まっている人＝
　複数のタスクを並行して進めている？
　タスクを大雑把にまとめている？

パフォーマンスが良い人がどういうグラフになっているかで、仕事の進め方の参考になりそうです。

---

一撃ではうまくいかなかったので、本日はデータの入ってない箱だけが出来上がりました。

グラフ化するためのクラスは前回記事で紹介したものと同じものをgraph.pyに作成しました。

[graph.py]

import matplotlib.pyplot as plt
import base64
from io import BytesIO

def Output_Graph():
    buffer = BytesIO()
    plt.savefig(buffer, format="png")
    buffer.seek(0)
    img = buffer.getvalue()
    graph = base64.b64encode(img)
    graph = graph.decode("utf-8")
    buffer.close()
    return graph

def Plot_Graph(x,y):
    plt.switch_backend("AGG")
    plt.figure(figsize=(10,5))
    plt.bar(x,y)
    plt.xticks(rotation=45)
    plt.title("完了済タスク数の推移")
    plt.xlabel("日付")
    plt.ylabel("タスク数")
    plt.tight_layout()
    graph = Output_Graph()
    return graph

本日の肝はviews.pyです。新しくビューを作り、その中で①グラフに表示する期間と、②各日付＝最終更新日となっているタスクを数える機能を記述しています。

[views.py]

from django.views.generic import TemplateView
from . import graph
from datetime import timedelta

 
class TodoAnalysis(TemplateView):
    template_name = "todo/todo_analysis.html"

    def get_context_data(self, **kwargs):
        # グラフに表示する期間を指定する
        d1 = datetime.date(2022,2,1)
        d2 = datetime.date.today()
        N = (d2 - d1).days + 1
        # 指定期間の辞書を作る
        tasks = {}
        for i in range(N):
            date = d1 + timedelta(i)
            tasks[date] = 0
        # Todoモデルのクエリセットからupdated_at(=最終更新日)を取得して処理する
        # 最終更新日が辞書の中にあったらカウントする、という処理を実装したい（まだうまくいってない） 
        qs = Todo.objects.all()
        for ele in qs:
            date = ele.updated_at
            if date in tasks:
                tasks[date] += 1
        x = [x for x in tasks.keys()]
        y = [y for y in tasks.values()]
        chart = graph.Plot_Graph(x, y)

        context = super().get_context_data(**kwargs)
        context['chart'] = chart
        return context
    
    def get(self, request, *args, **kwargs):
        return super().get(request, *args, **kwargs)

この内容で記述して、冒頭の空のグラフが出来上がりました。中段の「for ele in qs」以降の処理がうまくいってないのではないかと考えています（というか、「date = ele.updated_at」に日付だけじゃなくて時間の情報まで入ってしまっているせいだと踏んでいます）。

日付の処理って何かと繊細ですね。明日はまずここを直す方法を探していきたいと思います。

とりあえずグラフにデータを表示させたい…！！

↓次回記事です

これまで修了したコース等

【YouTube_Django関係】
Pythonでウェブサービスを作ろう！ #1
テンプレートをマスターしよう！ #2
静的ファイルを配信しよう ！#3
本番公開しよう！ #4
データベースと接続しよう！ #5
ブログを作って学ぶモデル入門！ #6
これが汎用ビューの力！ #7
Djangoフォームを自由自在に操ろう！ #8
djagoを最大限使って効率よくログインを作ろう！ #9
ログイン完成！サインアップ & メール認証 #10
データベースマイグレーション前編 #15
データベースマイグレーション後編 #16

【Paiza】
Aランクレベルアップメニュー　24/49問
データセット選択メニュー　　　12/17問
配列メニュー　　　　　　 　　61/64問
ループメニュー１　　　　　　20/20問
ループメニュー２　　　　　　12/20問
条件分岐メニュー　　　 　　　25/25問
二重ループメニュー　　 　　　19/19問
配列活用メニュー　　　 　　　26/26問
文字列処理メニュー　　 　　　30/30問
Bランクレベルアップメニュー　62/62問
Cランクレベルアップメニュー　30/30問
ランクB合格
ランクC合格
JavaScript体験篇　　　　　　　15/15講座
辞書(ディクショナリ)の基礎 8/8講座

【書籍／ブログ】
Django入門 | 初心者でも1時間でWebアプリ(Todoアプリ)を作成するコース
基礎からのMySQL　　　　 514/514頁
Web技術の基本　　　　　 189/189頁　※2周目中
京大のPython教科書　　　 116/201頁
Pythonデータベースプログラミング　194/194頁
Pythonエンジニアファーストブック読了

【Progate】
Python Ⅰ~Ⅴ
Python アプリ版　コースⅠ~Ⅴ
SQL Ⅰ~ Ⅳ
SQL アプリ版　コースⅢ
HTML&CSS 初級編

【その他】
Pythonの環境構築
VSCodeの環境構築
MySQLの環境構築（MAMP）
Git / GitHubの環境構築
HEROKUの環境構築