CODEWITHSUNDEEP
google-apps-scriptchartsgoogle-visualization
DggYuki
DggYuki

Reputation: 25

How to create a bar chart that has a column of time of day in Google apps script

I tried to create a stacked bar chart that has a column of the time of day using google apps script. It is like following chart. enter image description here

I created the following code of google apps script. But, it doesn't work.

function createSample(){
  var data = Charts.newDataTable()
    .addColumn(Charts.ColumnType.STRING, "date")
    .addColumn(Charts.ColumnType.TIMEOFDAY, "A")  // TIMEOFDAY is not defined in google apps script
    .addColumn(Charts.ColumnType.TIMEOFDAY, "B")  // TIMEOFDAY is not defined in google apps script
    .addRow(["2/22", [10, 00, 00], [10, 00, 00]])
    .addRow(["2/23", [8, 00, 00], [8, 00,00]])
    .addRow(["2/24", [5, 00, 00], [5, 00, 00]])
    .build();
  
  var chart = Charts.newColumnChart()
    .setDataTable(data)
    .setStacked()
    .build();

}

I think google chart can express a bar chart with time of day column. But I don't know how to create it in google apps script.

Upvotes: 0

Views: 416

Answers (1)

Cooper
Cooper

Reputation: 64052

Drawing a chart with Google Visualization API

gs:

function showChartDialog() {
  var ui=HtmlService.createHtmlOutputFromFile('ah2').setHeight(500).setWidth(500);
  SpreadsheetApp.getUi().showModelessDialog(ui, 'Chart')
}

html:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script>google.charts.load('current', {'packages':['corechart','bar']});</script>
  </head>
  <body>
  <div id="cht"></div><input type="button" value="Draw" onClick="createSample();" />
  <script>
    function createSample(){
      var data = new google.visualization.DataTable();
      data.addColumn('date', "Date");
      data.addColumn('timeofday', "A"); 
      data.addColumn('timeofday', "B"); 
      data.addRow([new Date(2020,2,22),[22,00,00],[22,00,00]]);
      data.addRow([new Date(2020,2,23),[20,00,00],[20,00,00]]);
      data.addRow([new Date(2020,2,24),[17,00,00],[17,00,00]]);
      var options = {
        title: 'Column Chart',
        width: 600,
        height: 400,
        bar: { groupWidth: '75%' },
        isStacked: true
        };
      var chart=new google.visualization.ColumnChart(document.getElementById('cht'));
      chart.draw(data,options)
    }
  </script>
  </body>
</html>

enter image description here

Upvotes: 1

Related Questions