使用过滤器创建Chart JS图表

Question

我正在使用chart.js创建图表。 我从PHP数组中获取数据。 如何向图表添加过滤器？
就像只显示两个日期之间的数据或一个人的数据一样。
我想在不重新加载页面的情况下使用它。
这是我的代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>  
<script>
var mainChart_ctx = document.getElementById("main_chart").getContext("2d");
var mainChart_config = {
                      type: 'horizontalBar',
                      data: {
                        labels: [<?php
                            foreach($callerdata as $key => $value){
                                echo "'".$callerdata[$key]['name']." (".(count($callerdata[$key]['outbound']) + count($callerdata[$key]['inbound']) + count($callerdata[$key]['missed'])).")',";
                            } if(count($callerdata) == 0){echo " ";} ?>
                        ],
                        datasets: [
                          {
                            label: 'Gemiddelde Rinkeltijd',
                            backgroundColor: '#007bff',
                            data: [<?php
                            foreach($callerdata as $key => $value){
                                echo "'".round($callerdata[$key]['waittime'] / $callerdata[$key]['totalcalls'])."',";
                            }?>],
                            borderColor: '#666',
                            borderWidth: 1
                          }
                        ]
                      },
                      options: {
                          maintainAspectRatio: false,
                        tooltips: {
                          enabled: true,
                            callbacks: {
                            label: function(tooltipItem) {
                                return Number(tooltipItem.xLabel)+ " seconden";
                            }
                        }
                        },

                        legend: {
                          display: true
                        },
                        scales: {
                          xAxes: [{
                            ticks: {
                              min: 0 
                            },
                            stacked: true,
                            scaleLabel: {
                              display: false,
                              labelString: 'Gemiddelde rinkeltijd',
                              fontSize: 14
                            }
                          }],
                          yAxes: [{
                            ticks: {
                              stepSize: 10
                            }
                          }]
                        }
                      }
                    };
</script>

我还想将其更改为其他类型的图表，例如条形图或折线图。