How to make the chart automatic ?

[yasin-is]

Hello,

I am generally a junior in the developer role. How do I make the chart in your library to automatically add a data and dataset everytime a month or year changes. Currently the sample chart in the website can only add data manually by using add data button.

[LeeLenaleee]

It will work in the same way but instead of binding it to a button you bind the update logic to the place where you get your new data

[yasin-is]

you mean bind this

name: 'Add Data',
  handler(chart) {
    const data = chart.data;
    if (data.datasets.length > 0) {
      data.labels = Utils.months({count: data.labels.length + 1});

      for (var index = 0; index < data.datasets.length; ++index) {
        data.datasets[index].data.push(Utils.rand(-100, 100));
      }

      chart.update();
    }
  }
},

into the javascript that i use to get the data using API ?

[LeeLenaleee]

yeah kind of so you will get something like this:

const chart = new Chart();

const updateChart = () => {
  // How you get your new data and labels might differ ofc
  const newData = fetchData();
  const newLabels = fetchLabels();
  
  for (var index = 0; index < chart.data.datasets.length; ++index) {
    chart.data.datasets[index].data.push(newData[i]);
    chart.data.labels.push(newLabels[i]);
  }
  
  chart.update();
}

[yasin-is]

initialize_SharepointList_DashboardPThree(){
  this.getSharePointList.setSharePointSite('im removing this due to security'); 
  this.getSharePointList.httpGetByName_forChart('this too removed')
  .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++
      }
    
    }

basically this is how i get the data. so i just bind the fetch data and fetch label into this or do i bind it into this part ?

this.myChart = new Chart("myChart", {
      type: 'line',
//or do i bind it into this data ? 
      data: {
          labels: ['October 2020', 'November 2020', 'December 2020', 'January 2021', 'February 2021', 'March 2021', 'April 2021', 'May 2021', 'June 2021'],
          datasets: [
            {
              label: 'Monthly SIR Submission',
              data: [this.October, this.November, this.December, this.January, this.February, this.March, this.April, this.May, this.June],
              borderColor: '#0000FF',
              backgroundColor: '#0000FF',
              //borderWidth: 1
              fill:false,
              tension: 0.1
            }
          ]
      },