Chartjs-Chart.js d3js chart in time scale, data from CSV file

0👍

Okay i find the answer, had to convert the CSV into Arrays, and arrays into data structure:

<script>

      drawChart();
      async function drawChart(){
        const dataArray = await getData();
        const BTCdatapoints = dataArray.DATEdata.map((day,index) => {
          let dayObject = {};
          dayObject.x = dataArray.DATEdata[index];
          dayObject.y = dataArray.BTCdata[index];
          return dayObject
        })
        const VETdatapoints = dataArray.DATEdata.map((day,index) => {
          let dayObject = {};
          dayObject.x = dataArray.DATEdata[index];
          dayObject.y = dataArray.VETdata[index];
          return dayObject
        })

        const TOTALdatapoints = dataArray.DATEdata.map((day,index) => {
          let dayObject = {};
          dayObject.x = dataArray.DATEdata[index];
          dayObject.y = dataArray.TOTALData[index];
          return dayObject
        })

        const data = {datasets: [{
                  label: 'BTCUSDT',
                  data: BTCdatapoints
                  }, {
                  type: 'bar',
                  label: 'VETUSDT',
                  data: VETdatapoints
                }, {
                  type: 'line',
                  label: 'TOTAL',
                  data: TOTALdatapoints
                }]
            }

            const config = {
              type: 'bar',
              data,
              options: {
                scales: {
                  x: {
                    type: "time",
                    time: {
                      unit: "day"
                      }
                  },
                  y:{
                    beginAtZero : true
                  }
                }
              }
          };

          const myChart = new Chart(
            document.getElementById("myChart"),
            config
          );
        };

        async function getData() {
          const DATEdata = [];
          const BTCdata = [];
          const VETdata = [];
          const TOTALData = [];
          const url ='example.csv';
          const response = await fetch(url);
          const tabledata = await response.text();
          const table = tabledata.split('\r\n').splice(1);
          table.forEach(row =>{
            const column = row.split(',');
            const date = column[0];
            const BTC = column[1];
            const VET = column[2];
            const TOTAL = column[3];
            DATEdata.push(date);
            BTCdata.push(BTC);
            VETdata.push(VET);
            TOTALData.push(TOTAL);
          });         
          return {DATEdata,BTCdata,VETdata,TOTALData};
        }

    </script>

JS SRC:

<script src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/papaparse@5.3.2/papaparse.min.js"></script>

Leave a comment