2016-12-28 7 views
0

私はGAからのデータをチャートに表示するために埋め込みAPIを使用していますが、APIは基本的なもの(LINE、COLUMN、BAR、TABLE、GEO) )。Google Chartsの高度な機能でのGA Embed APIの使用

Google Chartsライブラリで埋め込みAPIを使用する方法はありますか?

円チャートの代わりに円チャートを使用するのと同じですか?

は、ここに私のコードです:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>ChartDemo</title> 
</head> 
<body> 
<script> 
(function(w,d,s,g,js,fs){ 
    g=w.gapi||(w.gapi={});g.analytics={q:[],ready:function(f){this.q.push(f);}}; 
    js=d.createElement(s);fs=d.getElementsByTagName(s)[0]; 
    js.src='https://apis.google.com/js/platform.js'; 
    fs.parentNode.insertBefore(js,fs);js.onload=function(){g.load('analytics');}; 
}(window,document,'script')); 
</script> 

<div id="embed-api-auth-container"></div> 
<div id="chart-container"></div> 
<div id="view-selector-container"></div> 

<script> 

gapi.analytics.ready(function() { 

    /** 
    * Authorize the user immediately if the user has already granted access. 
    * If no access has been created, render an authorize button inside the 
    * element with the ID "embed-api-auth-container". 
    */ 
    gapi.analytics.auth.authorize({ 
    container: 'embed-api-auth-container', 
    clientid: 'supersecretclientid.apps.googleusercontent.com' 
    }); 


    /** 
    * Create a new ViewSelector instance to be rendered inside of an 
    * element with the id "view-selector-container". 
    */ 
    var viewSelector = new gapi.analytics.ViewSelector({ 
    container: 'view-selector-container' 
    }); 

    // Render the view selector to the page. 
    viewSelector.execute(); 


    /** 
    * Create a new DataChart instance with the given query parameters 
    * and Google chart options. It will be rendered inside an element 
    * with the id "chart-container". 
    */ 
    var dataChart = new gapi.analytics.googleCharts.DataChart({ 
    query: { 
     metrics: 'ga:sessions', 
     dimensions: 'ga:date', 
     'start-date': '30daysAgo', 
     'end-date': 'yesterday' 
    }, 
    chart: { 
     container: 'chart-container', 
     type: 'COLUMN', 
     options: { 
     width: '100%' 
     } 
    } 
    }); 


    /** 
    * Render the dataChart on the page whenever a new view is selected. 
    */ 
    viewSelector.on('change', function(ids) { 
    dataChart.set({query: {ids: ids}}).execute(); 
    }); 

}); 
</script> 
</body> 
</html> 

答えて

0

、解決策を見つけたgithubのページで見つけることができるSDKをダウンロードして実行する必要がありました。それ以外の場合、gapi.analytics.extステートメントは定義されません...

0

だけでなく、あなたは結果を表示するには、Googleのチャートを使用することができ、あなたが好きな方、サードパーティの可視化ライブラリを選択することができます。ここ

詳しい情報やデモ:https://ga-dev-tools.appspot.com/embed-api/third-party-visualizations/

+0

デモを試みました...(gapi.analytics.extは未定義です)。 GAからデータを取得する方法とチャート(第三者)で取得する方法を知りたいだけです。 –

関連する問題