前提・実現したいこと
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アプリ作成やサーバー運用の経験はなく、今回もその都度調べながら試行錯誤を繰り返しながら作業しております。的外れなことを申すこともあると思いますが、どうぞよろしくお願い申し上げます。
あなたの回答
tips
プレビュー