I am a newbie in d3. I am trying to visualize some data using cubism every 10 mins. My json string has 2 keys which are name(string) and activity(double).

I am having trouble with defining the metric. I looked at the stocks demo but somehow while debugging i find that the control never goes into the d3.json line. I am kinda stuck here. Similarly the initial d3.json code where i want to separate out the names to pass on to .data while selecting the .horizon.

If i use the normal random numbers like in example then it works.

Here is the metric definition in the random function-

 var foo;
    d3.json("rest.php/data", function(data) {
        var recs = data.records;
        for(var i=0; i<recs.length; i++) {
            names[i] = recs[i].name;
            foo = random(names[i]);

            .attr("class", "horizon")
            .call(context.horizon().extent([-20, 20]));

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

    function random(name) {
        return context.metric(function(start, stop, step, callback) {
            var values = [];
            d3.json("rest.php/data", function(rows) {
                    var recs = rows.records;
                    start = +start;
                    start = +stop;
                    while(start < stop){
                        start += step;
                callback(null, values);
        }, name);
When i use the a defined string of data like var foo = random("foo"); it works but when i try to send data like above it fails and throws an error -

TypeError: metric_ is undefined
var extent = metric_.extent();
Can anyone please help me out here ?