前回の記事で作ったプログラムを進化させます。
やりたい事
前回は一つの銘柄に絞ってデータを表示させましたが、今回はテキストボックスに入力した銘柄コードを元に、
チャートを表示する機能を作成したいと思います。
HOW TO DO
<body>
<input id="stockcode" type="text" value="">
<input id="btn" value="SHOW CHART" type="button" onclick="showChart()">
<div id="chart_div" style="width: 1500px; height: 500px;"></div>
</body>
htmlにテキストボックスとボタンを用意します。
function send () {
$.ajax({
url: "/getdata/",
type: 'post',
data: {
cd: $('#stockcode').val()
},
dataType: 'json'
}).done(function (data) {
var priceData = []
for (let i = 0; i < data.price.length; i++) {
var array = data.price[i]
priceData.push([array.time, array.low, array.open, array.close, array.high ])
}
var chartData = google.visualization.arrayToDataTable(priceData, true);
var options = {
legend:'none',
candlestick: {
fallingColor: { strokeWidth: 0, fill: "#1451a5" },
risingColor: { strokeWidth: 0, fill: '#a52714' }
},
};
var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
chart.draw(chartData, options);
})
}
function showChart() {
send()
}
webserver.go
func getDataHandler(w http.ResponseWriter, r *http.Request) {
cd := r.FormValue("cd")
df, _ := models.GetData(cd)
json.NewEncoder(w).Encode(df)
}
func StartWebServer() error {
http.HandleFunc("/data/", dataHandler)
http.HandleFunc("/getdata/", getDataHandler)
return http.ListenAndServe(":8080", nil)
}
ボタンを押したら、ajaxでデータを取ってきたいので、getdataハンドラを一つ追加します。
ajaxでcd(銘柄コード)をwebserver.goにパラメータとして渡し、r.FormValue("cd")で受け取ります。
後は、GetData()で取得したデータ(df)を
Json形式に変換して(json.NewEncoder(w).Encode(df))返してあげるだけです。
結果
無事、取得できました。
