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

by

1👍

✅

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()

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>

Leave a comment