株価チャートのWEB表示

NK225チャート

作成したスプレッドシートをもとに、このサイトのトップページにチャートを表示したいと思います

以下サイトを参考にさせていただきました

Charts  |  Google for Developers
ブラウザやモバイル デバイス向けのインタラクティブなグラフを追加するためのリソースをご紹介します。
Google Chartsを利用してWebサイト上でGoogleスプレッドシートのデータからグラフを作成する方法 | Web-saku
Googleスプレッドシート(Google Spreadsheets)内にあるデータをGoogle Chartsを利用してWebページ上でグラフ化する方法について、具体的な記述例も交えながら紹介していきます。

2022/01/04から最新の日経平均終値データまで折れ線グラフで表示します

コードはこんな感じです

<body>
  <div id="myLineChart"></div>

  <script src="https://www.gstatic.com/charts/loader.js"></script>
  <script>
    google.charts.load('current', {packages: ['corechart', 'line']});
    google.charts.setOnLoadCallback(drawChart);

google.charts.setOnLoadCallback(drawLineColors);

    function drawChart() {
      var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1hg_uGFX-gw5eJ6UucLUfy-dY9lU29r4ocnVZzAIAPEI/gviz/tq?range=A18053:E');
      query.send(handleQueryResponse);
    };
    
    function handleQueryResponse(response) {
      var data = response.getDataTable();

var options = {
  title: 'NK225',
  width: 800,
  height: 500,
  legend: 'right' // デフォルトの設定
};


      var chart = new google.visualization.LineChart(document.getElementById('myLineChart'));
      chart.draw(data, options);
    }
  </script>
</body>

表示するとこんな感じ

凡例が表示されない不思議がありますが、そこはちょっと目を瞑ってこの後もう少し改良できないか試してみます

コメント

タイトルとURLをコピーしました