2

Hi all I'm using d3js and cal-Heatmap for calendar view in my project, I'm able to get the examples working.

It provides only verticalOrientation = false/true option, but my requirement is that I have to display 

horizontalOrientation (i.e verticalOrientation = false)

But I want 3 months in a row and another 3 months in a row so on.. till all 12 months. please help me in achieving it.

Output goal:

enter image description here

Mark
  • 106,305
  • 20
  • 172
  • 230
KGBRS
  • 41
  • 6

1 Answers1

0

If I'm understanding you correctly, you can use a combination of subDomain and rowLimit:

  var cal = new CalHeatMap();
  cal.init({
    domain: "year",
    subDomain: "x_month",
    rowLimit: 3
  });

Full example:

<!DOCTYPE html>
<html>

<head>
  <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
  <link rel="stylesheet" href="https://rawgit.com/wa0x6e/cal-heatmap/master/cal-heatmap.css" />
  <script src="https://rawgit.com/wa0x6e/cal-heatmap/master/cal-heatmap.min.js"></script>
</head>

<body>
  <div id="cal-heatmap"></div>
  <script>
    var cal = new CalHeatMap();
    cal.init({
      domain: "year",
      subDomain: "x_month",
      rowLimit: 3
    });
  </script>
</body>

</html>
Mark
  • 106,305
  • 20
  • 172
  • 230
  • Hi Mark thanks for giving the update My Requirement is to display the all the 12 months in 4 rows like Jan Feb March April May June July August September October November December like this i need all the months in 3 columns and 4 rows but all those months are displaying in single row now – KGBRS Oct 19 '15 at 09:52
  • I need out put like this. https://www.dropbox.com/s/dufclcx59ksa9us/image.png?dl=0 – KGBRS Oct 19 '15 at 10:36