Integrating Heat Map Calendor to Blogger

A. Setting up Google sheets

1. Make two columns in your spreadsheet. The first column should be called "Date" and the second column should be called "Visitors".

B. Add get and post methods in Apps Script

Your Spreadsheet ID, is in between d/{spreadsheet ID}/edit

const SPREADSHEET_ID = "Your spreadsheet ID";
const SHEET_NAME = "Sheet1";

function doGet(e) {
  if (e.parameter.log) {
    incrementToday();
  }
  return getHeatmapData();
}

function incrementToday() {
  const ss = SpreadsheetApp.openById(SPREADSHEET_ID);
  const sheet = ss.getSheetByName(SHEET_NAME);
  const today = Utilities.formatDate(new Date(), ss.getSpreadsheetTimeZone(), "yyyy-MM-dd");
  const data = sheet.getDataRange().getValues();

  let found = false;
  for (let i = 0; i < data.length; i++) {
    if (data[i][0]) {
      const rowDate = Utilities.formatDate(new Date(data[i][0]), ss.getSpreadsheetTimeZone(), "yyyy-MM-dd");
      if (rowDate === today) {
        sheet.getRange(i + 1, 2).setValue(Number(data[i][1] || 0) + 1);
        found = true;
        break;
      }
    }
  }
  if (!found) {
    sheet.appendRow([today, 1]);
  }
}


function getHeatmapData() {
  const ss = SpreadsheetApp.openById(SPREADSHEET_ID);
  const sheet = ss.getSheetByName(SHEET_NAME);
  const data = sheet.getDataRange().getValues();
  const result = {};

  data.forEach(row => {
    if (row[0] && row[1]) {
      result[Math.floor(new Date(row[0]).getTime() / 1000)] = Number(row[1]);
    }
  });

  const callback = "handleCalData"; // JSONP callback
  const json = JSON.stringify(result);
  return ContentService.createTextOutput(callback + "(" + json + ")")
                       .setMimeType(ContentService.MimeType.JAVASCRIPT);
}

👆After deploy your app script, Your App URL is here👇

C. Goto HTML Theme editor

Add following code just before </home> tab

<script src='https://d3js.org/d3.v7.min.js'/>
<script src='https://unpkg.com/cal-heatmap/dist/cal-heatmap.min.js'/>
<link href='https://unpkg.com/cal-heatmap/dist/cal-heatmap.css' rel='stylesheet'/>

D. Add gadget in Blogger

1. Create a new gadget in blogger

2. Add the code below

<!-- Heatmap Gadget (dynamic logging + fetch) -->
<div id="cal-heatmap" style="width:100%; max-width:360px; margin:auto;"></div>

<link rel="stylesheet" href="https://unpkg.com/cal-heatmap/dist/cal-heatmap.css" />
<script src="https://unpkg.com/cal-heatmap/dist/cal-heatmap.min.js"></script>

3. Fill your app URL in the code below. And add the code too.

<script>
function handleCalData(json) {
  const arr = Object.entries(json || {}).map(([sec,val]) => ({
    date: Number(sec) * 1000,
    value: Number(val) || 0
  }));
  if (!arr.length) return;

  const maxVal = Math.max(...arr.map(i => i.value), 5);
  const cal = new CalHeatmap();
  cal.paint({
    itemSelector: "#cal-heatmap",
    date: { start: new Date(arr[0].date) },
    range: 3,
    domain: { type: "month" },
    subDomain: { type: "day" },
    data: { source: arr, x: "date", y: "value" },
    scale: { color: { type: "linear", range: ['#ebedf0','#9be9a8','#40c463','#30a14e','#216e39'], domain: [0, maxVal] } }
  });
}

document.addEventListener('DOMContentLoaded', function() {
  const WEB_APP_URL = "YOUR_APP_URL";

  // log visit
  (new Image()).src = WEB_APP_URL + "?log=1&_=" + Date.now();

  // load JSONP
  setTimeout(() => {
    const script = document.createElement('script');
    script.src = WEB_APP_URL; // will execute handleCalData(json)
    document.body.appendChild(script);
  }, 600);
});
</script>

For more information visit: CalHeatMap