How do I use API to fetch data for chart in the context of Vuejs

Question

I'm new to Vuejs, and I want to make my code effective by fetching the data from API rather than giving the data directly.

Here is my code:

<template>
  <canvas id="myChart" width="550" height="300"></canvas>
</template>

<script>

export default {
  name: 'Chart',
  data: () => ({
    arrdate: [
      1600934100.0,
      1602009600.0,
      1602747060.0,
      1603050158.390939,
      1603305573.992575
    ],
    arrchallenge: [
      9.0,
      9.5,
      2.5,
      11.52,
      12.4
    ]
  }),
  mounted () {

    // eslint-disable-next-line no-unused-vars
    const data = this.arrdate.map((arrdate, index) => ({
      x: new Date(arrdate * 1000),
      y: this.arrchallenge[index]
    }))

    const ctx = document.getElementById('myChart').getContext('2d')
    // eslint-disable-next-line no-undef,no-unused-vars
    const myChart = new Chart(ctx, {
      type: 'line',
      data: {
        datasets: [
          {
            data,
            label: 'Performance',
            borderColor: '#7367F0'
          }
        ]
      },
      options: {
        scales: {
          xAxes: [
            {
              type: 'time',
              time: {
                unit: 'month',
                displayFormats: {
                  month: 'MMM YYYY'
                }
              }
            }
          ],
          yAxes: [
            {
              ticks: {
                // eslint-disable-next-line no-unused-vars
                callback (value, index, values) {
                  return `${value  }%`
                }
              }
            }
          ]
        }
      }
    })
  }
}
</script>

As you can see, the "date" and "challenge" contains data which is fed directly, but I want to fetch data from API.

What my API returns:

 {  
     "date": [
                 1600934100.0,
                 1602009600.0,
                 1602747060.0,
                 1603050158.390939,
                 1603305573.992575
             ],

    "challenge": [
                       9.1
                       9.5
                      -2.8
                       18.52
                       15.4
            
                 ]
  }

So as you can see my API, I want the "date's" data to be in arrdate and "challenge's" data to be in arrchallenge by using API.

Someone please help me with this, and if someone knows the answer please send me the changes by adding it to my code itself because I'm new to vuejs wrapping the contents would be difficult for me.

Answer 1

first add axios to your project and read the link below from vue documentation:

using axios with vue

after that you have two options:

Call API on page load

with this option your API calls as soon as your vue app loads so in your created hook do the API call like this:

created() {
axios.get('yourAPIUrl').then((response) => {
  // reassign date and challenge with the response from the API call here for example:
  this.date = response.data.date;
  this.challenge = response.data.challenge
});
}

basically what it does is that you call the API when your vue is created and in the then part you use the response to updata the variables defined in your data object.

Call API on button click

with this method you have a button on your page like this:

<button @click="callAPI">get data from server</button>

when you click the button it calls the callAPI method and in your methods you have the same code as before, like this:

methods: {
  callAPI() {
    // same code as in the created example
  }
}

you can also use async ... await syntax for API call if you want to.

also you can read this article on how to install and use axios in your project:

use axios API with vue CLI

Answer 2

I created this API for you to use to test out the solutions provided by anyone:

https://wirespec.dev/Wirespec/projects/apis/Stackoverflow/apis/fetchChartDataForVueJs

And here is the response:

https://api.wirespec.dev/wirespec/stackoverflow/fetchchartdataforvuejs

You can also create your own API on Wirespec and use it to generate more data (sequential or random) if you need more diverse testing.