Expenses Chart Using Chart.js

Community feedback

• 

  Nneoma Njoku•1,210

  @SatellitePeacePosted about 2 years ago

  Hello Igor Šešlak

  -in order to get the date from the json file and render them in your chart, your need to get them by using HttpRequest, fetch, or async/await

  -Example using httpRequest

  const xhr = new  XMLHttpRequest();
  
  const url = "data.json"
  
  xhr.open(''GET", url, true)
  
  xhr.send()
  
  xhr.onreadystatechange= function(){
  if(this.readystate == 4 && this.status == 400){
  
  const data = JSON.parse(this.responseText)
  
  const day = data.map((singleDay)=>{
  return singleDay.day
  })
  
  const amount =data.map((myPrice)=>{
  return myPrice.day
  })
  
  const myChart = new Chart(ctx, {
    type: "bar",
    data: {
      labels: ["mon", "tue", "wed", "thu", "fri", "sat", "sun"], // REPLACE THIS WITH  day
      datasets: [
        {
          data: [17.45, 34.91, 52.36, 31.07, 23.39, 43.28, 25.48],// REPLACE THIS WITH amount
          backgroundColor: backgroundArr,
          hoverBackgroundColor: hoverBackgroudArr,
    
        },
      ],
    },
  // continuation of Chart.js script goes here
  }
  }
  

  -i hope this helps

  1