Sameer/index.html at main · mohammed-git1/Sameer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fundraiser Dashboard</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/papaparse@5.3.2/papaparse.min.js"></script>
<style>
  body { font-family: Arial; display: flex; padding: 20px; background: #f9f9f9; }
  .total-box { flex:1; font-size:2rem; font-weight:bold; padding:20px; background:#ecf0f1; border-radius:12px; }
  .chart-box { flex:2; padding:20px; background:white; border-radius:12px; }
  canvas { max-width:100%; height:400px; }
</style>
</head>
<body>
<div class="total-box">Total Raised: $<span id="total">0</span></div>
<div class="chart-box"><canvas id="fundraiserChart"></canvas></div>
<script>
const sheetURL = "https://docs.google.com/spreadsheets/d/e/2PACX-1vQivThcyb5au9uKLP364swkmGwkM4Dtdy5uOuN8G6xxDJS2q1nnhUxjaBaPWj_SrOJPcGaU-Sa4-P9C/pub?output=csv"; // replace with your published CSV link

function updateChart(data){
  const filtered = data.filter(r => r.Date && r.Amount);
  const labels = filtered.map(r=>r.Date);
  const amounts = filtered.map(r=>Number(r.Amount));
  const total = amounts.reduce((a,b)=>a+b,0);
  document.getElementById("total").textContent = total.toLocaleString();
  const ctx = document.getElementById("fundraiserChart").getContext("2d");
  if(window.chart) window.chart.destroy();
  window.chart = new Chart(ctx,{
    type:"line",
    data:{ labels, datasets:[{ label:"Donations", data:amounts, borderColor:"#3498db", backgroundColor:"rgba(52,152,219,0.4)", fill:true, tension:0.3 }]},
    options:{ responsive:true }
  });
}

function fetchData(){
  Papa.parse(sheetURL,{ download:true, header:true, complete: results=>{
    localStorage.setItem("fundraiserData", JSON.stringify(results.data));
    updateChart(results.data);
  }});
}

// Load cached immediately
const cached = localStorage.getItem("fundraiserData");
if(cached) updateChart(JSON.parse(cached));

fetchData();
// Auto-refresh every 5 seconds
setInterval(fetchData, 5000);
</script>
</body>
</html>