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




What is basic calendar chart?

  • Below is an example of a basic calendar chart. A calendar chart is used for vizualizing a data over period of time.
  • In Google Charts Configuration Syntax chapter, we have already seen the configuration used for drawing this chart. Now let's see the complete example.

Configurations:

  • We've used Calendar class to show calendar based chart.

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

Sample Code

googlecharts_calendar_basic.html

 Tryit<html>
<head>
<title>Google Charts </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   
   };

   // 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>

Output:


Related Searches to Google Charts - Basic Calendar Chart

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.

×