Google Analytics Embed API Server-side Authorization Customization of Charts

Question

I've successfully setup the Embed API Server-side Authorization for Google analytics, however I need to customize some of the colors like they have done here using the regular authorization:

The code they are using to fetch and style the chart is different to the code they give as an example given for server side auth, I've tried mixing the two but no luck.

I am assuming there are various options you can pass through in this section:

          'options': {
            'width': '100%'
          }

I have tried a few options that they are using on the regular authorization example but only one worked (title):

          'options': {
            'width': '100%',
            'title': 'My chart'
          }

I've pasted the full code that is used to fetch a chart using server-side auth:

      var dataChart1 = new gapi.analytics.googleCharts.DataChart({
        query: {
          'ids': 'ga:68742285', // The Demos & Tools website view.
          'start-date': '30daysAgo',
          'end-date': 'yesterday',
          'metrics': 'ga:sessions,ga:users',
          'dimensions': 'ga:date'
        },
        chart: {
          'container': 'chart-1-container',
          'type': 'LINE',
          'options': {
            'width': '100%'
          }
        }
      });
      dataChart1.execute();

And here is what they are using to change the colors using regular auth:

     /**
       * Draw the a chart.js line chart with data from the specified view that
       * overlays session data for the current week over session data for the
       * previous week.
       */
      function renderWeekOverWeekChart(ids) {

        // Adjust `now` to experiment with different days, for testing only...
        var now = moment(); // .subtract(3, 'day');

        var thisWeek = query({
          'ids': ids,
          'dimensions': 'ga:date,ga:nthDay',
          'metrics': 'ga:sessions',
          'start-date': moment(now).subtract(1, 'day').day(0).format('YYYY-MM-DD'),
          'end-date': moment(now).format('YYYY-MM-DD')
        });

        var lastWeek = query({
          'ids': ids,
          'dimensions': 'ga:date,ga:nthDay',
          'metrics': 'ga:sessions',
          'start-date': moment(now).subtract(1, 'day').day(0).subtract(1, 'week')
              .format('YYYY-MM-DD'),
          'end-date': moment(now).subtract(1, 'day').day(6).subtract(1, 'week')
              .format('YYYY-MM-DD')
        });

        Promise.all([thisWeek, lastWeek]).then(function(results) {

          var data1 = results[0].rows.map(function(row) { return +row[2]; });
          var data2 = results[1].rows.map(function(row) { return +row[2]; });
          var labels = results[1].rows.map(function(row) { return +row[0]; });

          labels = labels.map(function(label) {
            return moment(label, 'YYYYMMDD').format('ddd');
          });

          var data = {
            labels : labels,
            datasets : [
              {
                label: 'Last Week',
                fillColor : 'rgba(220,220,220,0.5)',
                strokeColor : 'rgba(220,220,220,1)',
                pointColor : 'rgba(220,220,220,1)',
                pointStrokeColor : '#fff',
                data : data2
              },
              {
                label: 'This Week',
                fillColor : 'rgba(151,187,205,0.5)',
                strokeColor : 'rgba(151,187,205,1)',
                pointColor : 'rgba(151,187,205,1)',
                pointStrokeColor : '#fff',
                data : data1
              }
            ]
          };

          new Chart(makeCanvas('chart-1-container')).Line(data);
          generateLegend('legend-1-container', data.datasets);
        });
      }

Answer 1

I would play around with this code statement.

var options = {
    colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6']
};

The option to change the colours of the chart goes under the 'options' of the chart. The particular chart I grabbed this code from was a pie chart, so I am not entirely sure how it will work with your Line chart. Play around with it and I am sure you will find a way to change the colours with the code I have posted.