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