Search code examples
d3.jscubism.js

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


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.


Solution

  • 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.