Keen IO retention script using V3 of the JavaScript library

gistfile1.js

    <script src="https://d26b395fwzu5fz.cloudfront.net/latest/keen.min.js"></script>
    <script>
    
      var projectId = "proj";
      var readKey = "key";
   
      var client = new Keen({
        projectId: projectId,
        readKey: readKey
      });
        
      Keen.ready(function(){
        var daysInChart = 5
        var step1CollectionName = "installs"
        var step2CollectionName = "session_starts"
        var actorProperty = "player_id"

        calculateRetention(daysInChart, step1CollectionName, step2CollectionName, 7, actorProperty, "chart4A")
      });

      function calculateRetention(daysInChart, step1CollectionName, step2CollectionName, retentionPeriod, actorProperty, div) {
        var dataForLineChart = []

        for (i=0; i < daysInChart; i++) {
          
          // Calculate dates for when user does step 1
          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)
          
          // Calculate dates for when user does step 2
          var secondStepDate = new Date(firstStepDate);
          secondStepDate.setDate(firstStepDate.getDate() + retentionPeriod)
          var secondStepDateEnd = new Date(secondStepDate)
          secondStepDateEnd.setDate(secondStepDateEnd.getDate() + 1)

          // Funnel steps used for calculating retention
          var step1 = {
            eventCollection: step1CollectionName,
            actorProperty: actorProperty,
            timeframe: {start: firstStepDate, end: firstStepDateEnd}
          }
          
          var step2 = {
            eventCollection: step2CollectionName,
            actorProperty: actorProperty,
            timeframe: {start: secondStepDate, end: secondStepDateEnd}
          }
          
          var funnel = new Keen.Query('funnel', {steps: [step1, step2]});     

            client.run(funnel, function(response){
              var percentage = response.result[1]*100/response.result[0]
              dataForLineChart.push({
                "value" : percentage,
                "timeframe" : {
                  "start" : response.steps[1].timeframe["start"],
                  "end" : response.steps[1].timeframe["end"]
                }
              })
            
              if (dataForLineChart.length == daysInChart) {

                // 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;
                })

              // draw it!
              window.chart = new Keen.Visualization({result: dataForLineChart}, document.getElementById(div), {
                chartType: 'linechart',
                title: "D" + retentionPeriod + " Retention",
                width: 600,
                colors: ['#6ab975'],
                chartOptions: {
                  legend: { position: "none" }
                }
             });
            }
          });
        }
      }
        
    </script>