Calendar Heatmap Plugin With jQuery And Moment.js - CalendarHeatmap

Calendar Heatmap Plugin With jQuery And Moment.js - CalendarHeatmap
File Size: 22.5 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

CalendarHeatmap.js is a jQuery plugin used to generate a dynamic, interactive, configurable calendar heatmap for representing time series data. Hover over the time slots to show details for each of the days on demand. Inspired by Github’s commit calendar graph.

Installation:

# NPM
$ npm install calendarheatmap --save

# Bower
$ bower install calendarheatmap --save

How to use it:

1. Include the necessary jQuery JavaScript library and Moment.js on the web page.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.2/moment.min.js"></script>

2. Include the minified version of the jQuery CalendarHeatmap.js plugin after jQuery and moment.js.

<link rel="stylesheet" href="jquery.CalendarHeatmap.css">
<script src="jquery.CalendarHeatmap.min.js"></script>

3. Create a placeholder element for the generated calendar heatmap.

<div id="heatmap-demo"></div>

4. Prepare the data you want to present in the calendar heatmap.

var data = [
    {count: 2, date: "2017-09-23"},
    {count: 1, date: "2017-10-23"},
    {count: 4, date: "2017-11-11"},
    {count: 5, date: "2017-11-13"},
    {count: 3, date: "2017-11-21"},
    ...
]

5. Visualize the data in the calendar heatmap.

$("#heatmap-demo").CalendarHeatmap(data, {
  // options here
});

6. All default options to customize the calendar heatmap.

$("#heatmap-demo").CalendarHeatmap(data, {

  // title of the calendar heatmap
  title: null,

  // the number of months to display
  months: 12,

  // last month
  lastMonth: moment().month() + 1,

  // last year
  lastYear: moment().year(),

  // color gradients
  coloring: null,

  // custom labels
  labels: {
      days: false,
      months: true,
      custom: {
          weekDayLabels: null,
          monthLabels: null
      }
  },

  // custom legend
  legend: {
      show: true,
      align: "right",
      minLabel: "Less",
      maxLabel: "More"
  },

  // custom tooltips
  // requires Bootstrap
  tooltips: {
      show: false,
      options: {}
  }
  
});

Change log:

2017-11-28

  • Bugfixed.

This awesome jQuery plugin is developed by SeBassTian23. For more Advanced Usages, please check the demo page or visit the official website.