Vuejs: Display data instead of default data in chart?


I am doing chart display in vuejs. And am having some data display problems.

data() {
    return {
      endDate: "",
      startDate: "",

      data: {
     labels: [1975, 1980, 1985, 1990, 1995, 2000, 2005, 2010, 2015, 2020],
     datasets: [{
       data: [70, 95, 100, 120, 257, 271, 300, 321, 383, 450],
       label: 'Iphone',
       borderColor: '#3e95cd'
     }, {
       data: [70, 80, 111, 129, 135, 209, 247, 372, 400, 426],
       label: 'Samsung',
       borderColor: '#8e5ea2'
     }, {
       data: [70, 78, 128, 150, 203, 276, 300, 317, 375, 434],
       label: 'Xiaomi',
       borderColor: '#3cba9f'
     }
     ]
   },
   options: {
     title: {
       display: true,
       text: 'report product'
     },
     responsive: true,
     maintainAspectRatio: false
   }
    };
  },
  created() {
    const productId = this.$route.params.id;
    axios
      .get("/project/api/product/" + productId)
      .then((res) => {
        console.log(res.data) // I want to update instead of data in data(). result {"datasets":[{"label":"Samsung","data":[10,0,0,0,0,0,0,0],"fill":false,"borderColor":"#9ec6cb","lineTension":0.5,"pointRadius":1,"pointHoverRadius":5,"pointHoverBorderWidth":5,"pointStyle":"circle"},],"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"]};
      })
      .catch((error) => {
        console.log(error);
      });
  },
methods: {
   submitChart() {
       const productId = this.$route.params.id;
    axios
      .get("/project/api/product/" + productId, {
          params: {
          startDate: this.startDate,
          endDate: this.endDate,
        },
      })
      .then((res) => {
          console.log(res.data) // I want to update instead of data in data()
      })
      .catch((error) => {
        console.log(error);
      });
}
},

Template :

         // select date
         <b-row>
          <b-col cols="12" md="4" class="mb-md-0 mb-2">
            <b-form-group>
              <label>Start date:</label>
              <b-form-datepicker
                v-model="startDate"
                :value="startDate"
                reset-button
                class="d-inline-block"
                locale="vi"
                :date-format-options="{
                  day: '2-digit',
                  month: '2-digit',
                  year: 'numeric',
                }"
              />
            </b-form-group>
          </b-col>
          <b-col cols="12" md="4" class="mb-md-0 mb-2">
            <b-form-group>
              <label>End date:</label>
              <b-form-datepicker
                v-model="endDate"
                :value="endDate"
                reset-button
                class="d-inline-block"
                locale="vi"
                :date-format-options="{
                  day: '2-digit',
                  month: '2-digit',
                  year: 'numeric',
                }"
              />
            </b-form-group>
          </b-col>
          <b-col cols="12" md="2" class="mb-md-0 mb-2">
            <b-form-group class="mt-2">
              <b-button
                variant="primary"
                class="btn-tour-finish"
                @click="submitChart"
              >
                <span class="mr-25 align-middle">Submit</span>
                <feather-icon icon="CheckIcon" size="12" />
              </b-button>
            </b-form-group>
          </b-col>
        </b-row>


      // chart 
      <b-card-body>
        <chartjs-component-line-chart
          :height="400"
          :data="data"
          :options="options"
          :plugins="plugins"
        />
      </b-card-body>
  1. Now I want when the page loads, passing res.data in created() will replace the default data in data() .
  2. The data of res.data above I am leaving the default as 7 days.. Now I want to select dateFrom and dateTo and click submit, it will update the chart data.

Give me any ideas.Thanks

Source: Vue – Stack Overflow

September 17, 2021
Category : News
Tags: chart.js | linechart | Vue.js | vuejs2

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.