I am fetching data table from google sheet, but Pie chart is unable to read the Array. I am getting below error on console.

Uncaught Error: Unknown type of column header: 1

I am using below script to get the data from Google Spreadsheet.

Code.gs:

function vodPiechart() {
  const ss = SpreadsheetApp.openById("");
  const sw = ss.getSheetByName("Pie_Chart_Data");
  var data = sw.getRange (1,1,3, 2).getValues();
  return data
}

HTML Script (from Google Charts)

<script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(getData);
      function getData(){
        google.script.run.withSuccessHandler(drawChart).vodPiechart();
      }
      function drawChart(dataReturened) {
      var data = google.visualization.arrayToDataTable(dataReturened);

        console.log(dataReturened);

        var options = {
          title: 'My Channel',
          is3D: true,
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
        chart.draw(data, options);
      }
    </script>

console.log of dataReturned:

Array(3) [ (2) […], (2) […], (2) […] ]
​0: Array [ "Task", "Views" ]
​1: Array [ "Channel A", 2854170 ]
​2: Array [ "CHannel B", 240222 ]
​length: 3
​<prototype>: Array []

Could anyone please tell me, what I am doing wrong here?

THANK YOU

CodePudding user response：

something about the data is incorrect.

the error message you received is thrown when column headings do not exist in the data.
or the value of the column heading is not a string.

Uncaught Error: Unknown type of column header: 1

in this case, the number 1 is trying to be used as a column heading.

see following example, the following error will be thrown.

Uncaught Error: Unknown type of column header: 2854170

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ["Channel A", 2854170],
    ["Channel B", 240222],
  ]);

  var options = {
    title: 'My Channel',
    is3D: true,
  };

  var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
  chart.draw(data, options);
});

---

the arrayToDataTable method has a second, boolean argument.
when set to true, it will create the data table without column headings,
and use the first row as data.

var data = google.visualization.arrayToDataTable([
  ["Channel A", 2854170],
  ["Channel B", 240222],
], true);  // <-- first row is data

there are really no use for column headings in a pie chart,
because the labels are provided on each row.

try adding the boolean argument for resolution.

see following working snippet...

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ["Channel A", 2854170],
    ["Channel B", 240222],
  ], true);

  var options = {
    title: 'My Channel',
    is3D: true,
  };

  var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
  chart.draw(data, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="piechart_3d"></div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>