Google Charts
Google Charts Introduction Getting Started Area Charts Bar Charts Bubble Charts Calendar Charts Candlestick Charts Column Charts Combination Chart Gauge Chart Geo Charts Histogram Charts Line Charts Maps Organization Chart Pie Charts Sankey Charts Scatter Charts Stepped Area Charts Table Chart Trendline Charts Wordtree Charts

Google Calendar Chart

A calendar chart is a visualization used to show activity over the course of a long span of time, such as months or years.

They're best used when you want to illustrate how some quantity varies depending on the day of the week, or how it trends over time.

A calendar chart is rendered within the browser using SVG or VML.

Like all Google charts, calendar charts display tooltips when the user hovers over the data.


Basic Calendar Chart

The following example shows how to draw a basic calendar chart, using google charts API:

Each square in a calendar chart represents a day.

The days of the week are labeled with the first letters of Sunday through Saturday.

Months are identified by dark grey lines.

Years are always on the left edge of the chart.


Example Explained

First add a <div> element with the id "chart-div" and set width and height:

<!DOCTYPE html> <html lang="en-US"> <body> <div id="chart-div" style="width:100%; height:350px;"></div> </body> </html>

Then add a reference to the Chart API:

<script src="https://www.gstatic.com/charts/loader.js"></script>

Finally add a JavaScript function:

// Load the calendar package and set a callback google.charts.load('current', {'packages':['calendar']}); google.charts.setOnLoadCallback(drawChart); // Callback that creates and populates a data table function drawChart() { // Create the data table var data = new google.visualization.DataTable(); data.addColumn({ type: 'date', id: 'Date' }); data.addColumn({ type: 'number', id: 'Students' }); data.addRows([ [ new Date(2018, 3, 13), 50 ], [ new Date(2018, 3, 14), 50 ], [ new Date(2018, 3, 15), 49 ], [ new Date(2018, 3, 16), 48 ], [ new Date(2018, 3, 17), 50 ], // Many rows omitted for brevity [ new Date(2019, 5, 13), 40 ], [ new Date(2019, 5, 19), 32 ], [ new Date(2019, 5, 23), 45 ], [ new Date(2019, 5, 24), 36 ], [ new Date(2019, 5, 30), 45 ] ]); // Set chart options var options = { title: "Attendance" }; // Display the chart inside the <div> element with id="chart-div" var chart = new google.visualization.Calendar(document.getElementById('chart-div')); chart.draw(data, options); }


Calendar with Customized Colors

Currently, the color of the data cells can't be customized, although that will change in the next release of Google Charts.

Months are identified by dark grey lines, and can be customized with calendar.monthLabel.

The years in calendar charts are always on the left edge of the chart, and can be customized with calendar.yearLabel.

Days with no data values can be customized with the noDataPattern option.

// Set chart options var options = { title: "Attendance", noDataPattern: {backgroundColor: '#76a7fa', color: '#a0c3ff'}, calendar: { monthLabel: { fontName: 'Times-Roman', fontSize: 12, color: '#981b48', bold: true, italic: true }, unusedMonthOutlineColor: { stroke: '#bc5679', strokeOpacity: 0.8, strokeWidth: 1 }, yearLabel: { fontName: 'Times-Roman', fontSize: 32, color: '#1A8763', bold: true, italic: true } } };
Run code