実験_株価推移

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js">
</script>

<div style="width:80%">
  <canvas id="canvas"></canvas>                        
</div>

<script>

  let DATE = [];
  let PRICE = [];
  let DATEvsPRICE = [];
  let csvPath = '********/data_stock.csv'
  let req = new XMLHttpRequest();

  req.open('get', csvPath, true);
  req.send(null);
  req.onload = function() { 
    makeGraphData();
    drawGraph();

    function makeGraphData() {
      let reqArray = req.responseText.split('\n');  
      reqArray.forEach((element) => { 
        let 行データ = element.split(',')
        let index_DATE = reqArray[0].split(',').indexOf('DATE');
        let index_PRICE = reqArray[0].split(',').indexOf('PRICE');

        if(行データ[index_DATE] !== undefined) {
          DATE.push(Number(行データ[index_DATE]));
        };
        if(行データ[index_PRICE] !== undefined) {
          PRICE.push(Number(行データ[index_PRICE]));
        };
      });
      removeHeader()
      makeXyData()

      function removeHeader() {
        DATE.shift();
        PRICE.shift();
      };

      function makeXyData() { 
        for (let i = 0; i < DATE.length; i++) {
          DATEvsPRICE[i] = {x: DATE[i], y: PRICE[i]};
        };
      };

    };

    function drawGraph() {
      let ctx = document.getElementById('canvas').getContext('2d');
      let グラフ = new Chart(ctx, {
        type: 'scatter',
        data: Gragh_Data,
        options: Gragh_Options
      });
    };

  };

  var Gragh_Data = {
    datasets:[
        {
          label: "PRICE",
          borderColor     : "rgba(255,100,133,0.7)",
          backgroundColor : "rgba(255,100,133,0.5)",
          fill: false,                      // 横軸から線の間の色付けをしない
          showLine: true,                   // 線を描画する
          lineTension: 0,                   // スムージングしない
          pointRadius: 3,
          data: DATEvsPRICE
        },
    ]
  };

  var Gragh_Options = {
    responsive: true,
      scales: {
        xAxes: [
          {
            scaleLabel: {
              display: true,
              labelString: 'DATE'
            }
          }
        ],
        yAxes: [
          {
            scaleLabel: {
              display: true,
              labelString: 'PRICE'
            }
          }
        ]
      }
  };

</script>