Google Charts - Google Charts tutorial - Customized Calendar Chart - 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.

Configurations:

  • We've used calendar configuration to customize the calendar.
// Set chart options
var options = {
   calendar: {
      yearLabel: {
        fontName: 'Times-Roman',
        fontSize: 32,
        color: '#1A8763',
        bold: true,
        italic: true
      },
      monthOutlineColor: {
         stroke: '#981b48',
         strokeOpacity: 0.8,
         strokeWidth: 2
      },
      unusedMonthOutlineColor: {
        stroke: '#bc5679',
        strokeOpacity: 0.8,
        strokeWidth: 1
      }		 
   }
};
Clicking "Copy Code" button to copy the code. From - google charts tutorial - team

Example

googlecharts-calendar-customized.html

 Tryit<html>
<head>
<title>Google Charts Tutorial</title>
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script type="text/javascript">
     google.charts.load('current', {packages: ['corechart','calendar']});     
   </script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
function drawChart() {
   // Define the chart to be drawn.
   var data = new google.visualization.DataTable();
     data.addColumn({ type: 'date', id: 'Date' });
       data.addColumn({ type: 'number', id: 'Students' });
       data.addRows([
          [ new Date(2012, 3, 13), 50 ],
          [ new Date(2012, 3, 14), 50 ],
          [ new Date(2012, 3, 15), 49 ],
          [ new Date(2012, 3, 16), 48 ],
          [ new Date(2012, 3, 17), 50 ],   
          [ new Date(2012, 4, 1), 50 ],
          [ new Date(2012, 4, 2), 50 ],
          [ new Date(2012, 4, 3), 49 ],
          [ new Date(2012, 4, 4), 48 ],
          [ new Date(2012, 4, 5), 50 ],  
          [ new Date(2012, 5, 4), 40 ],
          [ new Date(2012, 5, 5), 50 ],
          [ new Date(2012, 5, 10), 48 ],
          [ new Date(2012, 5, 11), 50 ],
          [ new Date(2012, 5, 12), 42 ],
          [ new Date(2012, 5, 20), 45 ],
          [ new Date(2012, 5, 21), 46 ],
          [ new Date(2012, 5, 29), 45 ],
		  [ new Date(2013, 3, 13), 40 ],
          [ new Date(2013, 3, 14), 40 ],
          [ new Date(2013, 3, 15), 39 ],
          [ new Date(2013, 3, 16), 38 ],
          [ new Date(2013, 3, 17), 40 ],   
          [ new Date(2013, 4, 1), 40 ],
          [ new Date(2013, 4, 2), 40 ],
          [ new Date(2013, 4, 3), 49 ],
          [ new Date(2013, 4, 4), 48 ],
          [ new Date(2013, 4, 5), 40 ],
          [ new Date(2013, 5, 4), 40 ],
          [ new Date(2013, 5, 5), 50 ],
          [ new Date(2013, 5, 12), 48 ],
          [ new Date(2013, 5, 13), 40 ],
          [ new Date(2013, 5, 19), 32 ],
          [ new Date(2013, 5, 23), 45 ],
          [ new Date(2013, 5, 24), 36 ],
          [ new Date(2013, 5, 30), 45 ]
        ]);

   
   // Set chart options
   var options = {'title':'Attendence',
      'width':550,
      'height':400,
      calendar: {
         yearLabel: {
           fontName: 'Times-Roman',
           fontSize: 32,
           color: '#1A8763',
           bold: true,
           italic: true
         },
         monthOutlineColor: {
            stroke: '#981b48',
            strokeOpacity: 0.8,
            strokeWidth: 2
         },
         unusedMonthOutlineColor: {
           stroke: '#bc5679',
           strokeOpacity: 0.8,
           strokeWidth: 1
         }		 
      }
   };

   // Instantiate and draw the chart.
   var chart = new google.visualization.Calendar(document.getElementById('container'));
   chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>
Clicking "Copy Code" button to copy the code. From - google charts tutorial - team

Output


Related Searches to Google Charts - Customized Calendar Chart