Bar Chart from SharePoint List with dropdown filter in Sharepoint Designer

Question

I have attached the image of my output, but along with this, I want to have a Select option where users can select the "itemname" and data related to that should be displayed instead of all data from the list. the listname which I have used is "integdmlist". https://www.ais.com/transform-your-sharepoint-list-data-into-an-eye-catching-chart/ (I have used this method for retrieving data from the list)

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<script type="text/javascript">
var splistitems;
var seriesarray = new Array();

    SP.SOD.executeFunc('sp.js', 'SP.ClientContext', GetChartData);

function GetChartData() {
   seriesarray = [];
    seriesarray2 = [];
     seriesarray3 = [];
   var currentcontext = new SP.ClientContext.get_current();
   var splist = currentcontext.get_web().get_lists().getByTitle('integdmlist');
   var splistquery = new SP.CamlQuery();
   splistitems = splist.getItems(splistquery);
   currentcontext.load(splistitems);
   currentcontext.executeQueryAsync(Function.createDelegate(this, GetChartDataSuccess), Function.createDelegate(this, GetChartDataFail));
}

function GetChartDataSuccess(sender, args) {
   var splistitemcount = splistitems.get_count();
   if (splistitemcount != 0) {
      var splistitemenumerator = splistitems.getEnumerator();
      while (splistitemenumerator.moveNext()) {
         var currentlistitem = splistitemenumerator.get_current();
         var itemname = currentlistitem.get_item("field_2");
         var itemdataone = currentlistitem.get_item("field_3");
         var itemdatatwo = currentlistitem.get_item("field_4");
           var itemdatathree = currentlistitem.get_item("field_5");  
           var itemdatafour = currentlistitem.get_item("field_6");  
           var itemdatafive = currentlistitem.get_item("field_7");
             var itemdatasix = currentlistitem.get_item("field_8");
               var itemdata9 = currentlistitem.get_item("field_9");
                 var itemdata10 = currentlistitem.get_item("field_10");
                   var itemdata11 = currentlistitem.get_item("field_11");
                     var itemdata12 = currentlistitem.get_item("field_12");
                       var itemdata13 = currentlistitem.get_item("field_13");
                         var itemdata14 = currentlistitem.get_item("field_14");
                           var itemdata15 = currentlistitem.get_item("field_15");
                             var itemdata16 = currentlistitem.get_item("field_16");
                              var itemdata17 = currentlistitem.get_item("field_17");
                       var itemdata18 = currentlistitem.get_item("field_18");
                         var itemdata19 = currentlistitem.get_item("field_19");
                           var itemdata20 = currentlistitem.get_item("field_20");
                             var itemdata21 = currentlistitem.get_item("field_21");
                              var itemdata22 = currentlistitem.get_item("field_22");


               var seriesitem = {
                            name: itemname,

                           data: [itemdataone, itemdatatwo,itemdatathree, itemdatafour, itemdatafive, itemdatasix]
                       };
                        var seriesitem2 = {
                            name: itemname,

                             data: [itemdata9, itemdata10,itemdata11,itemdata12, itemdata13,itemdata14,itemdata15, itemdata16]
                       };
  var seriesitem3 = {
                            name: itemname,

                           data: [itemdata17, itemdata18,itemdata19,itemdata20, itemdata21,itemdata22]
                       };

         seriesarray.push(seriesitem);
          seriesarray2.push(seriesitem2);

          seriesarray3.push(seriesitem3);
      }
      DrawChart();
   }
}
function GetChartDataFail(sender, args) {
   alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
var chart = null;

function DrawChart() {
        fruitChart1 = new Highcharts.Chart({
            chart: {
                renderTo: 'chart-container',
                type: 'column'
            },
            title: {
                text: 'Revenue(DM wise view)'
            },xAxis: {
                categories: ['Q1 FY21 ', 'Q2 FY21 ','Q3 FY21 ','Q4 FY21 ','Q1 FY22 ','Q2 FY22 ']
            },
            
            
                       yAxis: {
                min: 0,
                title: {
                    text: ''
                },
                stackLabels: {
                    enabled: true,
                    style: {
                        fontWeight: 'bold',
                        color: 'gray'
                    }
                }
            },
            legend: {
            enabled:false,
                align: 'right',
                
                x: -70,
                verticalAlign: 'top',
                y: 20,
                floating: true,
                backgroundColor: 'white',
                borderColor: '#CCC',
                borderWidth: 0,
                shadow: false
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.x +'<br></br>'+
                        this.series.name +': '+ this.y +'<br/>'+
                        'Total: '+ this.point.stackTotal;
                }
            },
            plotOptions: {
                column: {
                
                    stacking: 'normal',
                    dataLabels: {
                        enabled: false,
                        color: 'white',
                        style: {
                            textShadow: '0 0 3px black, 0 0 3px black'
                        }
                    }
                }
            },
            series: seriesarray
        });
         fruitChart2 = new Highcharts.Chart({
            chart: {
                renderTo: 'chart1-container1',
                type: 'column'
            },
            title: {
                text: 'Volume (DM wise view)'
            },xAxis: {
               categories: ['Q1 FY21 ', 'Q2 FY21 ','Q3 FY21 ','Q4 FY21 ','Q1 FY22 ','Q2 FY22 ','Q3 FY22' , 'Q4 FY22']
            },
            
            
                       yAxis: {
                min: 0,
                title: {
                    text: ''
                },
                stackLabels: {
                    enabled: true,
                    style: {
                        fontWeight: 'bold',
                        color: 'gray'
                    }
                }
            },
            legend: {
            enabled:false,
                align: 'right',
                
                x: -70,
                verticalAlign: 'top',
                y: 20,
                floating: true,
                backgroundColor: 'white',
                borderColor: '#CCC',
                borderWidth: 0,
                shadow: false
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.x +'<br></br>'+
                        this.series.name +': '+ this.y +'<br/>'+
                        'Total: '+ this.point.stackTotal;
                }
            },
            plotOptions: {
                column: {
                
                    stacking: 'normal',
                    dataLabels: {
                        enabled: false,
                        color: 'white',
                        style: {
                            textShadow: '0 0 3px black, 0 0 3px black'
                        }
                    }
                }
            },
            series: seriesarray2
        });
         fruitChart3 = new Highcharts.Chart({
            chart: {
                renderTo: 'chart3-container3',
                type: 'column'
            },
            title: {
                text: 'Margin(DM wise view)'
            },xAxis: {
                categories: ['Q1 FY21 ', 'Q2 FY21 ','Q3 FY21 ','Q4 FY21 ','Q1 FY22 ','Q2 FY22 ']
            },
            
            
                       yAxis: {
                min: 0,
                title: {
                    text: ''
                },
                stackLabels: {
                    enabled: true,
                    style: {
                        fontWeight: 'bold',
                        color: 'gray'
                    }
                }
            },
            legend: {
            enabled:false,
                align: 'right',
                
                x: -70,
                verticalAlign: 'top',
                y: 20,
                floating: true,
                backgroundColor: 'white',
                borderColor: '#CCC',
                borderWidth: 0,
                shadow: false
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.x +'<br></br>'+
                        this.series.name +': '+ this.y +'<br/>'+
                        'Total: '+ this.point.stackTotal;
                }
            },
            plotOptions: {
                column: {
                
                    stacking: 'normal',
                    dataLabels: {
                        enabled: false,
                        color: 'white',
                        style: {
                            textShadow: '0 0 3px black, 0 0 3px black'
                        }
                    }
                }
            },
            series: seriesarray3
        });


    }

    </script>
    

  <html>
  <body>
  <div id="chart-container" >No Data Found.</div>

  </div>

</body>
</html>