This gist uses Keen IO conversion funnels to generate a line chart showing conversion over time. In this example we'll chart the number of video viewing sessions that make it past the 25%, 50%, 75%, and 100% mark in the video. The end result is a multiline chart with one line for each view marker (25%, 50%, 75%, 100%). This chart helps you answe…

gistfile1.js

Keen.onChartsReady(function(){

  var dataPointsInChart = 7 // Number of days in your line chart
  calculateConversionTrend(dataPointsInChart, "conversionLineChart")

  function calculateConversionTrend(dataPointsInChart, div) {
      var dataForLineChart = []
      var i = 0

      while (i < dataPointsInChart) {

        // Start & end date for each data point in the chart
        var startDate = new Date();
        startDate.setDate(startDate.getDate() - dataPointsInChart + i) // for weekly analysis use dataPointsinChart*7 and i*7
        startDate.setHours(0, 0, 0)

        var endDate = new Date(startDate)
        endDate.setDate(endDate.getDate() + 1) // for weekly analysis use "+ 7"
        // Funnel steps used for calculating conversion. The number that made it to step 2 divided by the number in step 1 will give you the conversion percentage for that time period. E.g. 25% of viewing sessions made it past 50%.
        var step1 = new Keen.Step("progress", { // Raw number of sessions for this video
          filters: [{
            property_name: "video.video_name",
            operator: "eq",
            property_value: videoName
          }, ],
          timeframe: {
            start: startDate,
            end: endDate
          }
        });
        var step2 = new Keen.Step("progress", { // Sessions that made it to 50%
          filters: [{
            property_name: "video.video_name",
            operator: "eq",
            property_value: videoName
          }, {
            property_name: "progress",
            operator: "eq",
            property_value: 25
          }],
          timeframe: {
            start: startDate,
            end: endDate
          }
        });
        var step3 = new Keen.Step("progress", { // Sessions that made it to 50%
          filters: [{
            property_name: "video.video_name",
            operator: "eq",
            property_value: videoName
          }, {
            property_name: "progress",
            operator: "eq",
            property_value: 50
          }],
          timeframe: {
            start: startDate,
            end: endDate
          }
        });
        var step4 = new Keen.Step("progress", { // Sessions that made it to 50%
          filters: [{
            property_name: "video.video_name",
            operator: "eq",
            property_value: videoName
          }, {
            property_name: "progress",
            operator: "eq",
            property_value: 75
          }],
          timeframe: {
            start: startDate,
            end: endDate
          }
        });
        var step5 = new Keen.Step("progress", { // Sessions that made it to 50%
          filters: [{
            property_name: "video.video_name",
            operator: "eq",
            property_value: videoName
          }, {
            property_name: "progress",
            operator: "eq",
            property_value: 100
          }],
          timeframe: {
            start: startDate,
            end: endDate
          }
        });

        //Instantiate a new Keen.Funnel for those steps.
        var myFunnel = new Keen.Funnel([step1, step2, step3, step4, step5], {
          actorProperty: "session.id"
        });

        myFunnel.getResponse(function(response) { // Run the funnel query
          dataForLineChart.push({
            "value": [
              {
                "progress": "25%",
                "result": response.result[1] / response.result[0]
              },
              {
                "progress": "50%",
                "result": response.result[2] / response.result[0]
              },
              {
                "progress": "75%",
                "result": response.result[3] / response.result[0]
              },
              {
                "progress": "100%",
                "result": response.result[4] / response.result[0]
              }                            
            ],
            "timeframe": {
              "start": response.steps[1].timeframe["start"],
              "end": response.steps[1].timeframe["end"]
            }
          })
          if (dataForLineChart.length == dataPointsInChart) {
            var title = "Percentage of sessions that make it past a certain viewpoint"

            // 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,
      groupBy: "progress"
    })

    var placeholderLineChart = new Keen.MultiLineChart(placeholderSeries, {
      title: title,
      showLegend: true,
    });
    placeholderLineChart.draw(document.getElementById(div), formattedResult);
  }
});