任天堂の株価をJSでグラフ化してみた

暇だったので株価データグラフ化してみた。
2016/07になにが起こったんだwポケモンGoか? f:id:surume_Reflection:20170212233729p:plain


<head>
  <title>任天堂株価</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>
</head>
<body>
  <script type="text/template" id="Nintendo_stock_price">
    [
       {  "日付" : "2017-01-04",  "始値" : "24540",  "高値" : "24545",  "安値" : "24330",  "終値" : "24480",  "出来高" : "1437600",  "終値調整値" : "24480"  },
       {  "日付" : "2017-01-05",  "始値" : "24555",  "高値" : "24840",  "安値" : "23875",  "終値" : "24085",  "出来高" : "2546200",  "終値調整値" : "24085"  },
       {  "日付" : "2017-01-06",  "始値" : "24000",  "高値" : "24215",  "安値" : "23920",  "終値" : "24050",  "出来高" : "1443500",  "終値調整値" : "24050"  },
       {  "日付" : "2017-01-10",  "始値" : "24490",  "高値" : "24530",  "安値" : "24185",  "終値" : "24370",  "出来高" : "1725900",  "終値調整値" : "24370"  },
       {  "日付" : "2017-01-11",  "始値" : "24650",  "高値" : "25350",  "安値" : "24580",  "終値" : "25145",  "出来高" : "3224400",  "終値調整値" : "25145"  },
       {  "日付" : "2017-01-12",  "始値" : "25300",  "高値" : "25410",  "安値" : "24700",  "終値" : "25200",  "出来高" : "2581800",  "終値調整値" : "25200"  },
       {  "日付" : "2017-01-13",  "始値" : "24900",  "高値" : "25085",  "安値" : "23620",  "終値" : "23750",  "出来高" : "7589200",  "終値調整値" : "23750"  },
       {  "日付" : "2017-01-16",  "始値" : "23300",  "高値" : "23450",  "安値" : "22905",  "終値" : "23200",  "出来高" : "3675600",  "終値調整値" : "23200"  },
       {  "日付" : "2017-01-17",  "始値" : "22945",  "高値" : "23795",  "安値" : "22945",  "終値" : "23585",  "出来高" : "3212300",  "終値調整値" : "23585"  },
       {  "日付" : "2017-01-18",  "始値" : "23515",  "高値" : "23705",  "安値" : "23155",  "終値" : "23465",  "出来高" : "2830200",  "終値調整値" : "23465"  },
       {  "日付" : "2017-01-19",  "始値" : "23285",  "高値" : "24095",  "安値" : "23050",  "終値" : "23800",  "出来高" : "3607900",  "終値調整値" : "23800"  },
       {  "日付" : "2017-01-20",  "始値" : "23815",  "高値" : "24130",  "安値" : "23540",  "終値" : "23630",  "出来高" : "2092400",  "終値調整値" : "23630"  },
       {  "日付" : "2017-01-23",  "始値" : "23520",  "高値" : "23700",  "安値" : "23280",  "終値" : "23510",  "出来高" : "1208300",  "終値調整値" : "23510"  },
       {  "日付" : "2017-01-24",  "始値" : "23440",  "高値" : "23570",  "安値" : "23250",  "終値" : "23265",  "出来高" : "1106800",  "終値調整値" : "23265"  },
       {  "日付" : "2017-01-25",  "始値" : "23500",  "高値" : "23655",  "安値" : "23280",  "終値" : "23595",  "出来高" : "1193100",  "終値調整値" : "23595"  },
       {  "日付" : "2017-01-26",  "始値" : "23600",  "高値" : "23710",  "安値" : "23455",  "終値" : "23570",  "出来高" : "1453300",  "終値調整値" : "23570"  },
       {  "日付" : "2017-01-27",  "始値" : "23630",  "高値" : "23630",  "安値" : "23405",  "終値" : "23490",  "出来高" : "836000",  "終値調整値" : "23490"  },
       {  "日付" : "2017-01-30",  "始値" : "23550",  "高値" : "23650",  "安値" : "23425",  "終値" : "23565",  "出来高" : "718700",  "終値調整値" : "23565"  },
       {  "日付" : "2017-01-31",  "始値" : "23230",  "高値" : "23510",  "安値" : "23100",  "終値" : "23120",  "出来高" : "1350200",  "終値調整値" : "23120"  },
       {  "日付" : "2017-02-01",  "始値" : "22500",  "高値" : "22720",  "安値" : "22005",  "終値" : "22625",  "出来高" : "3082600",  "終値調整値" : "22625"  },
       {  "日付" : "2017-02-02",  "始値" : "22815",  "高値" : "22965",  "安値" : "22450",  "終値" : "22520",  "出来高" : "1624500",  "終値調整値" : "22520"  },
       {  "日付" : "2017-02-03",  "始値" : "22845",  "高値" : "23975",  "安値" : "22820",  "終値" : "23945",  "出来高" : "3698300",  "終値調整値" : "23945"  },
       {  "日付" : "2017-02-06",  "始値" : "24000",  "高値" : "24160",  "安値" : "23570",  "終値" : "23735",  "出来高" : "1593200",  "終値調整値" : "23735"  },
       {  "日付" : "2017-02-07",  "始値" : "23360",  "高値" : "23560",  "安値" : "23200",  "終値" : "23230",  "出来高" : "1210000",  "終値調整値" : "23230"  },
       {  "日付" : "2017-02-08",  "始値" : "23330",  "高値" : "23425",  "安値" : "22905",  "終値" : "23260",  "出来高" : "1404700",  "終値調整値" : "23260"  },
       {  "日付" : "2017-02-09",  "始値" : "23230",  "高値" : "23690",  "安値" : "23050",  "終値" : "23405",  "出来高" : "1605200",  "終値調整値" : "23405"  },
       {  "日付" : "2017-02-10",  "始値" : "23650",  "高値" : "23730",  "安値" : "23355",  "終値" : "23645",  "出来高" : "1319100",  "終値調整値" : "23645"  }
    ]
  </script>
  <canvas id="stage"></canvas>

  <script>
  //データ取得と整形
  var nintendo_stock_price = JSON.parse(document.getElementById("Nintendo_stock_price").innerText);
  var date = nintendo_stock_price.map(function(value, index){
    return value['日付'];
  });
  var final_price = nintendo_stock_price.map(function(value, index){
    return value['終値'];
  });

  //グラフ表示
  var canvas = document.getElementById('stage');
  var mydata = {
    labels: date,
    datasets: [
      {
        label: '終値',
        backgroundColor: "rgba(99,170,170,0.3)",
        data: final_price,
      }
    ]
  };
  var chart = new Chart(canvas, {
    type: 'line',
    data: mydata,
    options: {
        title: {
          display: true,
          text: '任天堂株価チャート'
        }
    }
  });
  </script>
</body>

グラフ参考URL

www.webtoolnavi.com

Chart.js | Documentation

株価をjsonで取得するAPI

今回CSVから整形したので大変だった、調べたら↓があった

qiita.com