Cubism.js getting correct metrics but not drawing horizon chart

Question

I'm plotting about 15 named metrics on cubism.js. I'm seeing the stat values being return as metrics. Also, if I scroll over the visualization, the ruler is showing me the proper values. However, its just not drawing the graph. When I inspect the horizon div, this is what I see:

<span class="value" style=""></span>

As you can see, the span is empty. It should look something like this:

<span class="value" style="">"10"</span>

Here's the code I'm using to create the metrics

        var context = cubism.context()
            .serverDelay(0)
            .clientDelay(0)
            .step(1*5*60)
            .size(1440);

                 //aggregate 'metrics'. Each component has a 'metric' which contains its stats over time
        for(model in models){
            var attributes = models[model].attributes;
            var name = attributes['name'];
            var curContext = getMetric(name, attributes);
            statsList.push(curContext);
        }

        function getMetric(name, attributes){
            return context.metric(function(start, stop, step, callback){
                    var statValues = [];
                    //convert start and stop to milliseconds
                    start = +start;
                    stop = +stop;
                    //depending on component type, push the correct attribute
                    var type = attributes['type'];
                    var stat = attributes['stat'];

                    //cubism expects metrics over time stored in 'slots'. these slots are indexed
                    //using 'start' and 'stop'
                    //if the metric already exists, we store the stats in each of the slots
                    if(initializedMetrics[name]){
                        while(start < stop){
                            start+= step;
                            statValues.push(stat); 
                        }
                    } else{
                        //if the metric is not initialized, we fill the preceeding slots with NaN 
                        initializedMetrics[name] = true;
                        while (start < (stop - step)) {
                          start += step;
                          statValues.push(NaN);
                        }
                        statValues.push(stat);
                    }
                    if(stat < min){
                        min = stat;
                    }
                    if(stat > max){
                        max = stat;
                    }
                    //console.log("pushing stat", name, stat)
                    callback(null, statValues);
                }, name);
        }
             d3.select(this.loc).selectAll(".axis")
            .data(["top", "bottom"])
          .enter().append("div")
            .attr("class", function(d) { return d + " axis"; })
            .each(function(d) {                  d3.select(this).call(context.axis().ticks(12).orient(d)); });

        d3.select(this.loc).append("div")
            .attr("class", "rule")
            .call(context.rule());

        d3.select(this.loc).selectAll(".horizon")
            .data(statsList)
          .enter().insert("div", ".bottom")
            .attr("class", "horizon")
            .call(context.horizon().height(20));

        var size = this.getSize();
        context.on("focus", function(i) {
          d3.selectAll(".value").style("right", i == null ? null : context.size() - i + "px");
        });

    },
    getSize: function () {
        return $(this.loc).width();
    },

To phrase this as a single question, at what step is the 'value' in the horizon div set? Just to clarify, I am seeing the named horizon divs created. Just no timeseries path being drawn.