How do i filter or populate by date with condition in laravel and display in vue through fusionchart?

This is very tricky for me to do since im not familiar with this tools. I have a table teachers,schedules and checkers. What I want to do is when I select a specific teacher on the select box, the graph will be populate his absences for the month. Like if I click mark, the graph will populate a bar graph and displaying his absent and present days I cant even figure it out how to do it. Can someone tell me what I should do? Or some advice if you encounter this type of process?

So here is my databases Teachers

+----+----------+--------+
| id | fullname | course |
+----+----------+--------+
|  1 | Vince    | CCE    |
|  2 | Mark     | CHE    |
+----+----------+--------+

Schedules

+----+------------+------------+----------+-----------+
| id | teacher_id | start_time | end_time | day       |
+----+------------+------------+----------+-----------+
|  1 |          1 | 10:30 PM   | 12:30 AM | M-T-W-T-F |
|  2 |          2 | 5:30 PM    | 6:30 PM  | M-T-W-T-F |
+----+------------+------------+----------+-----------+

Checkers

+----+-------------+---------+------------+---------+---------------------+
| id | schedule_id | user_id | remarks_id | status  | created_at          |
+----+-------------+---------+------------+---------+---------------------+
|  1 |           1 |       1 |         12 | Round 1 | 2020-01-20 00:00:00 |
|  2 |           1 |       1 |         12 | Round 2 | 2020-01-20 00:00:00 |
|  3 |           2 |       1 |          9 | Round 1 | 2020-01-20 00:00:00 |
+----+-------------+---------+------------+---------+---------------------+

Note that remarks_id = 12 is Absent

My Graph Component

<div id="chart-container">
        <fusioncharts :type="type" :width="width" :height="height"
          :dataFormat="dataFormat"  :dataSource=" dataSource ">
            </fusioncharts>
    </div>

The Script

import Vue from 'vue';
import VueFusionCharts from 'vue-fusioncharts';
import FusionCharts from 'fusioncharts';
import Column2D from 'fusioncharts/fusioncharts.charts';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
Vue.use(VueFusionCharts, FusionCharts, Column2D, FusionTheme);
export default {
    name: 'app',
    data() {
        return {
            users: [],
            type: "doughnut2d",
            renderAt: "chart-container",
            width: "550",
            height: "350",
            dataFormat: 'json',
            dataSource: {
                chart: {
                    "caption": "Absences", "theme": "fusion"
                }
                ,
                data: []
            },
        }
    },
    methods: {
          getdata(){
           axios.get('/getGraph')
            .then(({data})=>{
                for(let x in data){
                    this.dataSource.data.push({
                        "label": x,
                        "value": data[x].count
                    })
                }
            })
       }
    },
    created: function(){
       this.getdata();

    }
}
</script>

I tried this query to count the absences

 public function getGraph(){
        $ext = \DB::table('checkers')->distinct()->get();
        $grouped = $ext->groupBy('schedule_id')->map(function($item, $key) {
            return ['count' => collect($item)->count()];
        });
        return response()->json($grouped);
    }

My current output https://i.stack.imgur.com/uPeJ9.png

PS: the graph component is separated from dashboard in case you wonder why i got a select option there its because it is in my dashboard not in the graph. I hope you understand my point. Thanks a lot.