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
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.!!
