The default ones are occasionally ill-suited for some graphs. For example, it shows months only on the ticks, and time only on hover.

Example:

Before:

After:

The current librato source retrieve all data from a metric, and then filter by source, but if you have many sources this will be very slow and inefficient.

This use librato composite metric feature to be able to do retrieve a metrics/sources in one call, so this will make librato API look like this:

var context = cubism.context(), // a default context
    librato = context.librato("[email protected]", "8585ae5c30d55ddef4");

var metrics = librato.metric("sum(series(\"hgsc_cpu_used\",  \"ardmore\"))");

I have been trying to integrate cubism with graphite. My graphite installation works with graphite server bound to unix:// and using nginx to serve it at port 8050. How ever, when I give url as http://server:8050/ for graphite context, it does not render any graph.

Apache Ambari (http://incubator.apache.org/ambari/index.html) uses Ganglia (with RRDs, not Graphite) for its metrics, and we were very interested in upgrading to using your fantastic Cubism visualization for said metrics across all the hosts in a Ganglia cluster.

I wrote the new gangliaWeb.js Cubism source (and have it working nicely), so I figured I'd give back to the community - feedback would be much appreciated, and I'll be happy to make improvements as you might see fit.

Using GangliaWeb as a source means users of Ganglia get to work with both RRDs and Graphite as the storage engine, for the price of one.

Thanks for the great foundation, Mike!

/V

P.S. Prospective early adopters should note that this won't work with GangliaWeb until https://github.com/ganglia/ganglia-web/pull/110 is committed.

The context.step is defined in milliseconds. But there is no step to convert between milliseconds and seconds before sending data to graphite. Currently metrics that have to be summarized in seconds are broken as the request is sent to graphite in milliseconds.

Configuration: var context = cubism.context() .step(15 * 1000) // 15 seconds per value .size(1440); // fetch 1440 values

Result: http://carbon1/render?format=raw&target=alias(summarize(my_stat, '15000sec', 'sum'),'')&from=1342097670&until=1342119299

• Makes it easier to position the title and value relative to each other and provides an additional style hook.
• Includes updated compiled and minified versions

Hey Mike/Square,

I was playing with cubism last night and wanted to be able to move more than 1 unit at a time, but didn't want to have to use the mouse. So, this PR allows users of cubism to hold shift while pressing the Left or Right arrow keys, and it will move the focus 20 units in the direction they'd like. 20 is an arbitrary number that seemed good to me, so there's no real significance behind that.

Anyways - I thought this would be useful. Have no idea if you wanted this kind of functionality or not.

Thanks for making awesome stuff!

When the step size is not equal to 1e4, graphite.metric merges data with the summarize command using the 'sum' function; this adds the contents of each individual bucket. However, often the 'avg' function is a better choice, which returns the mean of each bucket.

I propose adding another parameter to the graphite.metric function, to make it graphite.metric(expression, func). If func is not passed, the current 'sum' is used; however, other strings are passed as the func parameter in the Graphite summarize function.

This pull request adds support for a Jolokia source. This source is different insofar as it doesn't queries a backend for already fetched values but fetches JMX values afresh from within the client.

Please have a look at this demo for how it looks like and how it works.

I'm still wondering whether to add Jolokia support to Cubism or vice versa. I would be happy to have it included included on a par with Graphite or Cube, but I could understand if this doesn't fit well (in which case I would include the integration directly in Jolokia)

For the patch to work, you need the latest jolokia.js 1.4-SNAPSHOT (contained in this jar file, release is coming this week) and jQuery 1.7.x

As soon as you consider it for inclusion in cubism.js, I will add the appropriate documentation to the Wiki. And yes, I'm going to support it (e.g. error management can be still improved)

Big Kudos to your for giving the world such an excellent (and unique) graphing library. Thank you!

I have followed your example from the Cubism web-site and then added a simple button to the web-page that alters the data attribute, updating with a different combination of data as a test.

I think I have followed the examples from the D3 tutorial correctly for altering data, but in the end the graphs do not change.

Here is my example that fails for my test setup.

cubism_test.js

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);
}

var context = cubism.context()
    .serverDelay(1000)
    .clientDelay(0)
    .step(1e3)
    .size(960);

var foo = random("foo"),
    bar = random("bar");

d3.select("#test_chart").call(function(div) {

  div.append("div")
      .attr("class", "axis")
      .call(context.axis().orient("top"));

  div.selectAll(".horizon")
      .data([foo, bar, foo.add(bar), foo.subtract(bar)])
    .enter().append("div")
      .attr("class", "horizon")
      .call(context.horizon().extent([-20, 20]));

  div.append("div")
      .attr("class", "rule")
      .call(context.rule());

});



context.metric(function(start, stop, step, callback) {
  var values = [];

  // convert start & stop to milliseconds
  start = +start;
  stop = +stop;

  while (start < stop) {
    start += step;
    values.push(Math.random());
  }

  callback(null, values);
});


// On mousemove, reposition the chart values to match the rule.
context.on("focus", function(i) {
  d3.selectAll(".value").style("right", i == null ? null : context.size() - i + "px");
});

// On mousemove, reposition the chart values to match the rule.
d3.select("#test_chart button").on("click", function(i) {

  var charts = 
    d3.selectAll(".horizon").data([foo.subtract(bar), bar, foo, foo.add(bar)]);

  charts.exit().remove();  

  d3.selectAll(".horizon")
    .data([ bar.subtract(foo) ])
    .enter().append("div")
        .attr("class", "horizon")
        .call(context.horizon().extent([-20, 20]));

});

test.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>test</title>
<style>     


.axis path, .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}


.axis {
  font: 10px sans-serif;
}

.axis text {
  -webkit-transition: fill-opacity 250ms linear;
}

.axis path {
  display: none;
}

.axis line {
  stroke: #000;
  shape-rendering: crispEdges;
}

.horizon {
  border-bottom: solid 1px #000;
  overflow: hidden;
  position: relative;
}

.horizon {
  border-top: solid 1px #000;
  border-bottom: solid 1px #000;
}

.horizon + .horizon {
  border-top: none;
}

.horizon canvas {
  display: block;
}

.horizon .title,
.horizon .value {
  bottom: 0;
  line-height: 30px;
  margin: 0 6px;
  position: absolute;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  white-space: nowrap;
}

.horizon .title {
  left: 0;
}

.horizon .value {
  right: 0;
}

.line {
  background: #000;
  opacity: .2;
  z-index: 2;
}


#test_chart { min-height: 155px; width: 960px } 

</style>        
    </head>

    <body>
            <div id="test_chart">

                <button>Apply</button>
            </div>


    </body>
</html>

As an aside it would be helpful if you added a basic style sheet to the cubism distribution, because without it the charts do not function, well or if at all. I took the styles from your tutorial page, not sure on the copyright of such things, but in testing your tutorial I thought that was ok.

Peter Myerscough-Jackopson.

When using Graphite we're not able to specify a name for the metric, which results in long metric names.

This patch should allow the following to work:

graphite.metric("myTarget", "name")

It will default the name of the metric to expression as before if the name parameter isn't given.

Let me know if I'm barking up the wrong tree. My JavaScript isn't fantastic.

Hello guys, I've done a ES6 module of cubism based on D3V5: cubism-es. Now cubism-es is available via npm install.

You may check working demos, basic usages, api breaks and limitations in project's homepage.

The code base have changed a lot from the original cubism, including not only the code model but also packaging. I'm not sure if submitting a PR is still appropriate in this situation.

I proposed this project in discussion #130 still maintained? but got no reply from Square's cubism team so far. Therefore, I decide to publish cubism-es rather than wait for relies.

If there's any problems, please feel free to open issues or propose feature requests.

Yours Yun Xing

I've looked at every Horizon charting library I can find and this is by far the best looking.

I have a dashboard built on PubNub and I'd like to use this but I really don't know where to start. I'll dive in, but I thought I'd ask here first if I'm missing any resources (I don't see any setup/getting started docs on the wiki).

Alternatively, since this hasn't been updated in 3 years, does anyone know of a similar library?

I've found these: https://bl.ocks.org/mbostock/1483226 http://mbostock.github.io/protovis/ex/horizon.html http://opensource.addepar.com/ember-table/#/horizon (leaning towards this one) https://github.com/d3/d3-plugins/tree/master/horizon (really ugly) http://kmandov.github.io/d3-horizon-chart/ (another contender)

Hello Team,

I am facing an issue while rendering time-series data using cubism. It's not able to synchronize with the given date and time. Please find attached screenshot and files.

Regards, Dashrath

timeseries.html

data.csv ELEMENT_NAME,MEASURED_TIME,ELEMENT_VALUE Al2O3,2016-04-21 15:13:00,2.45 Al2O3,2016-04-21 15:15:00,15.87 Al2O3,2016-04-21 15:17:00,-0.21 Al2O3,2016-04-21 15:18:00,22 Al2O3,2016-04-21 15:19:00,-0.15 Al2O3,2016-04-21 15:21:00,10.13 Al2O3,2016-04-21 15:22:00,2.45 Al2O3,2016-04-21 15:24:00,-0.21 Al2O3,2016-04-21 15:27:00,15.87 Al2O3,2016-04-21 15:29:00,2.45 Al2O3,2016-04-21 15:30:00,8.77 Al2O3,2016-04-21 15:32:00,17.25 Al2O3,2016-04-21 15:35:00,26 Al2O3,2016-04-21 15:37:00,15.87 Al2O3,2016-04-21 15:38:00,-0.15 Al2O3,2016-04-21 15:40:00,-0.15 Al2O3,2016-04-21 15:41:00,31 Al2O3,2016-04-21 15:43:00,22 Al2O3,2016-04-21 15:45:00,15.87 Al2O3,2016-04-21 15:46:00,26 Al2O3,2016-04-21 15:48:00,15.87 Al2O3,2016-04-21 15:49:00,-0.15 Al2O3,2016-04-21 15:51:00,2.45 Al2O3,2016-04-21 15:52:00,-0.15 Al2O3,2016-04-21 15:54:00,17 Al2O3,2016-04-21 15:55:00,26 Al2O3,2016-04-21 15:57:00,-0.15 Al2O3,2016-04-21 15:58:00,-0.21 Al2O3,2016-04-21 16:00:00,2.45 Al2O3,2016-04-21 16:02:00,-0.21 Al2O3,2016-04-21 16:03:00,17 Al2O3,2016-04-21 16:05:00,8.77 Al2O3,2016-04-21 16:06:00,-0.21 Al2O3,2016-04-21 16:08:00,17 Al2O3,2016-04-21 16:11:00,8.77 Al2O3,2016-04-21 16:12:00,9.54 Al2O3,2016-04-21 16:14:00,22 Al2O3,2016-04-21 16:15:00,0 Al2O3,2016-04-21 16:18:00,17 Al2O3,2016-04-21 16:20:00,17.25 Al2O3,2016-04-21 16:22:00,17.25 Al2O3,2016-04-21 16:23:00,8.77 Al2O3,2016-04-21 16:25:00,8.77 Al2O3,2016-04-21 16:26:00,26 Al2O3,2016-04-21 16:28:00,10.13 Al2O3,2016-04-21 16:29:00,-0.21 Al2O3,2016-04-21 16:31:00,8.77 Al2O3,2016-04-21 16:32:00,31 Al2O3,2016-04-21 16:34:00,9.54 Al2O3,2016-04-21 16:37:00,10.13 Al2O3,2016-04-21 16:39:00,9.54 Al2O3,2016-04-21 16:40:00,-0.15 Al2O3,2016-04-21 16:43:00,-0.21 Al2O3,2016-04-21 16:45:00,26 Al2O3,2016-04-21 16:47:00,0 Al2O3,2016-04-21 16:50:00,7.88 Al2O3,2016-04-21 16:51:00,15.87 Al2O3,2016-04-21 16:53:00,15.87 Al2O3,2016-04-21 16:54:00,2.45 Al2O3,2016-04-21 16:56:00,15.87 CaO,2016-04-21 15:15:00,15.87 CaO,2016-04-21 15:17:00,15.87 CaO,2016-04-21 15:18:00,-0.46 CaO,2016-04-21 15:21:00,19.54 CaO,2016-04-21 15:22:00,51.25 CaO,2016-04-21 15:24:00,27.88 CaO,2016-04-21 15:27:00,15.87 CaO,2016-04-21 15:29:00,40.13 CaO,2016-04-21 15:30:00,19.54 CaO,2016-04-21 15:32:00,51.25 CaO,2016-04-21 15:34:00,12.45 CaO,2016-04-21 15:35:00,12.45 CaO,2016-04-21 15:37:00,38.77 CaO,2016-04-21 15:38:00,0 CaO,2016-04-21 15:40:00,51.25 CaO,2016-04-21 15:41:00,70.22 CaO,2016-04-21 15:43:00,38.77 CaO,2016-04-21 15:45:00,15.87 CaO,2016-04-21 15:46:00,40.13

Last commit been 2 years back and a number of pull request are still pending. Its really great d3 plugin and one of the only one in javascript which is actually optimised for time-series data. Though it still supports latest d3 version, would love to know if it is going to be maintained for future releases & any additions are in roadmap ?