Google Calendar Chart

small fiddle reading data from json and showing data in a calendar chart

HTML

<script src="https://www.google.com/jsapi"></script>
<div id="calendar_basic" style="width: 1000px; height: 1000px;"></div>

JavaScript

google.load("visualization", "1.1", {
  packages: ["calendar"]
});

google.setOnLoadCallback(drawChart);

function drawChart() {

  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn({type: 'date'});
  dataTable.addColumn({type: 'number'});

  dataTable.addRows([
    [new Date(2012, 1, 1), 1],
    [new Date(2013, 1, 1), 2],
    [new Date(2014, 1, 1), 3],
    [new Date(2015, 1, 1), 4]
  ]);

  var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));
  var options = {};

  google.visualization.events.addListener(chart, 'ready', swapYears);
  chart.draw(dataTable, options);
}

function swapYears() {
  var yearTexts = document.querySelectorAll('[font-size="50"]');

  var years = [];
  yearTexts.forEach(function(text) {
    years.push(text.innerHTML);
  });
  years.reverse();

  for (var i = 0; i < yearTexts.length; i++) {
    yearTexts[i].innerHTML = years[i];
  }
}