使用Embed api在單個頁面上顯示多個圖表

我想在單個頁面中使用嵌入api顯示兩個時間線谷歌分析圖表，但只有一個出現。第一個圖表我想顯示跳出率，第二個圖表中我想顯示sessions.Please給我一個解決這個問題的。任何幫助將不勝感激。使用Embed api在單個頁面上顯示多個圖表

這裏是代碼。

<!DOCTYPE html> 
<html> 
<head> 
    <title>Embed API Demo</title> 
</head> 
<body> 

<!-- Step 1: Create the containing elements. --> 

<section id="auth-button"></section> 
<section id="view-selector"></section> 
<section id="timeline"></section> 
<section id="sessionTimeline"></section> 
<!-- Step 2: Load the library. --> 

<script> 
(function(w,d,s,g,js,fjs){ 
    g=w.gapi||(w.gapi={});g.analytics={q:[],ready:function(cb){this.q.push(cb)}}; 
    js=d.createElement(s);fjs=d.getElementsByTagName(s)[0]; 
    js.src='https://apis.google.com/js/platform.js'; 
    fjs.parentNode.insertBefore(js,fjs);js.onload=function(){g.load('analytics')}; 
}(window,document,'script')); 
</script> 

<script> 
gapi.analytics.ready(function() { 

    // Step 3: Authorize the user. 

    var CLIENT_ID = '************************************'; 


    gapi.analytics.auth.authorize({ 
    container: 'auth-button', 
    clientid: CLIENT_ID, 
    }); 

    // Step 4: Create the view selector. 

    var viewSelector = new gapi.analytics.ViewSelector({ 
    container: 'view-selector' 
    }); 

    // Step 5: Create the timeline chart. 

    var timeline = new gapi.analytics.googleCharts.DataChart({ 
    reportType: 'ga', 
    query: { 
     'dimensions': 'ga:date', 
     'metrics': 'ga:bounceRate', 
     'start-date': '100daysAgo', 
     'end-date': 'yesterday', 
    }, 
    chart: { 
     type: 'LINE', 
     container: 'timeline' 
    } 
    }); 

    var sessionTimeline = new gapi.analytics.googleCharts.DataChart({ 
    reportType: 'ga', 
    query: { 
     'dimensions': 'ga:date', 
     'metrics': 'ga:sessions', 
     'start-date': '100daysAgo', 
     'end-date': 'yesterday', 
    }, 
    chart: { 
     type: 'LINE', 
     container: 'sessionTimeline' 
    } 
    }); 

    // Step 6: Hook up the components to work together. 

    gapi.analytics.auth.on('success', function(response) { 
    viewSelector.execute(); 
    }); 

    viewSelector.on('change', function(ids) { 
    var newIds = { 
     query: { 
     ids: ids 
     } 
    } 
    timeline.set(newIds).execute(); 
    }); 
}); 
</script> 
</body> 
</html>

來源

2014-10-03 Wasfa

你只是調用timeline.set（newIds）.execute（）;只有那一個將要展示。 sessionTimeline.set（newIds）.execute（）; https://github.com/googleanalytics/embed-api-demos/blob/master/site/2-multiple-views.html – DaImTo 2014-10-03 13:27:20

由於@DalmTo評論，你永遠在sessionTimeline圖表上調用execute。如果你改變以下內容，它應該工作：

viewSelector.on('change', function(ids) { 
    var newIds = { 
    query: { 
     ids: ids 
    } 
    } 
    timeline.set(newIds).execute(); 
    sessionTimeline.set(newIds).execute(); 
});

來源

2015-02-04 18:28:44

使用Embed api在單個頁面上顯示多個圖表

回答

相關問題