Google Charts - Google Charts tutorial - Calendar Charts - chart js - google graphs - google charts examples




What is 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.

Chart Type:

Sr. No. Chart Type / Description
1 Basic Calendar

Basic Calendar chart

2 Calendar with customized colors

Customized Calendar Chart

Example:

  • Let's say we wanted to display how the attendance for a sports team varied throughout the season.
  • With a calendar chart, we can use brightness to indicate the values and let people see trends at a glance:
 view of calendar charts in google chart

Learn Google charts - Google charts tutorial - view of calendar charts in google chart - Google charts examples - Google charts programs

  • You can mouse over the individual days to see the underlying data values.
  • To create a calendar chart, load the calendar package and then create two columns, one for the dates and one for the values. (An optional third column for customized styling is coming in a future Google Charts release.)
  • Then fill in your rows with date-value pairs, as shown below.

Sample Code:

 Tryit<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["calendar"]});
      google.charts.setOnLoadCallback(drawChart);

   function drawChart() {
       var dataTable = new google.visualization.DataTable();
       dataTable.addColumn({ type: 'date', id: 'Date' });
       dataTable.addColumn({ type: 'number', id: 'Won/Loss' });
       dataTable.addRows([
          [ new Date(2012, 3, 13), 37032 ],
          [ new Date(2012, 3, 14), 38024 ],
          [ new Date(2012, 3, 15), 38024 ],
          [ new Date(2012, 3, 16), 38108 ],
          [ new Date(2012, 3, 17), 38229 ],
          // Many rows omitted for brevity.
          [ new Date(2013, 9, 4), 38177 ],
          [ new Date(2013, 9, 5), 38705 ],
          [ new Date(2013, 9, 12), 38210 ],
          [ new Date(2013, 9, 13), 38029 ],
          [ new Date(2013, 9, 19), 38823 ],
          [ new Date(2013, 9, 23), 38345 ],
          [ new Date(2013, 9, 24), 38436 ],
          [ new Date(2013, 9, 30), 38447 ]
        ]);

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

       var options = {
         title: "Red Sox Attendance",
         height: 350,
       };

       chart.draw(dataTable, options);
   }
    </script>
  </head>
  <body>
    <div id="calendar_basic" style="width: 1000px; height: 350px;"></div>
  </body>
</html>
Clicking "Copy Code" button to copy the code. From - google charts tutorial - team

Output :


Related Searches to Google Charts - Calendar Charts

Adblocker detected! Please consider reading this notice.

We've detected that you are using AdBlock Plus or some other adblocking software which is preventing the page from fully loading.

We don't have any banner, Flash, animation, obnoxious sound, or popup ad. We do not implement these annoying types of ads!

We need money to operate the site, and almost all of it comes from our online advertising.

Please add wikitechy.com to your ad blocking whitelist or disable your adblocking software.

×