Utilizing chart js in combination with vue js, I am able to display data on a dashboard. However, my current objective is to create a function that allows me to click on the chart and navigate to the corresponding table on another view, potentially with filters applied. For example, if I have a chart displaying the total number of users and the number of suspended users in the user table, clicking on the section representing the suspended users should take me to the users table, possibly with an option to filter and only show suspended users.
This snippet shows my implementation of 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>
Here is part of my controller code responsible for generating the data used in the chart:
$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]
],
]
);