The calendar heatmap from Github

What it does

This gadget is a perfect tool for both general purposes and data analysis as it allows users to get a quick overview of issues (created, updated, etc) in a 12 months period.

Some of the possible scenarios where the gadget can be used

  • Resource Planning - know when to get additional resources during your peak periods
  • Holiday Planning - plan your leave during your lull periods
  • Trend Analysis - are there more helpdesk tickets after a particular release or period
  • Calendaring - add your team members' birthdays in a JIRA project
  • Downtime Forecast - a bird's eye view of all the scheduled maintenance
  • Anomaly Identification - find out if there is any sudden increase in the number of issues

How I built it

I used the Cal-HeatMap Javascript module to render the heatmap.

I built the following 3 components

  • The gadget framework is responsible to render the
  • The REST API to service the AJAX request from the gadget
  • The backend to collate the data

Challenges I ran into

It is challenging as JIRA has a rich set of APIs and the structure of the gadget xml looks scary initially. Luckily there are references available at and the Three Dimensional Date Gadget

It took a lot of Javascript and CSS hacking to make sure the gadget remains usable under different layouts.

It was fun brainstorming how to improve the usability and performance of the gadget.

Accomplishments that I'm proud of

This is my 1st Atlassian plugin which I did during my internship at Akeles. My submission is based on many iterations of improvement with the feedback from the team.

What I learned

I learned a lot about Atlassian plugin development as well as the differences between a functional plugin and usable plugin. It takes a lot more effort to improve on the performance, usability and aesthetics.

What's next for Calendar Heatmap Gadget

We hope to get more feedback for this plugin to improve it further.

Some of the ideas we have in mind:

  • adding support for more color schemes
  • to allow user to identify current day easily
  • to improve on the tooltip for better readability
  • shorter window period like current month, current quarter
  • support finer granularity such as by hour
Share this project: