๐ ํ์ด์ฌ (Python)/-- ํ๋ผ์คํฌ (Flask)
CSV ํ์ผ ์ฝ์ด๋ค์ฌ์ highcharts + Flask ๊ทธ๋ํ ๊ตฌํํ๊ธฐ.
- -
Interactive JavaScript charts for your webpage | Highcharts
"I absolutely LOVE Highcharts & maps, very cool! We use it for a web metrics dashboard, which is shared with internal marketing stakeholders. The tool is brilliant and the API documentation is super-helpful. I set up some basic, manual reports using Highch
www.highcharts.com
Flask์ ์ค์๊ฐ ๊ทธ๋ํ๋ฅผ ๊ตฌํํด๋ณด๊ณ ์ถ์ด์, Highcahrts๋ผ๋ ํ๋ ์์ํฌ๋ฅผ ์ฌ์ฉํ์ต๋๋ค.
*ํ์ผ ๊ตฌ์ฑ
app.py (Flask run server ํ์ผ)
csv-to-sqlite.py (csv๋ฅผ sqlite DB์ ์ ์ฅํ )
db.sqlite(DBํ์ผ)
data.csv(์๊ฐํํ ๋ฐ์ดํฐ๊ฐ ๋ค์ด์๋ ํ์ผ)
graph.html(htmlํ์ผ)
static ํ์ผ๋ค(๊ทธ๋ํ๋ฅผ ๊ตฌํํด์ค JS ํ์ผ)
* CSV ํ์ผ ์์ฑํ๊ธฐ.
์ ๋ ฅํ ๋ฐ์ดํฐ๊ฐ ๋ค์ด์๋ ํ์ผ์ ๋๋ค. [timestamp , value] ๋๊ฐ์ง ์ด(column)๋ก ๊ตฌ์ฑ๋ฉ๋๋ค.
1388534400,5
1390040000,3
1390043600,9
1390047000,1
1390050000,3
1390055000,5*CSV ๋ฐ์ดํฐ sqlite DB์ ์ ์ฅํ๊ธฐ.
import csv, sqlite3
conn = sqlite3.connect("db_6.sqlite") # ์ ์ฅํ DBํ์ผ ์ด๋ฆ
curs = conn.cursor()
curs.execute("CREATE TABLE measures (timestamp INTEGER, measure INTEGER)")
#TABLE : measures , ์ปฌ๋ผ์ด๋ฆ : (timestamp , measure)
reader = csv.reader(open('data_1.csv', 'r')) # CSVํ์ผ ์ฝ๊ธฐ๋ชจ๋๋ก ์ด๊ธฐ
for row in reader: #for ๋ฐ๋ณต๋ฌธ์ ํตํ์ฌ DB์ ์์ฑ
to_db = [(row[0]), (row[1])]
curs.execute("INSERT INTO measures (timestamp, measure) VALUES (?, ?);", to_db)
conn.commit() #์ปค๋ฐ (์์๋ ๋ช
๋ น ์คํ)
conn.close()
์ด์ ๊ทธ๋ํ๋ฅผ ๋ง๋ค ๋ฐ์ดํฐ๋ฅผ SQLite์ ์ ์ฅํ์ต๋๋ค. ์ฌ๊ธฐ๊น์ง ์ ๋์๋์ง DBํ์ผ์ ํ๋ฒ ํ์ธํด๋ณด๊ฒ ์ต๋๋ค.
์ ๋ค์ด๊ฐ์ต๋๋ค.
*HTMLํ์ผ
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highstock Example</title>
<script src="{{ url_for('static', filename='jquery-1.8.3.min.js') }}"></script>
<script type="text/javascript">
$(function () {
$.getJSON('http://127.0.0.1:5000/data.json', function (data) {
// Create the chart
$('#container').highcharts('StockChart', {
rangeSelector : {
selected : 1
},
title : {
text : 'My Sensor'
},
series : [{
name : 'Value',
data : data,
tooltip: {
valueDecimals: 2
}
}]
});
});
});
</script>
</head>
<body>
<script src="{{ url_for('static', filename='highstock.js') }}"></script>
<script src="{{ url_for('static', filename='highcharts-more.js') }}"></script>
<script src="{{ url_for('static', filename='exporting.js') }}"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>*app.py ํ์ผ
from flask import Flask, render_template, request
import sqlite3
import json
app = Flask(__name__)
@app.route("/data.json")
def data():
connection = sqlite3.connect("db_6.sqlite")
cursor = connection.cursor()
cursor.execute("SELECT 1000*timestamp, measure from measures")
results = cursor.fetchall()
return json.dumps(results)
@app.route("/graph")
def graph():
return render_template('graph.html')
if __name__ == '__main__':
app.run(debug=True, host='127.0.0.1', port=5000)
*Static ํ์ผ๋ค
https://www.fontenay-ronan.fr/dynamic-charts-with-highcharts-sqlite-and-python/
Dynamic charts with Highcharts, SQLite and Python – Ronan's blog
I used to use a Raspberry Pi as a data logger for many sensors, here is how I create a nice front-end for data visualization. - Store data : SQLite - Serve content : Python with Flask - Plot data : Hightcharts / Highstock 1 Database 1.1 Create database A q
www.fontenay-ronan.fr
(์ฐธ๊ณ ํ ๋ธ๋ก๊ทธ์ ๋๋ค.)
'๐ ํ์ด์ฌ (Python) > -- ํ๋ผ์คํฌ (Flask)' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
Contents
์์คํ ๊ณต๊ฐ ๊ฐ์ฌํฉ๋๋ค