Notice
Recent Posts
Recent Comments
Link
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Tags more
Archives
Today
Total
관리 메뉴

HAMA 블로그

Plotly 말고 Bokeh 도 있다. 본문

데이터 가시화 (d3.js , Plotly, Grafana, Kibana 등)

Plotly 말고 Bokeh 도 있다.

[하마] 이승현 (wowlsh93@gmail.com) 2017. 6. 1. 11:23

http://bokeh.pydata.org/en/latest/


Plotly 에 적당한 예제가 없다면, Bokeh 를 알아보자. 둘 다 간단히 python 으로 사용 할 수 있다. 
( 물론 커스터마이징 해서 쓰려면 골치 아프다~~ 직접 만들어 보지 않은 사람에겐 쉬워 보이겠지만)


근데 사실 plotly 나 Bokeh 나 단지 로컬에서 차트를 보는게 목적이라면 matplotlib 를 사용하는게 나을지도 모른다. 하지만 웹에서 서비스 하고 싶을 경우는 즉 Flask 를 이용해서 서버를 구축하고 서버측에서 차트를 Bokek 나 plotly 로 만들어서 HTML 페이지에 임베드 해서 보여주고 싶을 수 있는데 이런 경우를 잠시 알아보자.

(아래는 bokeh 지만 plotly 도 물론 가능하다) 


Rendering Bokeh plots in Flask


 app.py 코드이다. 

import flask

from bokeh.embed import components
from bokeh.plotting import figure
from bokeh.resources import INLINE
from bokeh.util.string import encode_utf8

app = flask.Flask(__name__)

colors = {
    'Black': '#000000',
    'Red':   '#FF0000',
    'Green': '#00FF00',
    'Blue':  '#0000FF',
}

def getitem(obj, item, default):
    if item not in obj:
        return default
    else:
        return obj[item]

@app.route("/")
def polynomial():
    """ Very simple embedding of a polynomial chart
    """

    # Grab the inputs arguments from the URL
    args = flask.request.args

    # Get all the form arguments in the url with defaults
    color = colors[getitem(args, 'color', 'Black')]
    _from = int(getitem(args, '_from', 0))
    to = int(getitem(args, 'to', 10))

    # Create a polynomial line graph with those arguments
    x = list(range(_from, to + 1))
    fig = figure(title="Polynomial")
    fig.line(x, [i ** 2 for i in x], color=color, line_width=2)

    js_resources = INLINE.render_js()
    css_resources = INLINE.render_css()

    script, div = components(fig)
    html = flask.render_template(
        'index.html',
        plot_script=script,
        plot_div=div,
        js_resources=js_resources,
        css_resources=css_resources,
        color=color,
        _from=_from,
        to=to
    )
    return encode_utf8(html)

if __name__ == "__main__":
    print(__doc__)
    app.run()


- index.html 템플릿을 통해 랜더링 한후에 UTF8 로 인코딩하여 바로 쏴주고 있다.
- 주요 차트 소스는 plot_div 에 div 로 넣어주고 있으며 
- script 소스 와 js,css 리소스도 넣어 주고 있다.


html 템플릿이다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset='utf-8' />
    <meta http-equiv='content-type' content='text/html; charset=utf-8' />

    <title>Embed Demo</title>

    {{ js_resources|indent(4)|safe }}

    {{ css_resources|indent(4)|safe }}

    {{ plot_script|indent(4)|safe }}

  </head>
  <body>
    <!-- A simple form for changing the graph -->
    <p> Select your settings: </p>
    <form name="color_button" method='GET'>
        Color:
        <select name="color">
            <option value="Red">Red</option>
            <option value="Green">Green</option>
            <option value="Blue">Blue</option>
            <option selected="selected" value="Black">Black</option>
        </select>
        <br>
        From:
        <input type="text" name="_from" value="{{ _from }}">
        <br>
        To:
        <input type="text" name="to" value="{{ to }}">
        <br>
        <button type="submit">Submit</button>
    </form>
    {{ plot_div|indent(4)|safe }}
    <p> Demonstrates some very simple embedding into a webpage</p>
  </body>
</html>


자세한 코드와 레퍼런스는 아래를 참고하시라~

https://github.com/realpython/flask-bokeh-example

https://github.com/rpazyaquian/bokeh-flask-tutorial/wiki/Rendering-Bokeh-plots-in-Flask



저작자표시 비영리 동일조건

'데이터 가시화 (d3.js , Plotly, Grafana, Kibana 등)' 카테고리의 다른 글

Plotly 랑 Bokeh 공부하기 귀찮다. 그냥 matplotlib 를 사용해서 웹서비스하자.  (0) 2017.06.12
그라파나 (Grafana) 플러그인 추가하기  (0) 2017.06.08
Plotly 를 쥬피터노트북에서 사용하기  (0) 2017.03.22
Plotly 와 파이썬을 이용해서 모던한 차트 만들기  (0) 2017.03.22
시계열 데이터 스토어로서의 Elasticsearch ??  (0) 2017.03.21
'데이터 가시화 (d3.js , Plotly, Grafana, Kibana 등)' Related Articles more
Comments