Issue with filtering Charts on Button click – Web app GAS

I am trying to Build a chart in Web App – GAS. I have Dropdown

Dropdown List values are – All, North, South. By default when page loads I need to render the chart with “All” Values. On selection of dropdown and button click, the chart has to filtered.

I am getting the error “Cannot read properties of undefined (reading ‘length’)” With this error I could not move forward, I got stuck here.

Is this because of getRange in my GAS script, which is an 2D array. Help me out with the solutions.

My Sample data from Google Sheets looks like

enter image description here

Here is what I am trying

My GAS Code:

function draw_linechart(){
  var ss = SpreadsheetApp.openById('XXXXXXXXXXXXXXX');
  var metrics_sheet = ss.getSheetByName('test_chart');

  var c_data= metrics_sheet.getRange("A1:B").getValues();
  var c_data1 = JSON.stringify(c_data);   
  return c_data1;
}

My HTML Code

<!DOCTYPE html>
<?!= HtmlService.createHtmlOutputFromFile('p_style').getContent();?>
<html>  
  <head>
    <base target="_top">    
    <script src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">   
    
      google.charts.load('current',{'packages':['corechart']});
      google.charts.setOnLoadCallback(drawchart);

      function drawchart(){
        window.alert('Inside Draw Chart func');
        google.script.run.withSuccessHandler(displaychart).draw_linechart();
      }

      function displaychart(c_data1){

        var chartdata =  new google.visualization.arrayToDataTable(JSON.parse(c_data1));
        console.log(chartdata);        

      //Setting Chart Options

      var options={
        title: 'Checking the Charts',
        is3D: true
      }

      // Draw our chart passing some options
      var chart = new google.visualization.LineChart(document.getElementById('line_chart'));
      chart.draw(chartdata,options);
      }
      </script>
  </head>
<body>
<?var url =getUrl(); ?>    
<form method="post" action="<?= url ?>" >
<div class="filter_container">
      <br><br>
      <div class="box1">      
        <label class="label_"> DGraph </label> <br>
        <select name="s_d" id="dg" class="cselect">
        <option style="color:#D3D3D3" value="All"  selected disabled hidden > Choose </option>
        <? for(var i=0; i< dg.length;i++){ ?>
        <option value="<?= dg[i] ?>" ><?= dg[i] ?></option>
        <? } ?>
        </select><br><br>
      </div>
<button id ="btn" type="button">Click!</button>
</div>
<div id ="line_chart"><div>
</form>
</body>
</html>

Many Thanks in Advance.!!