<section class="aj-charts-section" aria-label="Readership statistics charts">
<style>
.aj-charts-section{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:14px;color:#1a1a1a;margin:2rem 0}
.aj-charts-section *{box-sizing:border-box}
.aj-dash-header{margin-bottom:1.2rem}
.aj-dash-header h3{font-size:17px;font-weight:600;color:#0f3d6e;margin:0 0 6px}
.aj-dash-header p{font-size:15px;font-weight:600;color:#185FA5;margin:0;letter-spacing:0.01em}
.aj-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-bottom:1.6rem}
.aj-kpi{background:#f4f8fd;border:1px solid #d0e4f5;border-radius:8px;padding:12px 14px}
.aj-kpi-label{font-size:11px;color:#666;text-transform:uppercase;letter-spacing:.04em;margin-bottom:3px}
.aj-kpi-val{font-size:19px;font-weight:700;color:#0f3d6e;line-height:1.2}
.aj-kpi-sub{font-size:11px;color:#999;margin-top:2px}
.aj-chart-card{background:#fff;border:1px solid #e0e0e0;border-radius:10px;padding:1.2rem;margin-bottom:1.2rem}
.aj-chart-card h4{font-size:14px;font-weight:600;color:#0f3d6e;margin:0 0 3px}
.aj-chart-card p{font-size:12px;color:#888;margin:0 0 10px}
.aj-legend{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:10px;font-size:12px;color:#555}
.aj-leg-dot{width:10px;height:10px;border-radius:2px;display:inline-block;margin-right:4px;vertical-align:middle}
.aj-spark-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin-top:1rem}
.aj-spark{background:#f9f9f9;border:1px solid #eee;border-radius:8px;padding:10px 12px}
.aj-spark-month{font-size:12px;font-weight:600;color:#1a1a1a}
.aj-spark-bar-bg{height:5px;background:#e8e8e8;border-radius:3px;margin:5px 0}
.aj-spark-bar{height:5px;border-radius:3px;background:#2779bd}
.aj-spark-val{font-size:11px;color:#888}
.aj-footer{font-size:11px;color:#bbb;text-align:right;margin-top:8px}
</style>

<div class="aj-dash-header">
  <h3>&#128218; Readership Statistics</h3>
  <p>Jul 2026 – Aug 2025 &nbsp;·&nbsp; ausjournal.com</p>
</div>

<div class="aj-kpi-grid">
  <div class="aj-kpi"><div class="aj-kpi-label">Total visits</div><div class="aj-kpi-val">217,201</div><div class="aj-kpi-sub">unique sessions</div></div>
  <div class="aj-kpi"><div class="aj-kpi-label">Total hits</div><div class="aj-kpi-val">4,696,111</div><div class="aj-kpi-sub">server requests</div></div>
  <div class="aj-kpi"><div class="aj-kpi-label">Pages served</div><div class="aj-kpi-val">4,097,374</div><div class="aj-kpi-sub">HTML page views</div></div>
  <div class="aj-kpi"><div class="aj-kpi-label">Data served</div><div class="aj-kpi-val">68.5 GB</div><div class="aj-kpi-sub">bandwidth</div></div>
  <div class="aj-kpi"><div class="aj-kpi-label">Best month</div><div class="aj-kpi-val" style="font-size:15px">Apr 2026</div><div class="aj-kpi-sub">by total hits</div></div>
</div>

<div class="aj-chart-card">
  <h4>Monthly visits</h4>
  <p>Unique reader sessions per month</p>
  <div class="aj-legend"><span><span class="aj-leg-dot" style="background:#185FA5"></span>Monthly visits</span></div>
  <div style="position:relative;width:100%;height:220px">
    <canvas id="ajc1" role="img" aria-label="Bar chart of monthly visits">Monthly visits data for ausjournal.com</canvas>
  </div>
</div>

<div class="aj-chart-card">
  <h4>Hits vs pages served</h4>
  <p>Total server hits compared with HTML pages viewed</p>
  <div class="aj-legend">
    <span><span class="aj-leg-dot" style="background:#185FA5"></span>Hits</span>
    <span><span class="aj-leg-dot" style="background:#1D9E75"></span>Pages</span>
  </div>
  <div style="position:relative;width:100%;height:240px">
    <canvas id="ajc2" role="img" aria-label="Line chart of hits vs pages">Hits and pages served trend for ausjournal.com</canvas>
  </div>
</div>

<div class="aj-chart-card">
  <h4>Data served per month (GB)</h4>
  <p>Bandwidth — reflects content depth and file downloads</p>
  <div class="aj-legend"><span><span class="aj-leg-dot" style="background:#EF9F27"></span>GB served</span></div>
  <div style="position:relative;width:100%;height:200px">
    <canvas id="ajc3" role="img" aria-label="Bar chart of data served in gigabytes">GB served per month for ausjournal.com</canvas>
  </div>
</div>

<div class="aj-spark-grid" id="aj-spark-grid"></div>

<p class="aj-footer">Last refreshed: 2026-07-16 20:24:33 &nbsp;·&nbsp; Source: Webalizer / server access logs</p>

</section>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js"></script>
<script>
(function(){
  var labels  = ["Aug 2025","Sep 2025","Oct 2025","Nov 2025","Dec 2025","Jan 2026","Feb 2026","Mar 2026","Apr 2026","May 2026","Jun 2026","Jul 2026"];
  var visits  = [9935,13273,16150,21451,15254,20406,16527,18957,21104,25277,20320,18547];
  var hits    = [62745,71969,79939,79019,435382,593788,533627,629247,692954,667524,494148,355769];
  var pages   = [31603,35355,48951,51653,401476,549248,498446,567804,568518,593603,442882,307835];
  var kbArr   = [2296405,2768385,3431767,5650693,5115507,7665781,5048942,5659845,9508143,10810008,8817720,5060972];
  var gbArr   = kbArr.map(function(v){return parseFloat((v/1048576).toFixed(2));});

  var gridC = 'rgba(0,0,0,0.06)';
  var tickC = '#aaa';
  var fmt = function(v){return v>=1000000?(v/1000000).toFixed(1)+'M':v>=1000?Math.round(v/1000)+'K':v;};

  var baseScales = function(yfmt){return{
    x:{grid:{color:gridC},ticks:{color:tickC,font:{size:10},autoSkip:false,maxRotation:45}},
    y:{grid:{color:gridC},ticks:{color:tickC,font:{size:10},callback:yfmt}}
  };};

  new Chart(document.getElementById('ajc1'),{type:'bar',data:{labels:labels,datasets:[{data:visits,backgroundColor:'#185FA5',borderRadius:3,borderSkipped:false}]},options:{responsive:true,maintainAspectRatio:false,plugins:{legend:{display:false},tooltip:{callbacks:{label:function(c){return c.parsed.y.toLocaleString()+' visits';}}}},scales:baseScales(fmt)}});

  new Chart(document.getElementById('ajc2'),{type:'line',data:{labels:labels,datasets:[
    {label:'Hits',data:hits,borderColor:'#185FA5',backgroundColor:'rgba(24,95,165,0.07)',tension:0.3,fill:true,borderWidth:2,pointRadius:3,pointBackgroundColor:'#185FA5',borderDash:[]},
    {label:'Pages',data:pages,borderColor:'#1D9E75',backgroundColor:'rgba(29,158,117,0.06)',tension:0.3,fill:true,borderWidth:2,pointRadius:3,pointBackgroundColor:'#1D9E75',borderDash:[4,3]}
  ]},options:{responsive:true,maintainAspectRatio:false,plugins:{legend:{display:false},tooltip:{callbacks:{label:function(c){return c.dataset.label+': '+c.parsed.y.toLocaleString();}}}},scales:baseScales(fmt)}});

  new Chart(document.getElementById('ajc3'),{type:'bar',data:{labels:labels,datasets:[{data:gbArr,backgroundColor:'#EF9F27',borderRadius:3,borderSkipped:false}]},options:{responsive:true,maintainAspectRatio:false,plugins:{legend:{display:false},tooltip:{callbacks:{label:function(c){return c.parsed.y.toFixed(2)+' GB';}}}},scales:baseScales(function(v){return v.toFixed(1)+' GB';})}});

  var maxV = Math.max.apply(null,visits);
  var grid = document.getElementById('aj-spark-grid');
  labels.forEach(function(lbl,i){
    var pct = Math.round((visits[i]/maxV)*100);
    var d = document.createElement('div');
    d.className = 'aj-spark';
    d.innerHTML = '<div class="aj-spark-month">'+lbl+'</div>'
      +'<div class="aj-spark-bar-bg"><div class="aj-spark-bar" style="width:'+pct+'%"></div></div>'
      +'<div class="aj-spark-val">'+visits[i].toLocaleString()+' visits</div>';
    grid.appendChild(d);
  });
})();
</script>