FlaskでCSVファイルの読み込んでグラフ化、日付と時間範囲を指定してグラフ化したい

前提・実現したいこと

Pythonの初心者です。どうぞよろしくお願い致します。

ある装置からの出力データ(CSV形式)をPythonで解析し、解析結果(CSV形式)をWebページ(閲覧は社内に限定)で表示して、関係者と共有するというシステムの作成に取り組んでいます。解析プログラムはほぼ完成したのですが、次のステップである「結果の表示・共有」で苦労しており、お知恵を拝借したく存じます。

解析結果のCSVファイルは以下のような形式です。

CSV
12020-06-11 09:01:10, 2.7569980694980693e-10
22020-06-11 09:01:17, 3.191361003861004e-10
32020-06-11 09:01:24, -5.7878861003861e-11
42020-06-11 09:01:30, 9.338803088803089e-10
52020-06-11 09:01:37, -1.7326254826254826e-11
6...

同じ形式のデータが3つあり、一つのCSVファイルは大体一日ごとに区切られています。
これをWebページ経由で関係者と共有するのが目的です。

そして、この共有用のWebページでは、

(日々の装置の動作状況のチェックとして)上記の3つのCSVファイルのデータをグラフ化して表示、
(過去のデータを見るため)ユーザーがフォームに日付と時間の範囲を入力すると、その範囲のデータを表示、

この2つの機能を実装したいのです。

解析プログラムの実行から表示までは、cronを用いて毎日定刻での自動実行を想定しています。例えば、6月11日の昼にプログラムが自動実行されると、前日6月10日の結果を表示される、ということを想定しています。

試したこと(1)

Pythonでは「Django(ジャンゴ)」というWebアプリケーション作成のフレームワークがあることを知り、まずはこれを用いて表示プログラムとページ作成の試行錯誤を行いました。

結果、上記の「1」については、Matplotlibを用いて出力し、画像として保存したグラフをWebページ上に表示させることはできました。これでも良いのですが、可能であれば、(Matplotlibの機能にあるように)グラフにカーソルを近付けると値が読めると利便性が高いと思っております。そこで、表示プログラムでCSVファイルを読み込んでグラフを表示させたいのですが、未だに達成できずおります。以下のページも参考にしております

https://qiita.com/sumsum88/items/9d43f0af5b3c34997d2e

試したこと(2)

Djangoは多機能ですが、初心者には少々敷居が高く、悪戦苦闘しておりました。その後、「Flask」というもう少し軽量(?)な同様のフレームワークの存在を知り、現在はこれを用いています。

しかし、上記の「2」については未だ目処が立たずに困っております。フォームに送信した日付をPythonに引き渡してグラフ化する、という流れは分かるのですが、どのように実装すれば良いのかが分からないのです。

つきましては、コメント・アドバイスいただければ幸いに存じます。どうぞよろしくお願い致します。

追記(6/11)

現在までに作成したコードをお示し致します。下記ページを参考にして、以下のフォルダ構成で作業を行なっています。
https://pythonprogramming.net/adding-js-plugins-flask-highcharts-example/

root
├── app.py
├── static
│ ├── graph.js
│
├── templates
│ ├── index.html

上の「root」「static」「templates」のいずれもフォルダです。そして、rootフォルダの直下にapp.pyを置いてあります。app.pyは以下の通りです。

python
1from flask import Flask, render_template
2from flask import request, jsonify, url_for, redirect
3from process import format_for_highcharts
4import pandas as pd
5
6# ref. https://pythonprogramming.net/adding-js-plugins-flask-highcharts-example/
7
8app = Flask(__name__)
9
10@app.route('/')
11def graph(chartID = 'chart_ID', chart_type = 'line', chart_height=500):
12    chart = {"renderTo": chartID, "type": chart_type, "height": chart_height,}
13    series = [{"name": 'Label1', "data": [1,2,3]}, {"name": 'Label2', "data": [4, 5, 6]}]
14    title = {"text": 'Sample data'}
15    xAxis = {"categories": ['xAxis Data1', 'xAxis Data2', 'xAxis Data3']}
16    yAxis = {"title": {"text": 'yAxis Label'}}
17
18    return render_template('index.html', chartID=chartID, chart=chart, series=series, title=title, xAxis=xAxis, yAxis=yAxis)
19
20if __name__ == "__main__":
21    app.run(debug=True, host='127.0.0.1', port=8080, passthrough_errors=True)

「templates」に置いたindex.htmlは以下の通りです。

html
1<html>
2<link rel="stylesheet" media="screen" href = "{{ url_for('static', filename='bootstrap.min.css') }}">
3<meta name="viewport" content = "width=device-width, initial-scale=1.0">
4<head>
5</head>
6
7<body class = "body">
8
9  <body>
10    <h3>{{ title }}</h3>
11    {% for p in paragraph %}
12    <p>{{ p }}</p>
13    {% endfor %}
14    
15    {% if pageType == 'about' %}
16    <p>Contact box thing is here</p>
17    {% else %}
18    <p>This is sample page.</p>
19    {% endif %}
20
21    
22    <div id={{ chartID|safe }} class="chart" style="height: 500px; width: 500px"></div>
23    <script>
24      var chart_id = {{ chartID|safe }}
25      var series = {{ series|safe }}
26      var title = {{ title|safe }}
27      var xAxis = {{ xAxis|safe }}
28      var yAxis = {{ yAxis|safe }}
29      var chart = {{ chart|safe }}
30    </script>
31    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
32    <script src="http://code.highcharts.com/highcharts.js"></script>
33    <script src="../static/graph.js"></script>
34
35  </body>  
36
37<nav class="navbar navbar-default" role="navigation">
38
39  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
40    <ul class="nav navbar-nav"></ul>
41     <form class="navbar-form navbar-left" role="search">
42      <div class="form-group">
43         <input type="text" class="form-control" placeholder="Date and Time">
44      </div>
45      <button type="submit" class="btn btn-default">Submit</button>
46     </form>
47    </div>
48  </div>
49</nav>
50
51</body>
52<script type = "text/javascript" src = "/static/bootstrap.min.js"></script>

そして、「static」に置いたgraph.jsは以下の通りです。

js
1$(document).ready(function() {
2	$(chart_id).highcharts({
3		chart: chart,
4		title: title,
5		xAxis: xAxis,
6		yAxis: yAxis,
7		series: series
8	});
9});

上記のapp.pyを実行して、「http://127.0.0.1:8080」にアクセスするとindex.htmlが表示されます。そして、app.pyの「def graph」中のseriesで入力したデータ「"data": [1,2,3]」がプロットされます。このseries中のデータを、(冒頭に申し上げた)実際の解析結果にCSVファイル内のデータにしていけば良いのだとは思うのですが、実装できずに困っております。

また、上記の「2」に関してですが、index.html中に、ユーザーが日付と時間の範囲を入力するためのフォームと送信ボタン2つ(始点用と終点用)を設置することはできたのですが、ここから先、どのようにコードを拡張していけば良いのかが分からず困っております。アドバイスいただけましたら幸甚です。

本システムは最終的にはLinuxサーバー(OSはFreeBSD)での運用を目指しております。私自身、このようなWebアプリ作成やサーバー運用の経験はなく、今回もその都度調べながら試行錯誤を繰り返しながら作業しております。的外れなことを申すこともあると思いますが、どうぞよろしくお願い申し上げます。

FiroProchainezo

2020/06/11 07:07

2の目処が立たないというのがどういう状況なのかよくわかりません。試したこと1が実行できるソースコード全文を提示いただくことは可能ですか？ orionM42さんのWebの知識はどの辺まである前提なのでしょうか？その辺の情報もいただけるとアドバイスしやすいかと思います。ちなみに、サーバはどうやって運用するか決まっていますか？(OSやHTTPサーバはなに？)

FiroProchainezo

2020/06/11 11:16

2時間ほど悩みましたが、質問部分だけを回答しても解決しないと思いますので、厳しい意見を記載します。 --- ソースを拝見しましたが、コピペコピペで無理矢理書いているように見受けました。意味がわからない記述が多くあり、記述が間違っている部分が多々あります。 HTMLの記述が酷いです。 Webページは複数の技術の集合体なので、1つ1つ勉強していってはいかがでしょうか。例えば、HTML/CSS/JavaScript/JavaScriptのライブラリ/Python/Flask/Http/Webサーバの様な順番で勉強するのが良いと思います。ソースを見た印象からサポートするとしたら、とても厳しく、1，2ヶ月で終わらないと思おうのですが、どうなさいますか？ CSVからデータをチャートにする方法がわからない、CSVデータを渡す方法がわからない、部分だけ伝えても伝わらないと思いますので・・・。もしも、業務命令で作成を指示されているなら、そして期限が指定されているなら、外注した方がいいと思います。

orionM42

2020/06/12 01:44

FiroProchainezo様ご検討いただきどうもありがとうございます。仰る通りで、htmlが浅学なため、コピー&ペーストばかりになってしまい、酷いことになっているのだと思います。今後のシステムのメンテナンスの必要もありますし、外注する予算もございませんので、教えていただいたような事項を勉強して出直すことに致します。また質問させていただくかもしれませんが、その折はどうぞよろしくお願い致します。

FiroProchainezo

2020/06/12 02:02

承知しました。勉強頑張ってください。基礎を学んだあとは、まず[index.html]だけでグラフ表示するところを作成するのが良いと思います。 FlaskやPython、graph.jsは不要です。 htmlに以下の記述があれば使用可能です。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script> 質問する場合には適切なタグ設定をお願いします。ひとまずクローズで良い場合は、自己回答などで質問を閉じてください。

orionM42

2020/06/12 02:28

FiroProchainezo様追加のコメントいただきどうもありがとうございます。参考にさせていただきます。では、ひとまずこれでクローズさせていただきます。どうもありがとうございました。