前回の記事で作ったプログラムを進化させます。

やりたい事

前回は一つの銘柄に絞ってデータを表示させましたが、今回はテキストボックスに入力した銘柄コードを元に、
チャートを表示する機能を作成したいと思います。

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))返してあげるだけです。

結果

無事、取得できました。