Question

I am loading metrics from Graphite, but when they are rendered on a horizon chart they are squished on the left side of the graph, and not taking the entire width of the graph space. Here’s a screenshot to show what I mean:

That data is from the 3 hour window I requested. Here’s some of the graphite output for the topmost horizon chart:

,1347632400,1347643200,60|892.0,526.0,371.0,1475.0,1234.0 [...] 1250.0,1604.0,1146.0,965.0

It’s tough to tell from the image, but those values do line up with what is drawn. It’s just that they’re not taking all the space.

The chart is being drawn into a simple <div id="#graphs"> which has only position: relative and width: 1080px; for CSS properties. Here’s the Cubism JavaScript:

var context = cubism.context()
    .step(1e4)
    .size(1080);  // 3 hours

var graphite = context.graphite("http://graphite.example.com");
var horizon = context.horizon().metric(graphite.metric).height(100);

var metrics = [
    "prod.counts.total_stats",
    "stage.counts.total_stats",
    "dev.counts.total_stats"
]

d3.select("#graphs").append("div")
    .attr("class", "axis")
    .call(context.axis().ticks(12).orient("top"));

d3.select("#graphs").append("div")
    .attr("class", "rule")
    .call(context.rule());

d3.select("#graphs").selectAll(".horizon")
    .data(metrics)
  .enter().append("div")
    .attr("class", "horizon")
    .call(horizon);

The rest of the CSS is pretty much copy-pasted from the stocks demo. In the interest of brevity I won’t include that, but I can if it’s necessary.

Answer 1

See issue 20:

Currently Graphite will return its lowest-resolution data when Cubism requests 10-second metrics; however, the lowest-available resolution may in fact be higher resolution (such as 1-minute data). Cubism, not knowing any better, displays this data inaccurately rather than upsampling the data.

You can work-around this by storing higher resolution data in Graphite, or by saying summarize(metric, “10s”).