Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="http://kamisama.github.io/cal-heatmap/css/cal-heatmap.css?v=3.5.1" />
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="http://kamisama.github.io/cal-heatmap/js/moment.min.js"></script>
  <script src="http://kamisama.github.io/cal-heatmap/js/cal-heatmap.min.js?v=3.5.1"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  
  <div id="cal"></div>
  <script>
    
    var data = {"63556099200":2,"63556185600":4,"63556272000":2,"63556358400":1,"63556704000":2,"63556790400":1,"63556876800":1,"63556963200":1,"63557222400":1,"63557308800":1,"63557827200":1,"63557913600":1,"63558000000":2,"63558086400":1,"63558172800":1,"63559296000":3,"63559728000":2,"63559814400":1,"63559900800":3,"63559987200":1,"63560246400":2,"63560332800":1,"63560419200":2,"63560505600":2,"63560592000":1,"63560937600":1,"63561456000":4,"63561801600":2,"63562060800":2,"63562147200":1,"63562233600":2,"63562320000":1,"63562406400":1,"63562665600":1,"63562752000":1,"63562838400":2,"63562924800":1,"63563270400":2,"63563961600":2,"63564048000":2,"63564134400":3,"63564220800":3,"63564566400":2,"63564739200":2,"63564825600":1,"63565084800":2,"63565171200":1,"63565257600":2,"63565344000":2,"63565430400":3};
    
    var cal = new CalHeatMap();
    cal.init({
      itemSelector: "#cal",
      data: data,
      itemName: ["visit", "visits"],
      considerMissingDataAsZero: true,
      legend: [1, 2, 3, 4],
      cellSize: 17,
      cellPadding: 2,
      domain: "month",
      domainGutter: 10,
      domainDynamicDimension: false,
      domainLabelFormat: function (date) {
        return moment(date).format("MMM, YYYY").toUpperCase();
      },
      subDomain: "x_day",
      subDomainTextFormat: "%d",
      //subDomainTextFormat: function(date ,value) {
      //    return value;
      //},
      //subDomainDateFormat: function(date) {
        //return moment(date).format("LL");
      //},
      range: 12,
      start: new Date(2015, 0, 1)
    });
    
  </script>
  
  
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
mmunchandersenpro
0viewers