Do not draw empty metrics

Question

I have just started using Cubism.js with Graphite as its data source an I am facing the following issue:

When I ask cubism to find all the metrics that match a specific pattern "findMetrics" it finds all the metrics correctly, but I would like it to only draw the metrics that actually contain data points (Ignore all the metrics that are empty).

I have built a simplified version to illustrate the problem:

<meta charset="utf-8" />
<style>@import url(//square.github.com/cubism/style.css);</style>
<div id="body">
<div id="graphs"></div>

<script src="http://d3js.org/d3.v2.js" charset="utf-8"></script>
<script src="http://square.github.com/cubism/cubism.v1.js" charset="utf-8"></script>
<script>
  var context = cubism.context().serverDelay(5 * 60 * 1000).step(60 * 1000);
  var graphite = context.graphite("http://graphite-server");
  // Graphite search metric pattern. In my case this it returns 4 metrics
  var findMetrics = 'carbon.agents.*.{errors,committedPoints}';

  graphite.find(findMetrics, function(error, results) {
    // Map find results to array and set to graphite.metric object type
    var metrics = results.sort().map(function(i) { return graphite.metric(i); });

    // Loop through the array and print stuff to "graphs" div
    for (var i=0;i<metrics.length;i++){
      var metricName = metrics[i].toString().split('.');

      d3.select("#graphs").call(function(div) {
        div.append("div").selectAll(".horizon")
           .data([metrics[i]])
           .enter().append("div")
           .attr("class", "horizon")
           .style("font-size", "10px")
           .call(context.horizon().title(metricName[metricName.length-1]));
        });
    }
  });
</script>

Example output: https://i.stack.imgur.com/s4rGZ.jpg

Questions:

Where should the filtering be done at the Cubism level or at the D3 one?
How can I tell Cubism or D3 not to draw the graphs that dont contain any data?

I hope someone can help me with this issue.

Thanks in advance for any help.

Have you tried checking whether the metrics are empty before calling d3? I.e. something like `if(metrics[i].length > 0) { d3.select(...) }`. — Lars Kotthoff, Jun 28 '13 at 22:31

score 0 · Answer 1 · answered Jul 01 '13 at 20:28

I have finally resolved this issue by adding the feature "hideEmpty(true)"

https://github.com/square/cubism/pull/56

  d3.select("#graphs").call(function(div) {
    div.append("div").selectAll(".horizon")
       .data([metrics[i]])
       .enter().append("div")
       .attr("class", "horizon")
       .style("font-size", "10px")
       .call(context.horizon()
                    .hideEmpty(true)
                    .title(metricName[metricName.length-1]));
    });

Do not draw empty metrics

1 Answers1