Applying Script Library for Timeline

Question

This is a follow up to my previous question. I apologize if this is too complex to answer here.

I am trying to be able to show my data in a timeline view. I found a timeline script from Google here: https://developers.google.com/chart/interactive/docs/gallery/timeline

But I'm not sure I am doing this correctly. I'm assuming I am supposed to:

Add https://www.gstatic.com/charts/loader.js under the Settings section of my app.

Then am I inserting this code as a client script?

google.charts.load('current', {'packages':['timeline']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var container = document.getElementById('timeline');
        var chart = new google.visualization.Timeline(container);
        var dataTable = new google.visualization.DataTable();

        dataTable.addColumn({ type: 'string', id: 'President' });
        dataTable.addColumn({ type: 'date', id: 'Start' });
        dataTable.addColumn({ type: 'date', id: 'End' });
        dataTable.addRows([
          [ 'Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
          [ 'Adams',      new Date(1797, 2, 4),  new Date(1801, 2, 4) ],
          [ 'Jefferson',  new Date(1801, 2, 4),  new Date(1809, 2, 4) ]]);

        chart.draw(dataTable);
      }

If so, I'm confused as I am getting an error: drawChart was used before it was defined.

I was then HOPING I would swap out 'Washington' for @datasources.item.FieldName and the dates for @datasources.item.StartDate and @datasources.item.EndDate.

But maybe I am totally misunderstanding how this could actually work.

Also to actually show the table would I be using an HTML widget?

Thank you for any help anyone could offer.

Answer 1

You have many questions in one post, I will only answer the first one. It should be trivial to show your own data from a model object.

First the result: :-)

Steps:

1. In App Settings, under External Resources, add JavaScript URL: https://www.gstatic.com/charts/loader.js

2. The client script should look like this:

   function showChart(widget){
       google.charts.load('current', {'packages':['timeline']});
       function drawChart() {
          var container = widget.getElement();
          var chart = new google.visualization.Timeline(container);
          var dataTable = new google.visualization.DataTable();
          dataTable.addColumn({ type: 'string', id: 'President' });
          dataTable.addColumn({ type: 'date', id: 'Start' });
          dataTable.addColumn({ type: 'date', id: 'End' });
          dataTable.addRows([
             [ 'Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
             [ 'Adams',      new Date(1797, 2, 4),  new Date(1801, 2, 4) ],
             [ 'Jefferson',  new Date(1801, 2, 4),  new Date(1809, 2, 4) ]]);
         chart.draw(dataTable);
       }
       google.charts.setOnLoadCallback(drawChart);
   }
   

Note that Google uses non-standard Javascript, where it is required that methods be declared before they are used, so the setOnLoadCallback must take place after the declaration of drawChart. Also note the use of widget.getElement() to get a DOM object from an App Maker widget.

3. Add an HTML widget to a page, give it the desired width and height, and on its onAttach event, add a call to showChart(widget);