ESeufert

$(document).ready(function() {

    var data = getData();

    data = createAverages(data);

    buildLineChart(data, "Retention",
        ['d1_retention', 'd7_retention', 'd30_retention'],
        1000, 300, "Date", "Retention (percentage)");
        

ESeufert

function buildLineChart(data, title, graph_metric, width, height, xaxislabel, yaxislabel) {

    var metric = data.slice(0);
    metric.splice(0,1);

    // define graph size parameters
    var margin = {top: 30, right: 20, bottom: 40, left: 60},
        width = width - margin.left - margin.right,
        height = height - margin.top - margin.bottom;

ESeufert

function getDate(d) {
    return new Date(d.date);
}

ESeufert

function getMaxObjectValue(metric, graph_metric) {
    var values = [];
    
    for (var i = 0; i < metric.length; i++) {
        for (var k = 0; k < graph_metric.length; k++) {
            if (parseFloat(metric[i][""+graph_metric[k]]) &lt; 1) {
                values.push(parseFloat(metric[i][""+graph_metric[k]]));
            } else {
                values.push(Math.ceil(parseFloat(metric[i][""+graph_metric[k]])));
            }

ESeufert

function safeDivide(num1, num2) {
    if (isNaN(parseFloat(num2)) || isNaN(parseFloat(num1)) || num2 == 0) {
        return 0;
    }

    return Math.round( parseFloat(num1) / parseFloat(num2) * 100 ) / 100;
}

ESeufert

function createAverages(metric) {
    for (var i = 1; i < metric.length; i++) {
        metric[i].d1_retention = safeDivide(metric[i].d1_retention, metric[i].DNU) * 100;
        metric[i].d7_retention = safeDivide(metric[i].d7_retention, metric[i].DNU) * 100;
        metric[i].d30_retention = safeDivide(metric[i].d30_retention, metric[i].DNU) * 100;

        metric[i].average_session_length = safeDivide(metric[i].sessions_length, metric[i].sessions) / 60;
        metric[i].average_sessions_per_user = safeDivide(metric[i].sessions, metric[i].DAU);
    }
    return metric;

ESeufert

function getData() {

    var data = [];
    
    var metrics =
    {
        "countries":
        [
            {
                "country": "USA",

ESeufert

var dataCirclesGroup = vis.append('svg:g');

var circles = dataCirclesGroup
    .selectAll('.data-point')
    .data(data);

circles
    .enter()
    .append('svg:circle')
    .attr('class', 'dot')

ESeufert

var line = d3.svg.line()
    .x(function(d) { return x(d["date"]); })
    .y(function(d) { return y(d["DAU"]); })

vis.append("svg:path")
    .attr("d", line(data))
    .style("stroke", function() {
        return "#000000";
    })
    .style("fill", "none")

ESeufert

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(5);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .ticks(5);