Google Analytics Visualisierung Datentabelle 'Avg. Uhrzeit auf Seite 'Format wie 00:00:00

Question

Ich habe die Google Analytics-API-Antwort "ga: avgTimeOnPage" wie "00:00:00" unter Verwendung des folgenden Formats formatiert.

1. Zuordnung der Abfrage wie unten.

\t var referral_pages_Config = { 
 
\t \t \t \t query: { 
 
\t \t \t \t metrics: 'ga:sessions, ga:bounceRate, ga:avgTimeOnPage', 
 
\t \t \t \t dimensions: 'ga:fullReferrer', 
 
\t \t \t \t 'max-results': 6, 
 
\t \t \t \t sort: '-ga:sessions', 
 
\t \t \t \t 'output': 'dataTable' 
 
\t \t \t \t }, 
 
\t \t \t \t chart: { 
 
\t \t \t \t options: { 
 
\t \t \t \t \t width: '100%' 
 
\t \t \t \t } 
 
\t \t \t \t } 
 
\t \t \t };

2. Formatiert die "ga: avgTimeOnPage" Antwort als wie unter Verwendung von "avg_time_val.toHHMMSS();". Es funktionierte gut bis letzten Monat. Aber jetzt wird das Format nicht so aktualisiert, wie ich es geändert habe. Nach meinen Recherchen ist es daher nicht möglich, das Anzeigeformat zu ändern.

\t \t referral_pages.on('success', function(response) { 
 

 
\t \t \t response.dataTable.cols[0].label = 'Page'; 
 
\t \t \t response.dataTable.cols[1].label = 'Page Views'; 
 
\t \t \t response.dataTable.cols[2].label = 'Bounce Rate'; 
 
\t \t \t response.dataTable.cols[3].label = 'Avg. Time on Page'; 
 

 

 

 
\t \t \t var referral_pages = new google.visualization.DataTable(response.dataTable); 
 

 
\t \t \t var formatter = new google.visualization.NumberFormat({ 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t fractionDigits: 2, 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t suffix:'%' 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t }); 
 
\t \t \t var formatter_visiter = new google.visualization.NumberFormat({ 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t pattern:'###,###' 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t }); 
 
\t \t \t formatter_visiter.format(referral_pages, 1); 
 
\t \t \t formatter.format(referral_pages, 2); 
 

 

 
\t \t \t // Format Time as per the User-end 
 
\t \t \t for (var k = 0, profile; profile = response.dataTable.rows[k]; k++) { 
 
\t \t \t \t //alert(profile.c[3].v); 
 
\t \t \t \t var avg_time_val = profile.c[3].v; 
 
\t \t \t \t var formatt_time_val = avg_time_val.toHHMMSS(); 
 
\t \t \t \t profile.c[3].v = formatt_time_val; 
 
\t \t \t } 
 

 
\t \t \t var referral_pages_table = new google.visualization.Table(document.getElementById('referral_pages_container')); 
 
\t \t \t referral_pages_table.draw(referral_pages); 
 
\t \t });

Wenn wir das Format geändert, dass das als NAN angezeigt wird. Jemand führt mir die Lösung, um es zu beheben.

Answer 1

Sie stehen vor diesem Problem, da die 3. Spalte in der DataTable referral_pages ursprünglich vom Typ 'Nummer' ist. Aber wenn Sie mit toHHMMSS formatieren und den Wert ersetzen, wird es eine 'Zeichenfolge'. Wegen dieses Datentypkonflikts sehen Sie NaN. Leider gibt es keine Möglichkeit, den Datentyp für eine Spalte von DataTable nach der Erstellung zu konvertieren.

Die Lösung für Ihr Problem besteht darin, eine DataView zu erstellen. Überprüfen Sie den folgenden Code, ich habe es ausprobiert und getestet - es funktioniert.

referral_pages.on('success', function(response) { 

response.dataTable.cols[0].label = 'Page'; 
response.dataTable.cols[1].label = 'Page Views'; 
response.dataTable.cols[2].label = 'Bounce Rate'; 
response.dataTable.cols[3].label = 'Avg. Time on Page'; 

var referral_pages = new google.visualization.DataTable(response.dataTable); 

var formatter = new google.visualization.NumberFormat({ 
    fractionDigits: 2, 
    suffix:'%' 
}); 
var formatter_visiter = new google.visualization.NumberFormat({ 
    pattern:'#,##,###' 
}); 
formatter_visiter.format(referral_pages, 1); 
formatter.format(referral_pages, 2); 

var columns = []; 

for (var i = 0; i < referral_pages.getNumberOfColumns() - 1; i++) { 
    columns.push(i); 
} 

columns.push({ 
    type: 'string', 
    label: referral_pages.getColumnLabel(3), 
    calc: function (dt, row) { 
     var val = dt.getValue(row, 3); 
     return (val != '' && val != null) ? val.toHHMMSS() : null; 
    } 
}); 

var view = new google.visualization.DataView(referral_pages); 
view.setColumns(columns); 

var referral_pages_table = new google.visualization.Table(document.getElementById('timeline')); 
referral_pages_table.draw(view); 
});