雑にFlask×chart.js - ツタンラーメンの忘備録

簡単と標ぼうされるものをかけ合わせて簡単に簡単に動かしたいときにコードを書いた
f:id:hungrykirby:20170521164836g:plain

基本的には
Flask and great looking charts using Chart.js – Python Tutorial
を参照したんだけど、当然のようにそのままだと動かないので、編集した。

graph.html

{% extends "layout.html" %}
{% block content %}
  <!-- Form
  ================================================== -->
<div class="form">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <canvas id="chart" width="600" height="400"></canvas>

      </div>
    </div>
  </div>
</div>
<script>
var barData = {
  labels : [{% for item in labels %}
            "{{item}}",
        {% endfor %}],
  datasets : [{
    label: 'Sample',
    backgroundColor: 'rgba(255, 99, 132, 0.2)',
    borderColor: 'rgba(255,99,132,1)',
    borderWidth:10,
    data : [{% for item in values %}
                  {{item}},
                {% endfor %}]
  }]
}
var mychart = document.getElementById("chart");
var chart = new Chart(mychart, {
  type:'bar',
  data:barData
});
</script>
{% endblock %}

メインのpythonコード、昔別のところで使っていたコードなんだけど、変える必要もないのでそのまま使った。(かなり雑である)

app.py

import os

from flask_sqlalchemy import SQLAlchemy

from datetime import datetime
import time

from flask import Flask, render_template, request, redirect, url_for
import numpy as np

app = Flask(__name__)

def picked_up():
    messages = [
        "こんにちは、あなたの名前を入力してください",
        "やあ！お名前は何ですか？",
        "あなたの名前を教えてね"
    ]
    return np.random.choice(messages)[f:id:hungrykirby:20170521164836g:plain][f:id:hungrykirby:20170521164836g:plain]

@app.route('/')
def index():
    title = "ようこそ"
    message = picked_up()
    return render_template('index.html',
                           message=message, title=title)

@app.route('/post', methods=['GET', 'POST'])
def post():
    title = "こんにちは"
    if request.method == 'POST':
        name = request.form['name']
        return render_template('post.html',
                               name=name, title=title)
    else:
        return redirect(url_for('index'))

@app.route('/display', methods=['GET', 'POST'])
def diplay():
    titile = "You can see your graph"
    if request.method == 'POST':
        labels = ["January","February","March","April","May","June","July","August"]
        values = [10,9,8,7,6,4,7,8]
        return render_template('graph.html', values=values, labels=labels)
    else:
        return "Error"


if __name__ == '__main__':
    app.run()

で

layout.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    {% if title %}
      <title>{{ title }}</title>
    {% else %}
      <title>Bootstrap 101 Template</title>
    {% endif %}
    <!-- Bootstrap -->
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <script src="/static/js/Chart.min.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    {% block content %}{% endblock %}
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="/static/js/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="/static/js/bootstrap.min.js"></script>
  </body>
</html>

jQuery、bootstrapは適時使ってください。これもどこかのコピペ。

これで動く。あとで成形したいけど、備忘録なので次描くときでいいか。