View on GitHub

retention-graph-cohort-analysis

Cohort graph (Cohort Analysis)

Download this project as a .zip file Download this project as a tar.gz file

Days

Day 0

1900

Day 1

940

Day 2

520

Day 3

190

Day 4

80

Day 5

50

Day 6

110

Day 7

20
22-05-2016
200
160
90
30
40
10
20
20
23-05-2016
300
200
150
50
20
20
90
24-05-2016
200
110
150
50
10
20
25-05-2016
200
120
60
30
10
26-05-2016
300
90
40
30
27-05-2016
200
80
30
28-05-2016
300
180
29-05-2016
200

Retention graph (Cohort analysis Graph)

npm version

Cohort Analysis Graph

Live Demo

New Library without any external dependencies and handling only visual layer without controls for data

Usage:

Working on options
React Version of same Graph

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Outdated Library - found in folder old with options for controls

alt tag

Input options:

{
  "data": {
    "days": {
      "22-05-2016": [
        200,
        10,
        20,
        30,
        40,
        10,
        20,
        20
      ],
      "23-05-2016": [
        300,
        200,
        150,
        50,
        20,
        20,
        90,
        100
      ],
      "24-05-2016": [
        200,
        110,
        150,
        50,
        10,
        20,
        30,
        40
      ],
      "25-05-2016": [
        100,
        10,
        10,
        50,
        20,
        20,
        60,
        0
      ]
    },
    "weeks": {
      "week1": [
        200,
        10,
        20,
        30,
        40,
        10,
        20,
        20
      ],
      "week2": [
        300,
        200,
        150,
        50,
        20,
        20,
        90,
        100
      ],
      "week3": [
        200,
        110,
        150,
        50,
        10,
        20,
        30,
        40
      ]
    },
    "months": {
      "month1": [
        200,
        10,
        20,
        30,
        40,
        10,
        20,
        20
      ],
      "month2": [
        300,
        200,
        150,
        50,
        20,
        20,
        90,
        100
      ],
      "month3": [
        200,
        110,
        150,
        50,
        10,
        20,
        30,
        40
      ],
      "month4": [
        100,
        10,
        10,
        50,
        20,
        20,
        60,
        0
      ]
    }
  },
  "startDate": "22-05-2016",
  "endDate": "25-05-2016",
  "inputDateFormat": "DD-MM-YYYY",
  "dateDisplayFormat": "MMM DD YYYY",
  "title": "Retention Analysis",
  "showEmptyDataMessage": true,
  "customEmptyDataMessage": null,
  "enableInactive": false,
  "retentionDays": 7,
  "retentionWeeks": 4,
  "retentionMonths": 3,
  "enableTooltip": true,
  "enableDateRange": false,
  "showAbsolute": false,
  "toggleValues": true,
  "showHeaderValues": false,
  "cellClickEvent" : function(date, day){
    /* your closure with date=" + date + "&day="+ day; */
  },
  "dayClickEvent" : function(day, startDate, endDate){
    /* do something with day#, startDate and endDate */
  }
}

Release Notes

v0.5.6: - Most of the issues fixed, Especially column header percentages.