데이터 가시화 (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