Render cubism horizon graph using custom width

Question

I'm trying to render real-time data using Cubism. Every 5 seconds I'm using a custom metric to poll my own data source and I'm displaying the last 2 hours of data. I'm building my context with:

var context = cubism.context().step(5000).size(1440);

I start out by plotting the past 2 hours of data, then start adding on in real-time. I don't need to show any axes, just the horizon chart by itself.

The catch is I need to render this graph within 216px of screen real-estate. When I render it, it doesn't seem to be adjusting for the width of the graph. Instead, the canvas always has a width of "1440", and (when I turn off the container's width) the chart goes all the way across the page.

On top of that, the horizon bars look terrible. They are very disjointed, and the dark vs. light is very scattered. See the screenshot for an idea of what I'm seeing:

Terrible looking horizon chart

Also, here is a gist containing the values rendered in this chart.

How do I get Cubism to render this chart properly using the correct width?

Thanks!

This problem is covered in the issue on GitHub https://github.com/square/cubism/issues/20. I'm looking for a solution too, and if I find/make one I'll post it back here. — rowanu, Nov 12 '13 at 15:15

score 0 · Answer 1 · answered Nov 10 '14 at 09:04

When you create the context, you specify the amount of data to be displayed in the graph with the size method.

Currently all of the data points for a graph are displayed in the graph. See https://github.com/square/cubism/issues/4

The only workaround appears to be fewer data points that need to be graphed.

As for the color, you didn't post the colors you're using (if any). Check the color documentation.

Render cubism horizon graph using custom width

1 Answers1