Cal Heatmap

gistfile1.txt

<script type="text/javascript">

  propublica.views.heatMap = propublica.View.extend({
    cssClass : "heatmap",

    render : function() {
      // wide width
      var chartWidth = $(".heatmap-section").width();
      var domainGutter = chartWidth*6/350
      var boxSize = chartWidth/160
      var domain = "month";
      var subdomain = "day";
      var range = 16;
      var colLimit = false;
      var start = new Date(2013, 6);
      var domainLabelFormat = "%b";
      var subDomainDateFormat = "%B %d, %Y";
      // mobile
      if ($(window).width() < 480) {
        domain  = "year";
        subdomain = "month";
        colLimit = 5;
        range = 2;
        start = new Date(2013, 0);
        boxSize = chartWidth / 15;
        domainLabelFormat = "%Y";
        subDomainDateFormat = "%B, %Y";
        $(".heatmap-years h6").hide();
      }
        var cur = this.el.attr("data-type")
        var datas = window["pay_data"]

          var parser = function(data) {
            var stats = {};
            for (var d in data) {
              var fmtDate = Math.round(new Date(data[d].date).getTime()/1000)
              stats[fmtDate] = data[d].count;
            }
            return stats;
          };

          var labelTerms = function(term) {
            terms = {
              "pay":"payment",
            }
            return terms[term] ? terms[term] : term
          };
          var curLabel = labelTerms(cur)

          var cal = new CalHeatMap();

          cal.init({
            itemSelector: "#"+cur+"-heatmap",
            data: datas,
            afterLoadData: parser,
            start: new Date(2013, 7),
            id : "graph_c",
            itemName: curLabel,
            domain : domain,
            subDomain : subdomain,
            cellSize: boxSize,
            range : range,
            colLimit : colLimit,
            subDomainDateFormat: subDomainDateFormat,
            domainLabelFormat: domainLabelFormat,
            displayLegend: false,
            tooltip:true,
            domainGutter: domainGutter,
            onClick: function(date, nb) {
              // $(".full-details").hide();
              // $("."+cur+"-full").show();
            }

          });
      }
  });
</script>