質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.82%

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

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 466

orionM42

score 0

前提・実現したいこと

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

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

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

2020-06-11 09:01:10, 2.7569980694980693e-10
2020-06-11 09:01:17, 3.191361003861004e-10
2020-06-11 09:01:24, -5.7878861003861e-11
2020-06-11 09:01:30, 9.338803088803089e-10
2020-06-11 09:01:37, -1.7326254826254826e-11
...

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

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

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

この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は以下の通りです。

from flask import Flask, render_template
from flask import request, jsonify, url_for, redirect
from process import format_for_highcharts
import pandas as pd

# ref. https://pythonprogramming.net/adding-js-plugins-flask-highcharts-example/

app = Flask(__name__)

@app.route('/')
def graph(chartID = 'chart_ID', chart_type = 'line', chart_height=500):
    chart = {"renderTo": chartID, "type": chart_type, "height": chart_height,}
    series = [{"name": 'Label1', "data": [1,2,3]}, {"name": 'Label2', "data": [4, 5, 6]}]
    title = {"text": 'Sample data'}
    xAxis = {"categories": ['xAxis Data1', 'xAxis Data2', 'xAxis Data3']}
    yAxis = {"title": {"text": 'yAxis Label'}}

    return render_template('index.html', chartID=chartID, chart=chart, series=series, title=title, xAxis=xAxis, yAxis=yAxis)

if __name__ == "__main__":
    app.run(debug=True, host='127.0.0.1', port=8080, passthrough_errors=True)

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

<html>
<link rel="stylesheet" media="screen" href = "{{ url_for('static', filename='bootstrap.min.css') }}">
<meta name="viewport" content = "width=device-width, initial-scale=1.0">
<head>
</head>

<body class = "body">

  <body>
    <h3>{{ title }}</h3>
    {% for p in paragraph %}
    <p>{{ p }}</p>
    {% endfor %}

    {% if pageType == 'about' %}
    <p>Contact box thing is here</p>
    {% else %}
    <p>This is sample page.</p>
    {% endif %}


    <div id={{ chartID|safe }} class="chart" style="height: 500px; width: 500px"></div>
    <script>
      var chart_id = {{ chartID|safe }}
      var series = {{ series|safe }}
      var title = {{ title|safe }}
      var xAxis = {{ xAxis|safe }}
      var yAxis = {{ yAxis|safe }}
      var chart = {{ chart|safe }}
    </script>
    <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>
    <script src="../static/graph.js"></script>

  </body>  

<nav class="navbar navbar-default" role="navigation">

  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav"></ul>
     <form class="navbar-form navbar-left" role="search">
      <div class="form-group">
         <input type="text" class="form-control" placeholder="Date and Time">
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
     </form>
    </div>
  </div>
</nav>

</body>
<script type = "text/javascript" src = "/static/bootstrap.min.js"></script>

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

$(document).ready(function() {
    $(chart_id).highcharts({
        chart: chart,
        title: title,
        xAxis: xAxis,
        yAxis: yAxis,
        series: series
    });
});

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • orionM42

    2020/06/12 10:44

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

    キャンセル

  • FiroProchainezo

    2020/06/12 11: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 11:28

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

    キャンセル

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.82%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る