Problem in Loading & Filtering Google Line chart

MIT App Inventor Help
,
1

I have a problem in Drawing and filtering the charts. My code works without an error checked it on the console, but my charts looks like this in the browser. Really not sure why? (Frustrated :frowning_face:)

My expected functionality of the chart is

  • On loading the page Chart should display with data "National".
  • On drop down selection chart have to be updated with selected values.

issue_chart
issue_chart1717×253 7.27 KB

My App script Function is this

function draw_chart(){
  var ss = SpreadsheetApp.openById('XXXXXXX');
  var metrics_sheet = ss.getSheetByName('sheet1');
  var lastrow = metrics_sheet.getLastRow();
  var lastcolumn = metrics_sheet.getLastColumn();
  var values = metrics_sheet.getRange("A1:X").getValues();
  /* Find Last Index of the Non Blank cells */
  const range = metrics_sheet.getRange("A1:X"+lastrow).getValues();
  var index_values  = lastrow - range.reverse().findIndex(c=>c[0]!='');
  var temp = "A1:X"+index_values;
  var values = metrics_sheet.getRange(temp).getValues();
  var chart_dt = JSON.stringify(values); 
  Logger.log(chart_dt);
  return chart_dt;
}

From This I am getting an output like this

[["SalesDiv","date","volume"],
["National","2024-04-30T18:30:00.000Z",100],
["National","2024-05-30T18:30:00.000Z",403],
["National","2024-06-30T18:30:00.000Z",678],
["National","2024-07-30T18:30:00.000Z",700],

["New City","2023-04-30T18:30:00.000Z",90],
["New City","2023-05-31T18:30:00.000Z",200],
["New City","2023-06-30T18:30:00.000Z",500],
["New City","2023-07-31T18:30:00.000Z",300],

["old City","2022-04-30T18:30:00.000Z",10],
["old City","2022-05-31T18:30:00.000Z",203],
["old City","2022-06-30T18:30:00.000Z",178],
["old City","2022-07-31T18:30:00.000Z",400]]

My JS Script code and HTML code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript"> 
google.charts.load('current',{'packages':['corechart']});
google.charts.setOnLoadCallback(drawchart);

//Getting Data from AppScript function
function drawchart(){  
  google.script.run.withSuccessHandler(displaychart).funct_data();
}

let filter_selection =[];
//Displaying charts in the Div
function displaychart(c_data1){
    var arrMain = new Array();

        for(i=0; i<c_data1.length;i++){
          var arr = new Array(c_data1[i].date,c_data1[i].volume,c_data1[i].SalesDiv);
          arrMain.push(arr);
        }

        var datatable = new google.visualization.DataTable();
        datatable.addColumn({type: 'date', label: 'x'});
        datatable.addColumn({type: 'number', label: 'y'});
        datatable.addColumn({type:'string',role:'annotation'}); 
        datatable.addRows(arrMain);  
        console.log(datatable);             
      
        var chart = new google.visualization.LineChart(document.getElementById('line_cont'));
        chart.draw(datatable);
      }
// Function to filter the data on Dropdown select & Button click
     function filtering(){                
        google.script.run.withSuccessHandler(filter_data).draw_linechart();             
      }       

      function filter_data(f_sales_div_data){
        let selection = document.getElementById("sales_div").value;
    let filter_sales_div = f_sales_div_data;        

        //Filter for regions
        if(selection==""){
          filter_selection  = filter_sales_div.slice(0);
        }else{          
          filter_selection = filter_sales_div.filter(f_sales_div_data => f_sales_div_data.salesDiv === selection)       ;          
        }     
      }
</script>
<select id="sales_div">
    <option value="National">National</option>
    <option value="New City">New City</option>
    <option value="old city">old city</option>
     </select>
     <button id="srch_btn" onclick="filtering()"> Search </button> 
     <div id="line_cont" class="d_c"></div>

Would someone help me to understand the problem. Thanks in Advance.

2

How are you integrating this with AppInventor ?