Google Calendar Chart

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

by hmahida

HTML

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

JavaScript

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

function drawChart() {
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'date', id: 'Date' });
    dataTable.addColumn({ type: 'number', id: 'Rerports' });
    
    var json = [
        {
            "Date": "2014-January-15",
            "Frequencies": 11
        }, 
        {
            "Date": "2014-January-8",
            "Frequencies": 22
        }, 
        {
            "Date": "2014-January-10",
            "Frequencies": 11
        }
    ];
    
    for (var i in json) {
        dataTable.addRow([ new Date(json[i].Date), json[i].Frequencies ]);
    }
    
    var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));
    
    var options = {
        title: "Calendar Chart",
        height: 350,
    };
    
    chart.draw(dataTable, options);
}