Googleアナリティクスのデータチャット - 複数のシリーズで1つの折れ線グラフを作成するにはどうすればよいですか？

Question

私は、私が追跡する3種類のイベントがあります。 1日あたりのイベント数を示すこれらのすべてのイベントに対して1つの折れ線グラフを表示したいので、グラフには3つのデータ系列があり、それぞれ異なるeventLabelには1つの系列が必要です。しかし、私が'dimensions': 'ga:date,ga:eventLabel'を渡そうとするとDataChartがエラーになります。「指定された軸のすべてのシリーズは同じデータ型でなければならない」というエラーが表示されます。

私は3つの別々の折れ線グラフとしてすべてのグラフを表示することに戻りました。どのようにこれらを1つに組み合わせるか、それぞれの異なる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%' 
 
     } 
 
     } 
 
    }); 
 
    }

Answer 1

gapi.analytics.googleCharts.DataChartのみ1つのクエリオブジェクトを取ることが可能です。だから、それを使ってあなたが探しているものを達成することは不可能です。

（eventLabelごとに1つずつ）を作成してからgoogle.visualization.data.joinを使用して結び付け、最後にgoogle.visualization.LineChartを使用して折れ線グラフを作成する必要があります。

私は以下のコードを試して、テストしています。 （これは、別のライブラリ - チャートローダと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')); 

これはあなたの問題を解決します。