SQL(sqlite3)によってDBから取得した内容をhtmlに出力します。
テーブルから取得できる件数は、事前にはわからないため、
テンプレートとして使用するhtml側でループ処理を施す必要があります。
まずはgoファイルのSQL取得処理です。
type Candle struct {
Time time.Time
Open float64
...
}
type DataFrameCandle struct {
...
Candles []Candle `json:"candles"`
}
func GetAllCandle(tableName string) (*DataFrameCandle, error) {
cmd := fmt.Sprintf(`SELECT time, open1 FROM %s ORDER BY time DESC;`, tableName)
rows, err := DbConnection.Query(cmd)
defer rows.Close()
dfCandle := &DataFrameCandle{}
...
for rows.Next() {
var candle Candle
...
rows.Scan(&candle.Time, &candle.Open)
dfCandle.Candles = append(dfCandle.Candles, candle)
}
err = rows.Err()
if err != nil {
return nil, err
}
return dfCandle, nil
}
続いてgoファイルのサーバー起動処理です。
var templates = template.Must(template.ParseFiles("app/views/google.html"))
func viewChartHandler(w http.ResponseWriter, r *http.Request) {
df, _ := models.GetAllCandle("a-table")
err := templates.ExecuteTemplate(w, "google.html", df.Candles) // テンプレートに対してdf.Candles(型は[]Candle)を適用。スライスなのでhtml側でループ処理をする
if err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError)
}
}
func StartWebServer() error {
http.HandleFunc("/chart/", viewChartHandler)
return http.ListenAndServe(":8080", nil)
}
最後にhtmlファイル(同階層に作成したgoogle.html)です。
ループの対象を「range .」 「end」で囲みます。
<!-- google chartsのテンプレートを使用 -->
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
// ループの対象を「range .」 「end」で囲む
{{ range . }}
['{{.Time}}', {{.Low}}, {{.Open}}, {{.Close}}, {{.High}}], // google chartsの仕様。1つ目は横軸ラベルを文字列指定
{{ end}}
], true);
var options = {
legend:'none',
candlestick: {
fallingColor: { strokeWidth: 0, fill: '#a52714' },
risingColor: { strokeWidth: 0, fill: '#0f9d58' }
}
};
var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
htmlテンプレートでは、この他にも関数を実行したりできます。
blog.y-yuki.net