minimal cubism.js horizon chart example (TypeError: callback is not a function)

StackOverflow https://stackoverflow.com/questions/18490149

  •  26-06-2022
  •  | 
  •  

Question

I'm having a devil of a time going from any code found on the d3 and cubism API pages to altering things to work with what I need them to do...

I'm trying to follow the steps for a Horizon graph as listed here https://github.com/square/cubism/wiki/Horizon but I don't have a Cube or Graphite data source.

So I'm trying to make a minimal example metric from mbostock's answer here Using Other Data Sources for cubism.js and/or the random-value-returning metric example here https://github.com/square/cubism/wiki/Context

I guess on that Context API page, where it explains the parameters to context.metric(), I don't understand the part "...and the callback function for when results are available". I have the following on my server and when I view/refresh in my browser I get "TypeError: callback is not a function" in my browser's console:

            <body> 
                <div class="mag"></div>

                <script type="text/javascript">

var myContext = cubism.context();

var myHoriz = myContext.horizon()
        .metric(function(start, stop, step, callback) {
                var values = [];
                start = +start;
                stop = +stop;
                while (start < stop) {
                        start += step;
                        values.push(Math.random());
                }
                callback(null, values);
        });

d3.select(".mag").selectAll("p")
        .data([1, 2, 3, 7])             // the "times" for which I want to graph the data
        .enter().append("p")
        .call(myHoriz);

                </script>
        </body>

Oh (edit), I should add, the code does run, in that I do get a document with four paragraphs added into the div, and the text contents of each paragraph are the numbers 1, 2, 3, 7. So I guess at least the select(), data(), enter(), and append() bits are working.

Was it helpful?

Solution 2

It looks like you are confusing horizon.metric with context.metric. It is context.metric that takes a function of the signature you're defining.

OTHER TIPS

Okay Scott Cameron's point got me over the hurdle. I'll "answer" here as well with the resulting working code for future readers. Still not as minimal of an example as I'd like, but eliminates the error, and I'll ask a follow-up in a new question for making it more minimal.

            <body> 
                <div class="mag"></div>

                <script type="text/javascript">

var myContext = cubism.context();

var myMetr = myContext.metric(function(start, stop, step, callback) {
        var values = [];
        start = +start; 
        stop = +stop;
        while (start < stop) { 
                start += step;
                values.push(Math.random());
        }       
        callback(null, values);
});     

var myHoriz = myContext.horizon()
        .metric(myMetr);

d3.select(".mag").selectAll("p")
        .data([1, 2, 3, 7])
        .enter().append("p")
        .call(myHoriz);

                </script>
        </body>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top