[Vuejs]-Display chart in vuejs?

0👍

All of your code looks correct. It looks like your final step is to set the data from your API into your graph:

created() {
   axios
      .get("/project/api/user")
      .then((res) => {
        this.data = res.data.datasets[0].data
}

same in your changevalue() method:

changevalue() {
     axios
      .get("/project/api/user", {
        params: {
          startDate: this.startDate,
          endDate: this.endDate
       } 
      })
      .then((res) => {
        this.data = res.data.datasets[0].data
      })
 }

0👍

I have done this problem..I want to share with you.Can help you newbies like me :

data() {
  return {
    startDate: '',
    endDate: '',
    loaded: false,
    data: {
          labels: null,
          datasets: null,
        },
   options: {
     title: {
       display: true,
       text: 'Report user'
     },
     }
    },
    created() {
       this.loaded = false;
       axios
          .get("/project/api/user")
          .then((res) => {
            console.log(res.data); //Result {"datasets":[{"label":"User active","data":[10,0,0,0,0,0,0,0],"fill":false,"borderColor":"#9ec6cb"}],"labels":["2021-09-07","2021-09-08","2021-09-09","2021-09-10","2021-09-11","2021-09-12","2021-09-13","2021-09-14"]};

          //handle code
          var result = JSON.parse(res.data);
          this.data.labels = result.labels;
          this.data.datasets = result.datasets;
          this.loaded = true;
          })
    },
    methods: {
       changevalue() {
         this.loaded = false;
         axios
          .get("/project/api/user", {
            params: {
              startDate: this.startDate,
              endDate: this.endDate
           } 
          })
          .then((res) => {
            var result = JSON.parse(res.data);
            this.data.labels = result.labels;
            this.data.datasets = result.datasets;
            this.loaded = true
          })
     }
    }





<chartjs-component-line-chart
      v-if="loaded"
      :data="data"
      :options="options"
      :plugins="plugins"
    />

Document : enter link description here

Leave a comment