Chartjs-Pushing data from angular typescript to chart.js library complication

by

0👍

✅

I found an answer. i need to write the code within the subscribe in order for me to reuse the data that i have manipulate for the chart.js

this is the answer on how to make it work:

.subscribe((dataChart) => {

    for (const e of dataChart) {
    var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
    var str=e.strRequestDate;   //Set the string in the proper format(best to use ISO format ie YYYY-MM-DD or YYYY-MM-DDTHH:MM:SS)
    var d=new Date(str);  //converts the string into date object
    // console.log(d)
    var m=d.getMonth(); //get the value of month
    //console.log(monthNames[m]) // Print the month name
    
      if (monthNames[m] === "January"){
        this.January++
      }

      if (monthNames[m] === "February"){
        this.February++
      }

      if (monthNames[m] === "March"){
        this.March++
      }

      if (monthNames[m] === "April"){
        this.April++
      }

      if (monthNames[m] === "May"){
        this.May++
      }

      if (monthNames[m] === "June"){
        this.June++
      }

      if (monthNames[m] === "July"){
        this.July++
      }

      if (monthNames[m] === "August"){
        this.August++
      }

      if (monthNames[m] === "September"){
        this.September++
      }

      if (monthNames[m] === "October"){
        this.October++
      }

      if (monthNames[m] === "November"){
        this.November++
      }

      if (monthNames[m] === "December"){
        this.December++
      }
    
    }
    
    var myChart = new Chart("myChart", {
      type: 'line',
      data: {
          labels: ['October 2020', 'November 2020', 'December 2020', 'January 2021', 'February 2021', 'March 2021'],
          datasets: [{
              label: 'Monthly Record of IT SIR Request',
              data: [this.October, this.November, this.December, this.January, this.February, this.March],
              backgroundColor: [
                   'rgba(255, 99, 132, 0.2)',
                   'rgba(54, 162, 235, 0.2)',
                   'rgba(255, 206, 86, 0.2)',
                   'rgba(75, 192, 192, 0.2)',
                   'rgba(153, 102, 255, 0.2)',
                  'rgba(255, 159, 64, 0.2)',
                  'rgba(153, 0, 153, 0.2)',
                  'rgba(102, 255, 153, 0.2)',
                  'rgba(255, 51, 0, 0.2)',
                  'rgba(204, 0, 204, 0.2)',
                  'rgba(0, 0, 255, 0.2)',
                  'rgba(0, 153, 153, 0.2)'
              ],
              borderColor: [
                   'rgba(255, 99, 132, 1)',
                   'rgba(54, 162, 235, 1)',
                   'rgba(255, 206, 86, 1)',
                   'rgba(75, 192, 192, 1)',
                   'rgba(153, 102, 255, 1)',
                   'rgba(255, 159, 64, 1)',
                  'rgba(153, 0, 153, 1)',
                  'rgba(102, 255, 153, 1)',
                  'rgba(255, 51, 0, 1)',
                  'rgba(204, 0, 204, 1)',
                  'rgba(0, 0, 255, 1)',
                  'rgba(0, 153, 153, 1)'
              ],
              borderWidth: 1
          }]
      },
      options: {
          scales: {
              yAxes: [{
                  ticks: {
                      beginAtZero: true
                  }
              }]
          }
      }

  })

    },

Leave a comment