Divide two Keen IO series line charts to create new line chart. For example ARPDAU or other average or computed values.

gistfile1.js

<script>
  var Keen=Keen||{configure:function(e){this._cf=e},addEvent:function(e,t,n,i){this._eq=this._eq||[],this._eq.push([e,t,n,i])},setGlobalProperties:function(e){this._gp=e},onChartsReady:function(e){this._ocrq=this._ocrq||[],this._ocrq.push(e)}};(function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src=("https:"==document.location.protocol?"https://":"http://")+"dc8na2hxrj29i.cloudfront.net/code/keen-2.1.0.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})();
  var projectId = "<project_id>";
  var readKey = "<project_key>";

  // make sure Keen IO environment variables are set
  if (projectId != "" && readKey != "") {

    // configure the global Keen Client
    Keen.configure({
      projectId: projectId,
      readKey: readKey
    });

    Keen.onChartsReady(function() { // The onChartsReady function draws charts as soon as the page is loaded.

      // ARPDAU - Average Revenue per Daily Active User
      // Divide the day's revenue by the number of active users that day
      // ==================================================
  
      var totalRevenueSeries = new Keen.Series("purchases", {
        analysisType: "sum",
        timeframe: "last_30_days",
        interval: "daily",
        targetProperty: "amount_USD_cents"
      });

      var totalActiveUsersSeries = new Keen.Series("level_start", {
        analysisType: "count_unique",
        targetProperty: "player_id",
        timeframe: "last_30_days",
        interval: "daily"
      });

      divideTwoLineSeriesChart(totalRevenueSeries, totalActiveUsersSeries, interval, "chart1B", "ARPDAU (USD)")

      function divideTwoLineSeriesChart(firstSeries, secondSeries, interval, div, title) {

        var solutionArray = [] // variable to store results of the divided queries
        var result1 = null // Create variables for holding query results
        var result2 = null

        firstSeries.getResponse(function(response) { // Get the values for the first query
          result1 = response.result
          divideResults()
        });

        secondSeries.getResponse(function(response) { // Get the values for the second Series query
          result2 = response.result
          divideResults()
        });

        function divideResults() {

          // Results should look like:
          //     [{
          //       "value": 266,
          //       "timeframe": {
          //         "start": "2014-01-20T08:00:00.000Z",
          //         "end": "2014-01-21T08:00:00.000Z"
          //       }
          //     },
          //     {
          //       "value": 838,
          //       "timeframe": {
          //         "start": "2014-01-21T08:00:00.000Z",
          //         "end": "2014-01-22T08:00:00.000Z"
          //       }
          //     }]
          
          if ((result1 != null) && (result2 != null)) {
            i = 0
            while (i < result1.length) {
              solutionArray[i] = {
                timeframe: result1[i]["timeframe"],
                value: result1[i]["value"] / result2[i]["value"]
              }
              i++;
            }
            drawMyLineChart(solutionArray, interval, div, title)
          }
          else {
            // do nothing
          }
        }
      }

      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 myLineChart = new Keen.LineChart(placeholderSeries, {
          height: 300,
          width: 500,
          lineWidth: 3,
          title: title,          
          showLegend: false,
          xAxisLabelAngle: "45%"
        });
        myLineChart.draw(document.getElementById(div), formattedResult);
      }
    }
  });

</script>