How to generate a line chart for retention analysis with Keen IO

retention_line_chart.js

 <script type="text/javascript" charset="utf-8">
    
    // Global Properties for Line Chart Viz  
    var chartHeight = 400
    var chartWidth = 600
    var lineWidth = 3    
    var chartAreaWidth = "60%"
    var chartAreaLeft = "10%" 
    var xAxisLabelAngle = "45%" 
    
    
    Keen.onChartsReady(function() { // The onChartsReady function draws charts as soon as the page is loaded.

      var daysInChart = 10  // Number of days in your line chart
      var step1CollectionName = "user_created"
      var step2CollectionName = "user_play"
      var actorProperty = "player_id"
      var retentionPeriod = 1 // Number of days to use for retention analysis (E.g. D7 Retention (T-7 installs return T0) has a retention value of 7)  aka DaysSinceFirstPlay. A retentionPeriod of 1 means the number of people who did step2 in the 24hour period after their step1 activity.
      
      calculateRetention(daysInChart, step1CollectionName, step2CollectionName, retentionPeriod, actorProperty, "chart1A")
      // calculateRetention(daysInChart, step1CollectionName, step2CollectionName, 3, actorProperty, "chart1B")
      // calculateRetention(daysInChart, step1CollectionName, step2CollectionName, 7, actorProperty, "chart1C")
    
    });  
      
    function calculateRetention(daysInChart, step1CollectionName, step2CollectionName, retentionPeriod, actorProperty, div) {
      var dataForLineChart = []    
      var i = 0 
    
      while (i < daysInChart) {
    
        // Funnel steps used for calculating retention
    
        var firstStepDate = new Date();
        firstStepDate.setDate(firstStepDate.getDate() - daysInChart - retentionPeriod + i)
        firstStepDate.setHours(0,0,0)
        var firstStepDateEnd = new Date(firstStepDate)
        firstStepDateEnd.setDate(firstStepDateEnd.getDate() + 1)
        var secondStepDate = new Date(firstStepDate);  
        secondStepDate.setDate(firstStepDate.getDate() + retentionPeriod)  
        var secondStepDateEnd = new Date(secondStepDate) 
        secondStepDateEnd.setDate(secondStepDateEnd.getDate() + 1)
      
        var s1 = new Keen.Step(step1CollectionName, {
          timeframe: {start: firstStepDate, end: firstStepDateEnd}
          });
      
        var s2 = new Keen.Step(step2CollectionName, {
          timeframe: {start: secondStepDate, end: secondStepDateEnd}
          });
        
        //Instantiate a new Keen.Funnel for those steps.
        var myFunnel = new Keen.Funnel([s1, s2], {
            actorProperty: actorProperty
        });

        myFunnel.getResponse(function(response){
            var percentage = response.result[1]/response.result[0]
            dataForLineChart.push({
              "value" : percentage,
              "timeframe" : {
                "start" : response.steps[1].timeframe["start"],
                "end" : response.steps[1].timeframe["end"]
              }
            })
            if (dataForLineChart.length == daysInChart) {
                var title = "D" + retentionPeriod + " Retention"
              
                // Need to sort data for line chart!
                dataForLineChart.sort(function(x, y){
                    date1 = new Date(x.timeframe["start"]);
                    date2 = new Date(y.timeframe["start"]);
                    return date1 - date2;
                })
                drawMyLineChart(dataForLineChart, "daily", div , title)
              }
        });
        i++
      }
    }
    
    
    function drawMyLineChart(data, interval, div, title) {
      // The final formatting required so that the result can be processed by the Keen.MultiLineChart draw method.         
      var formattedResult = {
        result: data
      }

      // Create a Series object so that it can be referenced by the draw method.
      // This is kind of a hack since we are passing in our own result object and not really querying the collection specified here.
      // The "placeholder" is used instead of a collection name, since this is not used.
      var placeholderSeries = new Keen.Series("placeholder", {
        interval: interval
      })
      
      var placeholderLineChart = new Keen.LineChart(placeholderSeries, {
        height: chartHeight,
        width: chartWidth,
        lineWidth: lineWidth,
        chartAreaWidth: chartAreaWidth,
        chartAreaLeft: chartAreaLeft,
        title: title,
        // colors: colors,
        showLegend: false,
        xAxisLabelAngle: xAxisLabelAngle
      });
      placeholderLineChart.draw(document.getElementById(div), formattedResult);
    }

      
 </script>

Note this only works for V2 of the Keen Javascript library!