Hi. Sorry this is an update from a post I did a little while ago...
I really have no idea how to do this (my brain is cooked), so hoping someone can help me out. I wanted to try something completely out of my depth and now that i've realised its out of my depth, Its frustrating that I cant find the answer...
What I want to do is, create multiple charts in VueJs from a laravel collection and relationship. So...
I have the api route setup which gets a list of answers that has an answers relationship that belongs to that question.
In Vue, im using axios to get the data and saved it into an array. I then use v-for to iterate through the questions so I can display them in separate boxes with the question text in it. This all works perfect.
The issue im facing is now getting the answers and doing something meaningful with them.
What I need to do is group the answers (answers are either, 1,2,3,4) and count how many answered 1, how many answered 2 etc.
Then I need to display this in the chart as an array [23,45,32,2], but for the correct question.
Heres the route and api call:
Route::get('/v1/questions/{sheet_id}', function (Request $request) {
$questions = Question::where('sheet_id', $request->sheet_id)->with('answers')->get();
return response()->json(['questions' => $questions], Response::HTTP_OK);
});
Heres The Vue template so far:
<template>
<div>
<div class="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
<div v-for="item in questions">
<dl>
<dt class="text-sm leading-5 font-medium">
<strong class="text-gray-700">{{ item.title }}</strong> - <strong class="text-gray-500">{{ item.question }}</strong>
</dt>
<dd>
<apexchart
type="radialBar"
height="390"
:options="chartOptions"
:series="series">
</apexchart>
</dd>
</dl>
</div>
</div>
</div>
</template>
And here's the script::
<template>
<div>
<div class="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
<div v-for="item in questions">
<div class="flex flex-col justify-between bg-white overflow-hidden shadow rounded-lg">
<div class="px-4 py-5 sm:p-6">
<div class="flex items-center">
<div class="ml-5 w-0 flex-1">
<dl>
<dt class="text-sm leading-5 font-medium">
<strong class="text-gray-700">{{ item.title }}</strong> - <strong class="text-gray-500">{{ item.question }}</strong>
</dt>
<dd>
<apexchart
type="radialBar"
height="390"
:options="chartOptions"
:series="series">
</apexchart>
</dd>
</dl>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import VueApexCharts from 'vue-apexcharts'
Vue.component('apexchart', VueApexCharts)
export default {
props: {
sheet_id: Number
},
data: function() {
return {
questions:[],
answers: [],
series: [90,34,56,76],
chartOptions: {
chart: {
height: 390,
type: 'radialBar',
},
plotOptions: {
radialBar: {
offsetY: 0,
startAngle: 0,
endAngle: 270,
hollow: {
margin: 5,
size: '30%',
background: 'transparent',
image: undefined,
},
dataLabels: {
name: {
show: false,
},
value: {
show: false,
}
}
}
},
colors: ['#E53E3E', '#DD6B20', '#3182CE', '#38A169'],
labels: ['Strongly Disagree', 'Disagree', 'Agree', 'Strongly Agree' ],
legend: {
show: true,
position: 'bottom'
},
legend: {
show: true,
floating: true,
fontSize: '12px',
position: 'left',
offsetY: 10,
labels: {
useSeriesColors: true,
},
markers: {
size: 0
},
formatter: function(seriesName, opts) {
return seriesName + ": " + opts.w.globals.series[opts.seriesIndex]
},
itemMargin: {
vertical: 3
}
},
responsive: [{
breakpoint: 480,
options: {
legend: {
show: false
}
}
}]
},
}
},
created() {
this.getQuestions()
},
methods: {
getQuestions() {
axios.get('/api/v1/questions/' + this.sheet_id)
.then((response)=>{
this.questions = response.data.questions
this.answers = this.questions['answers']
})
},
},
};
</script>
I cant figure out how to iterate through the answers and display them in the correct chart for the correct question.
Any pointers or help would be great.
Many thanks