Loading data from API into a highcharts vue component

Question

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!

Would you be able to reproduce the problem on Code Sandbox, or Stackblitz? It should be better to find out what is happening. — daniel_s
– daniel_s, Commented Feb 25, 2021 at 9:08

ssc-hrep3 · Accepted Answer · 2021-02-21 09:18:28Z

3

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 = ...

answered Feb 21, 2021 at 9:18

ssc-hrep3

16.3k8 gold badges51 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Deliant Over a year ago

Thanks! I still can't get the data to load into my graph even with these changes, details on further steps i've taken in post edit

Collectives™ on Stack Overflow

Loading data from API into a highcharts vue component

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related