Embed api를 사용하여 단일 페이지에 여러 차트 표시

단일 페이지에서 embed api를 사용하여 두 개의 타임 라인 Google Analytics 차트를 표시하고 싶습니다. 단 하나의 차트 만 나타납니다. 첫 차트에서 이탈률을 표시하고 싶고 두 번째 차트에 표시하고 싶습니다. 세션을 표시하십시오. 제발이 문제에 대한 해결책을주십시오. 도움을 주시면 감사하겠습니다.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

것은 @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를 사용하여 단일 페이지에 여러 차트 표시

답변

관련 문제