laravel 9 + Vue3 + (vue-google-charts)

Question

I'm trying to display data from laravel backend into Vue3 (vue-google-charts), but I didn't find any resources

this is a sample if my json data comming from backend

[
{
interest_oid: 1,
total_cards: 2
},
{
interest_oid: 3,
total_cards: 1
},
{
interest_oid: 5,
total_cards: 2
},
{
interest_oid: 2,
total_cards: 1
},
{
interest_oid: 4,
total_cards: 1
},
{
interest_oid: 8,
total_cards: 1
}
]

i want to display the data in GChart of type "CulomnChart" like this one

this is my Vue component


<div class="col-lg-6">
    <GChart
        type="ColumnChart"
        :data="chartData"
        :options="chartOptions"
        style="height: 100%"/>
</div>


import {GChart} from "vue-google-charts";

export default {
    components: {
        GChart
    },
    props: {
        contacts_per_interests: Array,
    },
    data() {
        return {
            chartData: this.contacts_per_interests,
            chartOptions: {
                width: 500,
                height: 300,
                chart: {
                    title: 'Company Performance',
                    subtitle: 'Sales, Expenses, and Profit: 2014-2017',
                }
            }
        }
    }
}

but it's display "× Table has no columns" any resources or suggestions please?

cengsemihsahin · Accepted Answer · 2022-12-15T08:45:14.213

0

Your contacts_per_interests array should be look like this:

[
    ['interest_oid', 'total_cards'],
    [1, 2],
    [3, 1],
    [5, 2],
    [2, 1],
    [4, 1],
    [8, 1],
]

Adjust accordingly. Like that:

$json = '[
    {
        "interest_oid": 1,
        "total_cards": 2
    },
    {
        "interest_oid": 3,
        "total_cards": 1
    },
    {
        "interest_oid": 5,
        "total_cards": 2
    },
    {
        "interest_oid": 2,
        "total_cards": 1
    },
    {
        "interest_oid": 4,
        "total_cards": 1
    },
    {
        "interest_oid": 8,
        "total_cards": 1
    }
]';

$jsonArr = json_decode($json);

$array = [['interest_oid', 'total_cards']];
foreach ($jsonArr as $item) {
    array_push($array, [$item->interest_oid, $item->total_cards]);
}

edited Dec 15 '22 at 08:45

answered Dec 15 '22 at 08:18

cengsemihsahin

921
2
8
21

any idea how to convert this json to array Looks like what you wrote ?? – LaraDiv Dec 15 '22 at 08:29
@LaraDiv you can change it like this before sending it. I added an example to the answer. – cengsemihsahin Dec 15 '22 at 08:47
@LaraDiv and to send it as json you can send it last with this: `json_encode($array)` – cengsemihsahin Dec 15 '22 at 08:52

laravel 9 + Vue3 + (vue-google-charts)

1 Answers1