Need to work on charts in Vue. Can anyone give me some advice?

I am so stressed out. I landed my first job as a Vue Developer, and so far the tasks have been pretty straightforward, but recently I got a 2-week which makes me want to pull my hairs out. The company I work for is going to provide me with some json data from their database, and then I need to put it into charts. It sounded very simple… on paper…

First of all, I need to create gauge charts, which are almost impossible to come by when you can only depend on open source libraries. I found a libary called Apexcharts, which looks pretty good, and I did also manage to set one up with hardcoded data.

But the problem is that there is very little information on how to handle json data. They point to this guide, which is only for vanilla javascript. https://apexcharts.com/docs/update-charts-from-json-api-ajax/

Does anyone here know if there are better Vue chart libraries out there for beginners who have never worked with SQL and json data before? Or am I simply making it seem much more difficult than it is?

Here is the gauge chart that I started working on. I know that it’s not fully complete, but I want to know if I am on the right track regarding importing json files?

   <template>
    <b-modal v-model="open">
      <apexchart
           type="radialBar"
           height="550"
          :options="options"
          :series="series">

      </apexchart>
  </b-modal>
</template>

<script>
import '@/plugins/apexcharts'

export default {
  data: () => ({
    open: false,
    json: null,
    series: [],
    options: {
      chart: {
        type: 'radialBar',
        offsetY: -20,
        sparkline: {
          enabled: true
        }
      },
      plotOptions: {
        radialBar: {
          startAngle: -90,
          endAngle: 90,
          track: {
            background: "#e7e7e7",
            strokeWidth: '97%',
            margin: 5, // margin is in pixels
            dropShadow: {
              enabled: true,
              top: 2,
              left: 0,
              color: '#999',
              opacity: 1,
              blur: 2
            }
          },
          dataLabels: {
            name: {
              show: false
            },
            value: {
              offsetY: -2,
              fontSize: '22px'
            }
          }
        }
      },
      grid: {
        padding: {
          top: -10
        }
      },
      fill: {
        type: 'gradient',
        gradient: {
          shade: 'light',
          shadeIntensity: 0.4,
          inverseColors: false,
          opacityFrom: 1,
          opacityTo: 1,
          stops: [0, 50, 53, 91]
        },
      },
      labels: ['Average Results'],
    },
 }),
methods: {
    show() {
      this.open = true;
}
  },
  created: function () {
    fetch("/a.json")
    .then(r => r.json())
    .then(json => {
          this.json=json;
          chart.updateSeries([{
            series: [],
            data: response
          }])
        });
      }
    }
    </script>

I haven’t used Apex charts, but I’ve done a decent comparison between a number of them (for React, but same same) and found that Chart.js was the best for general purpose. Looks like there’s an actively maintained Vue lib for it as well: https://github.com/apertureless/vue-chartjs

Just keep in mind that charts are naturally complex with lots of data manipulations so don’t worry if it’s going over your head a bit. Your workplace should understand this and support you (I would hope).

Hello again.

Here are some updates. I got a bit further, but I ran into a wall and feel completely stuck. No help from my workplace sadly, so I will need some advice.

So I have 3 components: One for making the axios request, one for the chart and a frontpage used to display the chart.

The component for axios is very straight forward.

import axios from '@/config/axios';

export const biService = {
  getGraphData() {
    return axios.get(`bi/stats/property/company`, {timeout: 300000})
   }

On the front page, the data is shown in an array object. I can see the data when inspecting the page.

<template>
<area-authorizer area="frontpage" ref="areaAuthorizer" @authorized="load" show- 
loading show-not-found>

 ***** Chart component goes here *****
<div>
 <chart-component />
</div>

<script>

import {biServicet} from .......
export default {
components: {
 ChartComponent
  },
 data: () => ({ 
  biGraph: null
  }),
     methods: {
  load() {
    if (!this.$refs.areaAuthorizer.authorized) {
      return;
    }
 
    biService.getGraphData()
        .then(result => this.bIGraph = result.data)
        .catch(error => console.error(error));
    }
  }
 } 
</script>

As I said, if I inspect the frontpage I can clearly see an object which includes the data from getGraphData, like date, name, address etc.

But now I somehow need to fetch it so I can see it on the page
I need to do this inside the component for my chart:

export default {
  data: () => ({

    series: [{
      data: []
    }],
    chartOptions: {
      chart: {
        type: 'bar',
        height: 250
      },
      plotOptions: {
        bar: {
          horizontal: false,
          columnWidth: '55%',
          endingShape: 'rounded'
        },
      },
      dataLabels: {
        enabled: false
      },
      stroke: {
        show: true,
        width: 2,
        colors: ['transparent']
      },
      xaxis: {
        categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
      }
    }
  })
}

I really don’t know how to proceed from here. I tried to update the chart with the data, but nothing happens.

         biService.getGraphData()
        .then(result => this.bIGraph = result.data)
        .then((response) => {
          response.data.forEach(element => {
            this.series.push(element.date)
          })
        })

You need to pass down the data as a prop to the chart. Something like

<chart-component :chart-data="biGraph" />