CODEWITHSUNDEEP
google-analyticsgoogle-visualization
Patrick Finnigan
Patrick Finnigan

Reputation: 1947

Google Analytics DataChart - how do I create a single line chart with multiple series?

I have 3 different types of events that I track. I want to display a single line chart for all these events showing the event count per day - so there should be 3 data series in the chart, one series for each different eventLabel. However, the DataChart complains if I try to pass 'dimensions': 'ga:date,ga:eventLabel' - it gives me error: "All series on a given axis must be of the same data type".

So, I have reverted to displaying all the charts as 3 separate line graphs. How do I combine these into 1, with different color lines for each different eventLabel?

  for (var i = 0; i < eventLabels.length; ++i) {
    var chart1 = new gapi.analytics.googleCharts.DataChart({
      query: {
        'ids': myID,
        'start-date': '30daysAgo',
        'end-date': 'today',
        'metrics': 'ga:totalEvents',
        'dimensions': 'ga:date',
        'filters': baseFilters + ";ga:eventLabel==" + eventLabel[i]
      },
      chart: {
        'container': 'chart-' + i + '-container',
        'type': 'LINE',
        'options': {
          'width': '100%'
        }
      }
    });
  }

3 charts

Upvotes: 2

Views: 1067

Answers (1)

Sasank Mukkamala
Sasank Mukkamala

Reputation: 1574

gapi.analytics.googleCharts.DataChart is able to take only one query object. So it is not possible to achieve what you are looking for using that.

You have to create three gapi.analytics.report.Data (one for each of your eventLabels) and then tie them together using a google.visualization.data.join and finally use that to create a line chart by using google.visualization.LineChart.

I have tried and tested the following code and it works. (It needs different libraries - charts loader and jsapi). 

var data1 = new gapi.analytics.report.Data({
    query: {
        'ids': yourId,
        'dimensions': 'ga:date',
        'metrics': 'ga:totalEvents',
        'start-date': '30daysAgo',
        'end-date': 'yesterday',
        'filters': 'ga:eventLabel==' + eventLabel[0],
        'output': 'dataTable'
    }
});

var data2 = new gapi.analytics.report.Data({
    query: {
        'ids': yourId,
        'dimensions': 'ga:date',
        'metrics': 'ga:totalEvents',
        'start-date': '30daysAgo',
        'end-date': 'yesterday',
        'filters': 'ga:eventLabel==' + eventLabel[1],
        'output': 'dataTable'
    }
});

data1.on('success', function(response1) {
    var table1 = new google.visualization.DataTable(response1.dataTable);
    data2.execute();
    data2.on('success', function(response2) {
        var table2 = new google.visualization.DataTable(response2.dataTable);
        var dataFinal = google.visualization.data.join(table1, table2, 'full', [[0,0]],[1],[1]);
        dataFinal.setColumnLabel(1, eventLabel[0]);
        dataFinal.setColumnLabel(2, eventLabel[1]);
        chart.draw(dataFinal, {'interpolateNulls': true});
        chart.draw(google.visualization.arrayToDataTable(response2.rows));
    });
});


data1.execute();
var chart = new google.visualization.LineChart(document.getElementById('timeline'));

Hope this solves your problem.

Upvotes: 2

Related Questions