GoogleAnalytics（GA4）のデータをAPIで読み取って分析する自作アプリ、徐々に改善しています

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<canvas id="myChart"></canvas>

<script>
  const ctx = document.getElementById('myChart');

  // GASから受け取ったデータを入れる
  new Chart(ctx, {
    type: 'line', // 折れ線グラフ
    data: {
      labels: ['1日', '2日', '3日', ...], // 日付
      datasets: [{
        label: 'ユーザー数',
        data: [120, 150, 180, ...], // 数値
        borderColor: '#36A2EB', // 線の色
        tension: 0.4 // 曲線の滑らかさ
      }]
    },
    options: {
      responsive: true,
      plugins: {
        legend: { display: false } // 凡例を消してシンプルに
      }
    }
  });
</script>

// code.js の runAnalysis 関数内 (189行目あたり) を修正

    // ... (前略)
    // ページランキング取得
    let topPages = [];
    try {
      topPages = fetchTopPages(propertyId, dates);
    } catch (e) {
      Logger.log("ランキング取得エラー: " + e.toString());
    }

    // ▼▼▼ 【追加】日別トレンドデータの取得 ▼▼▼
    let dailyTrend = { dates: [], users: [], pvs: [] };
    try {
      dailyTrend = fetchDailySeries(propertyId, dates);
    } catch (e) {
      Logger.log("日別データ取得エラー: " + e.toString());
    }
    // ▲▲▲ 【追加終わり】 ▲▲▲

    // ▼▼▼ EC・アフィリエイト判定とデータ取得 ▼▼▼
    let topProducts = [];
    // ... (中略) ...

    return {
      ga: gaData,
      topPages: topPages,
      dailyTrend: dailyTrend, // ←【追加】これを戻り値に含める
      ecData: {
        isEcSite: isEcSite,
// ... (後略)

// =======================================================
//  9. 【追加】日別推移データの取得 (折れ線グラフ用)
// =======================================================
function fetchDailySeries(propertyId, dates) {
  const request = {
    dateRanges: [{ startDate: dates.currentStart, endDate: dates.currentEnd }],
    dimensions: [{ name: 'date' }],
    metrics: [
      { name: 'activeUsers' },
      { name: 'screenPageViews' }
    ],
    orderBys: [{ dimension: { dimensionName: 'date' } }],
    keepEmptyRows: true
  };

  try {
    const response = AnalyticsData.Properties.runReport(request, 'properties/' + propertyId);
    if (!response.rows) return { dates: [], users: [], pvs: [] };

    const labels = [];
    const users = [];
    const pvs = [];

    response.rows.forEach(row => {
      // 日付フォーマット整形 (YYYYMMDD -> MM/DD)
      const d = row.dimensionValues[0].value;
      const formattedDate = d.substring(4, 6) + '/' + d.substring(6, 8);
      
      labels.push(formattedDate);
      users.push(Number(row.metricValues[0].value));
      pvs.push(Number(row.metricValues[1].value));
    });

    return { dates: labels, users: users, pvs: pvs };
  } catch (e) {
    Logger.log("Trend fetch failed: " + e.toString());
    return { dates: [], users: [], pvs: [] };
  }
}

<div class="metrics-grid" id="metrics-grid"></div>

        <div class="chart-section-wrapper" style="background:#fff; padding:15px; border-radius:8px; border:1px solid #e0e0e0; margin-bottom:25px;">
           <h3 style="margin:0 0 15px 0; font-size:14px; color:#2c3e50; border-left:4px solid #3498db; padding-left:10px;">📈 期間推移 (ユーザー数 vs PV数)</h3>
           <div style="position: relative; height: 300px; width: 100%;">
             <canvas id="mainTrendChart"></canvas>
           </div>
        </div>
        <div id="ec-section" style="display:none; margin-bottom: 25px;">

// index.html の scriptタグ内 renderReport関数 (127行目あたり)

        const ga = result.ga;
        const ai = result.gemini;
        const info = result.siteInfo;
        const topPages = result.topPages;
        const ec = result.ecData;
        const trend = result.dailyTrend; // ←【追加】データを取り出す

// ... (中略: メトリクス描画処理の後、160行目の手前あたり) ...
        
        }); // metricsDef.forEach の閉じカッコ

        // ▼▼▼ 【追加】メイン折れ線グラフの描画 ▼▼▼
        if (trend && trend.dates.length > 0) {
            const ctxTrend = document.getElementById('mainTrendChart').getContext('2d');
            
            // 既存のグラフがあれば破棄（再描画時のバグ防止）
            if (window.myTrendChart instanceof Chart) {
                window.myTrendChart.destroy();
            }

            window.myTrendChart = new Chart(ctxTrend, {
                type: 'line',
                data: {
                    labels: trend.dates,
                    datasets: [
                        {
                            label: 'ユーザー数',
                            data: trend.users,
                            borderColor: '#3498db', // 青
                            backgroundColor: 'rgba(52, 152, 219, 0.1)',
                            borderWidth: 2,
                            tension: 0.3, // 曲線のなめらかさ
                            yAxisID: 'y'
                        },
                        {
                            label: 'ページビュー',
                            data: trend.pvs,
                            borderColor: '#e67e22', // オレンジ
                            backgroundColor: 'rgba(230, 126, 34, 0.1)',
                            borderWidth: 2,
                            borderDash: [5, 5], // 点線にする
                            tension: 0.3,
                            yAxisID: 'y1' // 2軸目を使用
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    interaction: {
                        mode: 'index',
                        intersect: false,
                    },
                    plugins: {
                        legend: { position: 'top' },
                        tooltip: { 
                            backgroundColor: 'rgba(0,0,0,0.8)',
                            padding: 10
                        }
                    },
                    scales: {
                        x: {
                            grid: { display: false }
                        },
                        y: {
                            type: 'linear',
                            display: true,
                            position: 'left',
                            beginAtZero: true,
                            title: { display: true, text: 'ユーザー数' }
                        },
                        y1: {
                            type: 'linear',
                            display: true,
                            position: 'right',
                            grid: { drawOnChartArea: false }, // グリッド線を重ねない
                            beginAtZero: true,
                            title: { display: true, text: 'PV数' }
                        }
                    }
                }
            });
        }
        // ▲▲▲ 【追加終わり】 ▲▲▲

        document.getElementById('analysis-comment').textContent = ai.analysis_comment;