Trying to use axios, vuejs and a dummy api for my chartjs and googlecharts (get requests only)

Question

I am trying to use axios in combination with a link containing this data: { "2015": 226, "2016": 152, "2017": 259, "2018": 265, "2019": 275}, written in JSON.

I want to implement those data, the year for example: 2017 and the revenue: 259 in this chart:

//BARCHART
var ctx = document.getElementById("myChart");
var barChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["2016", "2017", "2018", "2019", "2020"],
    datasets: [
      {
        label: 'Vergangenheit', //Vergangenheit = Past
        data: [226, 152, 259, 265, 0],
        backgroundColor: 'rgba(110, 205, 126, 1)',
        borderColor: 'rgba(110, 205, 126, 1)',
        borderWidth: 1,
      }
    ]
  },

  options: {
    responsive: true,
    responsiveAnimationDuration: 0,
    maintainAspectRatio: true,
    aspectRatio: 2,
    oneResie: null,
    scales: {
      yAxes: [
        {
          ticks: {
            beginAtZero: true
          }
        }
      ]
    }
  }

});

With the combination of vue and axios a get request should look like this:

var vm = new Vue({
  el: '#get',
  data: {
    messages: [],
    message: ""
},
mounted: function () {
    this.getMessages(); // get all messages automatically when the page is loaded
},
methods: {
    getMessages: function() {
        axios.get('(hiddenhttps:/api/GewinnNachJahr')
            .then( (res) => {
                this.messages = res.data;
                console.log(response.data)
            })
    },
}
});

I don't want any button to press for the get request, it should always get that data when reloading the page. I already tried the a few code snippets from stackoverflow, the official axios github don't help me at all.

So to summarize i want that axios getrequest on my http datas, then saving and sorting this data and implementing it in my chart.js barchart. I think its enough to just working withing my java.js.

I apologize for the time and effort involved. Thank you in advance.

Answer 1

mounted or created is the correct place to implement bootstrapping logic for this case. However your code has some problems in definitions and typo:

• '(hiddenhttps:/api/GewinnNachJahr' : the initial parenthesis should be omitted
• console.log(response.data) : response should become res for matching callback parameter.

See a working example with a dummy api call and how it loads the data:

 var vm = new Vue({ el: '#app', data: { messages: [], message: "" }, mounted() { this.getMessages(); // get all messages automatically when the page is loaded }, methods: { getMessages() { axios.get('http://dummy.restapiexample.com/api/v1/employees') .then((res) => { this.messages = res.data; console.log(res.data) }) }, } });

 <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <ul> <li v-for="m in messages">{{JSON.stringify(m)}}</li> </ul> </div>

Answer 2

You can implement chart.js into your vue app. I have created this code it should work.

   var vm = new Vue({
  el: "#get",
  data: {
    messages: [],
    message: "",
    labels: [],
    data_set: [],
    barChart: ""
  },
  mounted: function() {
    var ctx = document.getElementById("myChart");
    this.barChart = new Chart(ctx, {
      type: "bar",
      data: {
        labels: this.labels,
        datasets: [
          {
            label: "Vergangenheit", //Vergangenheit = Past
            data: this.data_set,
            backgroundColor: "rgba(110, 205, 126, 1)",
            borderColor: "rgba(110, 205, 126, 1)",
            borderWidth: 1
          }
        ]
      },

      options: {
        responsive: true,
        responsiveAnimationDuration: 0,
        maintainAspectRatio: true,
        aspectRatio: 2,
        oneResie: null,
        scales: {
          yAxes: [
            {
              ticks: {
                beginAtZero: true
              }
            }
          ]
        }
      }
    });
  },
  created: function() {
    this.getMessages(); // get all messages automatically when the page is loaded
  },
  methods: {
    getMessages: function() {

      axios
        .get(
          "https://webenggroup06ln3.free.beeceptor.com/zalando/api/GewinnNachJahr"
        )
        .then(res => {
          console.log(res.data);
          for (let [key, value] of Object.entries(res.data)) {
            this.labels.push(key);
            this.data_set.push(value);
          }
          this.$nextTick(function() {
            this.barChart.update();
          });
        });
    }
  }
});

the for loop splits your key and your value seperate and then it pushes it into the data array. After everything is pushed inside the array the chart just needs to get updated with this.barChart.update()