CODEWITHSUNDEEP
javascriptnode.jsvue.jshighcharts
Deliant
Deliant

Reputation: 21

Loading data from API into a highcharts vue component

I'm trying to load data from an express api into my highcharts-vue component, and i'm having trouble with parsing the data into my chart. Express lets me know that my vue component is making a GET request to the API, Postman lets me know the GET request returns an array of date and env_light values but Vue is seemingly not loading, or not updating my chart with the new data

ChartDisplay.vue (component)

<template>
  <div class="chartElem">
    <div class="row">
      <highcharts :options="chartOptions"></highcharts>
    </div>
  </div>
</template>

<script>
import { Chart } from 'highcharts-vue';
import axios from 'axios';

export default {
  name: 'ChartDisplay',
  components: { highcharts: Chart },
  data() {
    return {
      chartOptions: {
        chart: {
          type: 'spline',
        },
        title: {
          text: 'Environment - Light',
        },
        series: [{
          data: [],
          color: '#6fcd98',
        }],
      },
    };
  },
  mounted() {
    this.fillData();
  },
  methods: {
    async fillData() {
      await axios.get('http://localhost:4000/api/db/env_light')
        .then((response) => {
          this.chartOptions.series[0].data = response.data.map((m) => m.env_light);
        });
    },
  },
};
</script>

The fillData function works as expected when i test it isolated outside of the Vue app and returns an array of values to this.chartOptions.series[0].data, and the chart works and updates automatically if i insert values manually into the data array and save the file.

I've also tried to purge my database from 300+ entries to 5, in case there was a array length issue, and i've tried to parse the data into a structure like this - both unsuccessful

.then((response) => {
  this.chartOptions = {
    series: [{
      data: response.data.map((m) => m.env_light),
    }],
  };
});

Because the app is making a get request to the API when i refresh sites i know that the fillData method is being executed, and because the app is actually updating changes when i manually insert values into the arary it leads me to believe the default update mechanism for the chart is working. Is there still something wrong with how i parse the data? This is my first Vue app, so i'm a bit puzzled and short on ideas both for solutions or how to further research the issue - any suggestions would be appreciated!

Upvotes: 2

Views: 1178

Answers (1)

ssc-hrep3
ssc-hrep3

Reputation: 16069

The problem here is that series is an array and not an object. So, you are accessing the data property of the array containing objects instead of the object itself. What you actually want is to access the data property of the first element of the series array.

this.chartOptions.series[0].data = ...

Upvotes: 3

Related Questions