Add new Data Row in Google Visualisation

Question

I am trying to making dynamic Google Line chart. I am fetching my datatable from Google Sheet. I added eventlistener in html to update the data row. So that, existing data row gets updated. My aim is to delete existing data rows from the chart and new data rows.

Code.gs:

function getTableDataTV(){
  //Chart load with this datatable
  const ws = SpreadsheetApp.openById("").getSheetByName("Sheet 1"); //2nd worksheet ID
  const data = ws.getRange (2,1,ws.getLastRow() -1, 9).getDisplayValues();
 
return data

}

function getvoddata() {
//new data table for eventlistener
  const ss = SpreadsheetApp.openById("");//2nd worksheet ID
  const sw = ss.getSheetByName("Sheet 2");
  var finaldata = sw.getRange (2,1,sw.getLastRow() -1, 9).getDisplayValues();
  return finaldata
}

HTML:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
            google.charts.load('current', {'packages':['line']});
      google.charts.setOnLoadCallback(getData);
      var chart;
      var options;

function getData(){
google.script.run.withSuccessHandler(drawChart).getTableDataTV();
}
          function drawChart(dataReturned) {

      data = new google.visualization.DataTable();
      data.addColumn('date', 'Days');
      data.addColumn('number', 'A');
      data.addColumn('number', 'B');
      data.addColumn('number', 'C');
      data.addColumn('number', 'D');
      var newData =  dataReturned.map(r => [new Date(r[0].slice(6,10),r[0].slice(0,2),r[0].slice(3,5)), parseInt(r[1]),parseInt(r[2]),parseInt(r[3]),parseInt(r[4])]);

      data.addRows(newData);
       options = {
             
          title: 'Total Views',
          subtitle: 'ABP News Vs Competitor Channels'
           
            };
       chart = new google.charts.Line(document.getElementById('chart'));

      chart.draw(data, google.charts.Line.convertOptions(options));
    }

//Update Data Row

document.getElementById("pd1").addEventListener("click",newchart);
function newchart(){
google.script.run.withSuccessHandler(updateChart).getvoddata();
}
    function updateChart(newdataReturned) {
       
                   
 data = new google.visualization.DataTable();
      data.addColumn('date', 'Days');
      data.addColumn('number', 'A');
      data.addColumn('number', 'B');
      data.addColumn('number', 'C');
      data.addColumn('number', 'D');
      var newData =  newdataReturned.map(r => [new Date(r[0].slice(6,10),r[0].slice(0,2),r[0].slice(3,5)), parseInt(r[1]),parseInt(r[2]),parseInt(r[3]),parseInt(r[4])]);

      data.addRows(newData);           

          // redraw the chart.
          chart.draw(data, options);        
      
      }
        
    </script>
.....
<body>...
<a id="pd1">VOD</a>
<div id="chart" style="width: 1000px; height: 400px"></div>
</body>

I am also getting error on console when add below line:

document.getElementById("pd1").addEventListener("click",newchart);

Error: Uncaught TypeError: document.getElementById(...) is null

I got this updatefunction from this website and it is working on jsfiddle . Please check, what I am doing wrong here.

Thank You

Answer 1

In your situation, how about the following modification?

Modified script:

In this modification, your HTML and Javascript are modified. I thought that when I saw your HTML and Javascript, the button is not shown in your HTML, and also, the container for inserting the chart is not shown. And, when I modified your HTML and Javascript by these situations and your sample script shown in your jsfiddle.

<div id="chart"></div>
<button id="pd1">update chart</button>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(getData);
var chart;
var data;
var options;

document.getElementById("pd1").addEventListener("click", newchart);

function getData() {
  google.script.run.withSuccessHandler(drawChart).getTableDataTV();
}

function newchart() {
  google.script.run.withSuccessHandler(updateChart).getvoddata();
}

function drawChart(dataReturned) {
  data = new google.visualization.DataTable();
  data.addColumn('date', 'Days');
  data.addColumn('number', 'A');
  data.addColumn('number', 'B');
  data.addColumn('number', 'C');
  data.addColumn('number', 'D');
  var newData = dataReturned.map(r => [new Date(r[0].slice(6, 10), r[0].slice(0, 2), r[0].slice(3, 5)), parseInt(r[1]), parseInt(r[2]), parseInt(r[3]), parseInt(r[4])]);
  data.addRows(newData);
  options = { title: 'Total Views', subtitle: 'ABP News Vs Competitor Channels' };
  chart = new google.visualization.LineChart(document.getElementById('chart'));
  chart.draw(data, options);
}

function updateChart(newdataReturned) {
  data = new google.visualization.DataTable();
  data.addColumn('date', 'Days');
  data.addColumn('number', 'A');
  data.addColumn('number', 'B');
  data.addColumn('number', 'C');
  data.addColumn('number', 'D');
  var newData = newdataReturned.map(r => [new Date(r[0].slice(6, 10), r[0].slice(0, 2), r[0].slice(3, 5)), parseInt(r[1]), parseInt(r[2]), parseInt(r[3]), parseInt(r[4])]);

  data.addRows(newData);
  chart.draw(data, options);
}
</script>

Note:

In this modification, it supposes that your functions getTableDataTV() and getvoddata() at Google Apps Script return the correct values you expect. Please be careful this.

Add new Data Row in Google Visualisation

Question

1 answers

solution1
1 ACCPTED 2021-11-09 05:07:27

Modified script:

Note:

Add new Data Row in Google Visualisation

Question

1 answers

solution1 1 ACCPTED 2021-11-09 05:07:27

Modified script:

Note:

solution1
1 ACCPTED 2021-11-09 05:07:27