gistfile1.txt

  drawMultiTimingChart('draft-timings', 'last_14_days', 'daily', [
    ['deleting a gmail draft', 'duration', 'Deleting a draft'],
    ['updating a gmail draft', 'duration', 'Updating a draft'],
    ['creating a gmail draft', 'duration', 'Creating a draft'],
  ]);



// Draw multiple lines in the same chart.
// See https://github.com/keen/keen-js/blob/master/docs/recipes.md#combine-two-line-charts
function drawMultiTimingChart(selector, timeframe, interval, queries, isStacked) {
  var clientQueries = queries.map(function(query) {
    var query = new Keen.Query('percentile', {
      eventCollection: query[0],
      timeframe: timeframe || "last_14_days",
      targetProperty: query[1],
      interval: interval || "daily",
      percentile: 90
    });
    return query;
  });

  client.run(clientQueries, function(responses) {
    // Merge the result of each array.
    var data = _.zip.apply(_, _.pluck(responses, 'result'));

    // Transform each entry into a key with 'timestamp' and 'value'.
    data = data.map(function(entry) {
      // Just take the first entry's timestamp since they're all the same.
      var timeframe = entry[0].timeframe;

      var values = entry.map(function(value, i) {
        return {
          category: queries[i][2],
          result: value.value
        };
      });

      return {
        timeframe: timeframe,
        value: values
      };
    });

    new Keen.Visualization({
      result: data
    }, document.getElementById(selector), {
      chartType: isStacked ? 'areachart' : 'linechart',
      chartOptions: {
        isStacked: isStacked,
        chartArea: {
          height: "85%",
          left: "5%",
          top: "5%",
          width: "100%"
        },
        vAxis: {
          format: '#,###ms',
          textPosition: 'in'
        },
        hAxis: {
          format: 'EEE M/d' // See http://userguide.icu-project.org/formatparse/datetime
        }
      }
    });
  });
}