I am just starting with cubism.js
Resetting the example code, I can show two metrics. one calculated (kpi1) is a random function, one of Cube (kpi2). It works fine in the context stage 1e4, as soon as I change it to 1e3, the calculated one - random - shows thin with a resolution of 1 s, and one of the Cube does not appear at all.
it works:
var context = cubism.context() .serverDelay(0) .clientDelay(0) .step(1e4) .size(960);
this is not true:
var context = cubism.context() .serverDelay(0) .clientDelay(0) .step(1e3) .size(960);
What am I doing wrong?
<!DOCTYPE html> <html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta charset="utf-8"> <title>Dashboard</title> </head><body><div id="body"> <div id="kpi1"></div> <div id="kpi2"></div> <script src="../d3.v2.js"></script> <script src="../cubism.v1.js"></script> <script>function random(name) { var value = 0, values = [], i = 0, last; return context.metric(function(start, stop, step, callback) { start = +start, stop = +stop; if (isNaN(last)) last = start; while (last < stop) { last += step; value = Math.max(-10, Math.min(10, value + .8 * Math.random() - .4 + .2 * Math.cos(i += .2))); values.push(value); } callback(null, values = values.slice((start - stop) / step)); }, name); }</script> <script> var context = cubism.context() .serverDelay(0) .clientDelay(0) .step(1e4) .size(960); var foo = random("foo"); var cube = context.cube(); d3.select("#kpi1").call(function(div) { div.selectAll(".horizon") .data([foo]) .enter().append("div") .attr("class", "horizon") .call(context.horizon()); }); d3.select("#kpi2").call(function(div) { div.selectAll(".horizon") .data([cube.metric("median(cube_compute(ms))")]) .enter().append("div") .attr("class", "horizon") .call(context.horizon()); }); </script> </body></html>
source share