Help us understand the problem. What is going on with this article?

highcharts.js ( + flask)でcsvから綺麗なグラフを作る

More than 3 years have passed since last update.

There is a csv file

sample.csv
     Apple  Orange  Lemon
age
10代     23      53     14
20代     35      24      9
30代     24      13     10
40代      9       8      5
50代      3       2      2

csvファイルがあります。データに意味はありません。
これを良い感じにグラフにしたいとします。

highcharts

highchartsとはJavaScriptグラフライブラリです。これを使ってみようと思います。

index.html
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"
  crossorigin="anonymous"></script>
</head>
<body>
<h1>Graph Sample</h1>
<div id="graph" style="width:800px;height:300px;"></div>
</body>

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.5.0/introjs.min.css" rel="stylesheet">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.5.0/intro.min.js"></script>
<script>
function draw_basic_column_graph(data, categories, graph_ref){
    var option = {
        chart: {
            type: 'column'
        },
        title: {
            text: 'Graph Title'
        },
        xAxis: {
            categories: categories,
            crosshair: true
        },
        yAxis: {
            min: 0,
            title: {
                text: '人数'
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0;font-size:12px">{series.name}: </td>' +
                '<td style="padding:0;font-size:12px"><b>{point.y:.0f} 人</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        colors: ['#8085e9', '#f45b5b', '#8d4654', '#7798BF', '#aaeeee', '#ff0066', '#eeaaee',
      '#55BF3B', '#DF5353', '#7798BF', '#aaeeee'],
        series: data
    }
    $(graph_ref).highcharts('Chart', option);
}

$(document).ready(function(){
   $.ajax({
     url: '/graph',
     type: 'GET'
     }).done(function (data) {
        draw_basic_column_graph(
            data.series, data.categories, '#graph'
        );
   })
});
</script>

Flask

Flaskとは、pythonの軽量webフレームワークです。今回はこれを使って上記のcsvのデータをhighchartsに渡すことにします。
pipでインストール
$ pip install flask

process.py
def format_for_highcharts(df):
    """
    see https://www.highcharts.com/demo
    :param df: pd.DataFrame
    :return:
    """
    df.index = list(df.index.fillna('NODATA'))
    categories = list(df.columns.fillna('NODATA'))

    df = df.fillna(0)
    series = [{'name': index, 'data': list(map(int, row))} for index, row in df.iterrows()]
    return {'categories': categories, 'series': series}

flaskでサーバを立てます。

app.py
from flask import Flask, render_template
from flask import request, jsonify, url_for, redirect
from process import format_for_highcharts

app = Flask(__name__)
app.config['DEBUG'] = True

import pandas as pd


@app.route("/", methods=['GET'])
def index():
    return render_template('index.html')


@app.route("/graph", methods=['GET'])
def graph():
    df = pd.read_csv('sample.csv', index_col=0)
    return jsonify(format_for_highcharts(df))


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

起動します。
$ python app.py

http://127.0.0.1:5000/ を開くと以下のようなグラフが表示されるはずです。
スクリーンショット 2017-09-21 14.42.29.png

リアルタイムに項目をフィルタすることもできます。
スクリーンショット 2017-09-21 14.42.57.png


まあpythonなら普通にmatplotlibとか使えよという話なのですが、デザイン性のある/綺麗なグラフを作りたい時に使えるかもしれません。動きもカッコいいです。テーマは自由に設定でき、サンプルも用意されています。

GitHub
https://github.com/sumsum88/highcharts_demo

参考:
https://www.highcharts.com/demo

sumsum88
エンジニアでした。
http://hayatosum.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away