{"id":14449,"date":"2022-02-11T12:24:59","date_gmt":"2022-02-11T12:24:59","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=14449"},"modified":"2022-08-16T06:02:31","modified_gmt":"2022-08-16T06:02:31","slug":"calendar-chart-js","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2022\/02\/11\/calendar-chart-js\/","title":{"rendered":"How to Create Calendar Chart in JavaScript"},"content":{"rendered":"

\"Creating<\/a>A calendar chart is an effective way to represent activity over time graphically. It can nicely display how a quantity varies with the days, weeks, months, and years. If you want to learn to build stylish interactive calendar charts easily using JavaScript, welcome to my step-by-step tutorial!<\/p>\n

To make this guide not only educating but also entertaining, I decided to reproduce GitHub\u2019s calendar graph<\/a> and visualize the repository contribution activity of Mike Bostock<\/a>, a prominent computer scientist known globally as one of the creators of the open-source JavaScript charting library D3.js<\/a> and of the interactive data visualization development platform Observable<\/a>. So, we\u2019ll also get a telling picture of how he performed in that regard!<\/p>\n

<\/p>\n

Calendar Chart That Will Be Created<\/h2>\n

Before anything else, let me get you all pumped up by demonstrating the beautiful JavaScript-based calendar chart of Mike Bostock\u2019s contributions that will be created along this tutorial. Read on to see how it\u2019s built!<\/p>\n

\"Interactive<\/p>\n

Basic Interactive JS Calendar Chart<\/h2>\n

An interactive JavaScript calendar chart can look a bit complex. But just follow these basic four steps, and you\u2019ll be able to build one quite easily.<\/p>\n

    \n
  1. Create an HTML page.<\/li>\n
  2. Add the required JS files.<\/li>\n
  3. Include the data.<\/li>\n
  4. Add some JavaScript charting code.<\/li>\n<\/ol>\n

    1. Create an HTML page<\/h3>\n

    Let\u2019s start with the very basics and create an HTML page to render our JS calendar chart.<\/p>\n

    On this page, add a div<\/code> element with a unique id attribute so that it can be easily referred to in the code later.<\/p>\n

    For the full-page rendering of the chart, set the width of the div<\/code> as 100%. You may change this to your liking, of course.<\/p>\n

    <html>\r\n\u00a0\u00a0<head>\r\n\u00a0\u00a0\u00a0\u00a0<title>JavaScript Calendar Chart<\/title>\r\n\u00a0\u00a0\u00a0\u00a0<style type=\"text\/css\">      \r\n\u00a0\u00a0\u00a0\u00a0  html, body, #container { \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0  width: 100%; margin: 0; padding: 0; \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} \r\n\u00a0\u00a0\u00a0\u00a0<\/style>\r\n\u00a0\u00a0<\/head>\r\n\u00a0\u00a0<body>\r\n\u00a0\u00a0\u00a0\u00a0<div id=\"container\"><\/div>\r\n\u00a0\u00a0<\/body>\r\n<\/html><\/code><\/pre>\n
    2. Include the required JavaScript files<\/h3>\n
    The quickest and most convenient way to create a calendar graph for the web is using a JavaScript charting library<\/a> that supports this type of data visualization out of the box.<\/p>\n
    In this tutorial, we will use AnyChart<\/a> as an example, and the visualization will be built following its calendar chart documentation<\/a>. This library is free for non-commercial use and has many examples for the various chart types and options. So if you are a beginner, it still looks good for you to start.<\/p>\n
    Include the required JS files in\u00a0the <head><\/code> section of the HTML page. Let\u2019s take them from the CDN<\/a> this time, but you can also download them if you want.<\/p>\n
    AnyChart has an inherent modular system. We need two charting modules to create a calendar chart: core<\/a> and calendar<\/a>.<\/p>\n
    <html>\r\n\u00a0\u00a0<head>\r\n\u00a0\u00a0\u00a0\u00a0<title>JavaScript Calendar Chart<\/title>\r\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/js\/anychart-core.min.js\"><\/script>\r\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/js\/anychart-calendar.min.js\"><\/script>\r\n\u00a0\u00a0\u00a0\u00a0<style type=\"text\/css\">      \r\n\u00a0\u00a0\u00a0\u00a0  html, body, #container { \r\n\u00a0\u00a0\u00a0\u00a0    width: 100%; margin: 0; padding: 0; \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} \r\n\u00a0\u00a0\u00a0\u00a0<\/style>\r\n\u00a0\u00a0<\/head>\r\n\u00a0\u00a0<body>  \r\n\u00a0\u00a0\u00a0\u00a0<div id=\"container\"><\/div>\r\n\u00a0\u00a0\u00a0\u00a0<script>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ The JS calendar chart code goes here.\r\n\u00a0\u00a0\u00a0\u00a0<\/script>\r\n\u00a0\u00a0<\/body>\r\n<\/html><\/code><\/pre>\n
    3. Procure and add the data<\/h3>\n
    Now, let\u2019s see how to set the data for our calendar chart.<\/p>\n
    It is easy to retrieve data on the contributions of any GitHub user \u2014 we are looking at Mike Bostock<\/a> in our case \u2014 via the GitHub GraphQL API<\/a>.<\/p>\n
    I have already downloaded it and put it in the appropriate form in a JSON data file here<\/a>.<\/p>\n
    To load this file in a straightforward manner, we can use the Data Adapter<\/a>. Therefore, it needs to be referenced in the\u00a0<head><\/code> section of our HTML page together with the other scripts we will use to create the calendar chart.<\/p>\n
    <script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.0\/js\/anychart-data-adapter.min.js\"><\/script><\/code><\/pre>\n
    We have all the preparation done now, so let\u2019s get on to the JS coding part. You will not believe how just a few lines will create a functional interactive calendar chart very quickly!<\/p>\n
    4. Add the JS charting code<\/h3>\n
    To ensure that the charting code is executed only when the web page is ready, we must enclose it in the anychart.onDocumentLoad()<\/code> function.<\/p>\n
    Inside, first, load the JSON data file using the data.loadJsonFile<\/code> function.<\/p>\n
    Then, create a function with the data<\/code> parameter, define a dataset variable to store the data, map the data, and pass the mapped data to the calendar()<\/code> function.<\/p>\n
    anychart.onDocumentReady(function() {\r\n\r\n\u00a0 \/\/ load the json file\r\n  anychart.data.loadJsonFile(\r\n    'https:\/\/gist.githubusercontent.com\/shacheeswadia\/56f3867eb6f8fcc4532e7ac458c8d9f7\/raw\/702f30b457cc1b573093c6977a69958fb741ede6\/calendarData.json',\r\n\r\n\u00a0 \u00a0 \/\/ create a function with the data parameter\r\n    function(data) {\r\n\r\n      \/\/ define a dataset variable to store the data\r\n      var dataset = anychart.data.set(data);\r\n      \/\/ map the data\r\n      var mapping = dataset.mapAs({\r\n        x: 'date',\r\n        value: 'level'\r\n      });\r\n\r\n      \/\/ pass the mapped data to the calendar function\r\n      var chart = anychart.calendar(mapping);\r\n\r\n    }\r\n\r\n  );\r\n\r\n});<\/code><\/pre>\n
    Let\u2019s set the height of our calendar chart dynamically based on its actual value, which will enable scrolling in case the chart\u2019s height is greater than the page\u2019s.<\/p>\n
    chart.listen('chartDraw', function() {       \r\n  document.getElementById('container').style.height = chart.getActualHeight() + 'px';\r\n});<\/code><\/pre>\n
    Lastly, we add a title to make it clear for everyone what is visualized, set the container reference, and draw the resulting chart.<\/p>\n
    chart.title(\"GitHub Contributions of Mike Bostock in 2017\u20132021\");\r\nchart.container('container');\r\nchart.draw();<\/code><\/pre>\n
    That\u2019s all we need to do to get an interactive JavaScript-based calendar chart created! Check out this initial version on AnyChart Playground<\/a>.<\/p>\n