Fetching and Visualizing Data in Vue using Axios and Chart.js
Tags: vue, beginners, tutorial
Published: 2020-08-27 15:51:37

# **INTRODUCTION**

First of all, this will be my first article :), please do support and follow me for more.
I am making a COVID19Tracker of my own and came across something called API. A quick  intro for  API:
- An application program interface (API) is a set of routines, protocols, and tools for building software applications.

- Basically, an API specifies how software components should interact.
- Additionally, APIs are used when programming graphical user interface (GUI) components.

- A good API makes it easier to develop a program by providing all the building blocks. A programmer then puts the blocks together.

<hr/>

## **GETTING STARTED**

This was my file structure:
```
D:.
└───components
    ├───Body
    ├───DataGathering
    ├───Footer
    ├───Header
    ├───HomePage
    │   ├───assets
    │   └───Breads
    ├───Maps
    └───Visuals
```
I will be focusing only on working of Axios and Chart.js

**To install axios and chart.js:**

```
npm install chart.js --save
npm install axios
```

**To use them:**

```
import Chart from 'chart.js';
const axios = require("axios");
```

## **DATA FETCHING**
Create a Component named as Cases.vue in <u>Body/Cases.vue</u>
```
<template>
<div>
    <br>
    <br>
    <div>
        <CaseBread></CaseBread>
        <hr/>
        <br>
        <h2>Cases</h2>
        <CasesLine
        :label="labels"
        :chart-data="confirmed" 
        ></CasesLine>
        <br>
        <br>
        <CasesBar
        :label="labels"
        :chart-data="confirmed" 
        ></CasesBar>
        <br>
        <br>
    </div>
</div>
</template>

<script>
const axios=require("axios")
import CasesBar from '@/components/Visuals/CasesBar'
import CasesLine from '@/components/Visuals/CasesLine'
import CaseBread from '@/components/HomePage/Breads/CaseBread'
export default {
     data : ()=> {
        return {
            labels : [],
            confirmed : [],
        }
        
    },
    components : {
        CasesLine,
        CasesBar,
        CaseBread
    },
    async created() {
  const { data } = await axios.get("https://covid19.mathdro.id/api/confirmed");
  var c=0
  for(var i=0;i<1000;i++){
    if(data[i].countryRegion=="India"){
            if (data[i].provinceState in this.labels){
              continue
            }
            else{
              this.labels.push(data[i].provinceState)
              this.confirmed.push(data[i].confirmed)
              c=c+1
              if(c==28){
                break
              }
            }
          }
  }
console.log(this.labels)
}   
}
</script>
```
### **Note:**
Do remove the CasesBread and all of it's related elements while copying this. 

## **So what does it do?**

Under the asynchronous lifecycle method called "created" in vue, it fetches data from API:
```
 https://covid19.mathdro.id/api/confirmed 
```
and passes it to the components CasesLine and CasesBar.These two components use two props, label and chart. Label is an array that will contain the fetched state names and the corresponding cases and chart is an array containing the corresponding cases in each state.

To fetch an API, use:
```
axios.get("YOUR_API");
```




# **MAKING CHARTS**

Here I will be discussing two types of charts,
- Line Chart
- Bar Chart

### **Line Chart**
To create a line chart, create a file called CasesLine.vue in <u>Visuals/CasesLine.vue</u>
```
<template>
  <canvas ref="myChart" width="900px" height="250px"></canvas>
</template>

<script>
import Chart from 'chart.js';
export default {
  props: {
    label: {
      type: Array
    },
    chartData: {
      type: Array
    },
  },
  aysnc mounted() {
    await new Chart(this.$refs.myChart, {
      type: 'line',
      data: {
        labels: this.label,
        datasets: [
        {
            label: 'CASES',
            borderColor: 'rgba(245, 229, 27, 1)',
            backgroundColor: 'rgba(255, 236, 139,0.2)',
            data: this.chartData,
        }
        ]
      },
      options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
    }
    });
  }
}
</script>
```
**Procedure:**
- Create a canvas for it in the template tag with a defined ref.
- Define two props label and chartdata.
- Under the mounted lifecycle method in Vue, create a new Chart and use the ref.
- Define type of chart as line
- Pass the props to the datasets and labels in the Chart
- Your Chart is ready

**Result:**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dy5qcl61k0ef4tgyenpk.png)

### **Bar Chart**
To create a bar chart, create a file called CasesBar.vue in <u>Visuals/CasesBar.vue</u>
```
<template>
  <canvas ref="myChart" width="900px" height="250px"></canvas>
</template>

<script>
import Chart from 'chart.js';
export default {
  props: {
    label:  {
      type: Array
    },
    chartData:  {
      type: Array
    }
  },
  async mounted() {
    await new Chart(this.$refs.myChart, {
      type: 'bar',
      data: {
        labels: this.label,
        datasets: [
        {
            label: 'CASES',
            backgroundColor: 'rgba(144,238,144 , 0.9 )',
            data: this.chartData,
        }
        ]
      },
      options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
    }
    });
  }
}
</script>
```
**Procedure:**
- All the points are the same as linechart , except the point that here type should be bar.

**Result:**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/odm6s5pvmu0bzsrm6iui.png)


# **THAT'S THE END**

<center><img src="https://dl9.glitter-graphics.net/pub/3366/3366289nltlt6b3eh.gif"></center>