Get datas from a database

[bee-interactive]

Hi!

I'm struggling to get datas injected dynamically into my basic bar chart.. I'm always facing this error: Uncaught (in promise) TypeError: Cannot read property 'x' of undefined the trying to fill the series.

Is there any example on how format the incoming datas from an ajax request? I'm trying to fetch some json response but nothing comes into my graph.

Here are my datas from the json response:

And here is my code that export the data to my json response:

I'm using Laravel and VueJS.

Thanks in advance for your help!

[junedchhipa]

Hi @bee-interactive
Can you put your data into a text-format for me to copy-paste easily and re-produce the issue on my side?
I would like to see the final datas you generate to see if it in the correct format.

[bee-interactive]

Hi @junedchhipa !

Sure!

Here's the code:

My VueJS Component:

export default {
    components: {
        'apexcharts': VueApexCharts,
    },
    data () {
        return {
            dates: [],
            count: [],
            dateRangeOptions: {
                startDate: format(subDays(new Date(), 7), 'YYYY-MM-DD'),
                endDate: format(new Date(), 'YYYY-MM-DD'),
                format: 'MM/DD/YYYY',
            },
            series: [{
                name: 'sales',
                data: [this.count]
            }]
        }
    },
    methods: {
        fetchData() {
            return axios.post(`/get-sales/${this.range[0]}/${this.range[1]}`).then((response) => {
                this.dates = response.data.dates.dates
                this.count = response.data.dates.count
            })
        }
    }
}

My controller:

public function getSales(Request $request, $start = null, $end = null)
{
        $datas = [];

        $dates = new \DatePeriod(
            new \DateTime($start),
            new \DateInterval('P1D'),
            new \DateTime($end)
        );

        foreach($dates as $date) {
            $datas['days'][] = [
                'day' => $date->format("Y-m-d"),
            ];

            $datas['count'][] = [
                // Here I just fetch all my orders that was made on that given day and get the count of the rows found
                'count' => $this->getSalesByDay($date->format("d")),
            ];
        }

        $datas['dates'] = [
            'dates' => collect(array_values($datas['days']))->implode('day', ', '),
            'count' => collect(array_values($datas['count']))->implode('count', ', '),
        ];

        return json_encode($datas);
}

Hope this will help!

[junedchhipa]

I think, it's more of a Vue issue.
I suggest, you move your series property from data to computed as it depends on your count prop.

computed: {
  series: function() {
      return [{
           name: 'sales',
           data: [this.count]
       }]
  }
}

If you can create a working demo with fake data on codesandbox vue-template, it would be helpful.

I suspect, that the series prop isn't getting the new data, so the re-render isn't happening. Try updating the series prop directly by

this.series = [{
  name: 'sales',
  data: response.data.dates.count
}]

and see if re-rendering happens

[bee-interactive]

@junedchhipa It worked like a charm with the computed data! Thank you so much!

[pkrabhi]

can anyone help me with apexchat?
i want to get data from API and push it into bar chart.. on a stateless component.
i need example

thanks