I use chart js with vue js, and show some data on dashboard. But what i am trying to do now is to make a function when i click on chart to go on the responsibile table on another view, maybe with filter also.
I mean if i have a chart where i show how many user are and how many user is_suspended
are on user table, when i click on side where i see how many is_suspended
are to go on users table, maybe to add also filter to show is_suspended
only
this is my chart js
<template>
<div class="container card mx-0 my-2 p-2">
<Doughnut v-if="loaded"
:chart-options="chartOptions"
:chart-data="chartData"
:width="width"
:height="height"
/>
</div>
</template>
<script>
import { Doughnut } from 'vue-chartjs/legacy'
import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'
ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
export default {
name: 'PieChart',
components: { Doughnut },
props: {
width: {
type: Number,
default: 200
},
height: {
type: Number,
default: 100
},
},
data: () => ({
chartOptions: {
responsive: true
},
loaded: false,
chartData: {}
}),
async mounted () {
this.loaded = false
try {
let response = await fetch('/home/user-statistics-doughnutchart')
let userdata = await response.json()
// console.log(userdata)
this.chartData = userdata
this.loaded = true
} catch (e) {
console.error(e)
}
}
}
</script>
and my controller
$users = User::count();
$active = User::where('is_suspended', 0)->count();
$suspendedUsers = User::where('is_suspended', 1)->count();
$post_data = array(
'labels' => [
'Accounts '.'('.$users.')',
'Active '.'('.$active.')',
'Suspended '.'('.$suspendedUsers.')',
],
'datasets' => [
[
'backgroundColor' => ['#695CFE', '#191641', '#F2C335'],
'data' => [$users, $active, $suspendedUsers]
],
]
);