gistfile1.js

Keen.configure({
  projectId: id,
  readKey: key
});

// Timeframe parameters for queries
var timeframe = "last_14_days"
var interval = "daily"

Keen.onChartsReady(function(){

  // ==================================================
  // Create Signups Over Time Combined Multi-Line Chart
  // ==================================================

  var newOrgsSeries = new Keen.Series("create_organization", {  // First line in the line chart
    analysisType: "count",
    interval: interval,
    timeframe: timeframe,
  });

  var newOrgsFromPartnersSeries = new Keen.Series("create_organization", {  // Second line in the line chart
    analysisType: "count",
    interval: interval,
    timeframe: timeframe,
    filters: [{"property_name":"partner","operator":"eq","Heroku"}]                        
  });

  makeTwoLineSeriesChart(newOrgsSeries, "Total", newOrgsFromPartnersSeries, "Heroku", interval, "newOrgs")
});

function makeTwoLineSeriesChart(series1, series1label, series2, series2label, interval, div){  
    
    var combinedResultArray = []  // variable to store results from various queries
    var result1 = null  // Create variables for holding query results
    var result2 = null

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

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

    function combineResults() {             
                            
        if ((result1 != null) && (result2 != null)) {
            i = 0        
            while (i < result1.length)
                {
                    combinedResultArray[i]={
                        timeframe: result1[i]["timeframe"],
                        value: [{ category: series1label, result: result1[i]["value"] },
                                { category: series2label, result: result2[i]["value"] }]     
                    }          
                i++;
                }
            drawMyMultiLineChart(combinedResultArray, "category", interval, div)
        }                
        else {  
            // do nothing
        }              
    }
}

function drawMyMultiLineChart(data, groupBy, interval, div) {
    // 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: groupBy        
    })

    var myMultiLineChart = new Keen.MultiLineChart(placeholderSeries, {
        var chartWidth = 700
        var xAxisLabelAngle = "45%" 
        var colors = ["#00afd7","#f35757","#d700af","#afd700"]    
    })

    myMultiLineChart.draw(document.getElementById(div),formattedResult);
}