square / cubism Goto Github PK

Cubism.js: A JavaScript library for time series visualization.

Home Page: https://square.github.com/cubism/

License: Other

JavaScript 98.99% Makefile 1.01%

cubism's Introduction

Cubism.js

Cubism.js is a D3 plugin for visualizing time series. Use Cubism to construct better realtime dashboards, pulling data from Graphite, Cube and other sources. Cubism is available under the Apache License.

Want to learn more? See the wiki.

cubism's People

Contributors

Stargazers

Watchers

Forkers

nivertech aqlynntsai datajunkie007 jwaldrop drdla johnwlockwood clecodes neilprosser bhenerey filipsalomonsson repos-viz zbuc sashka blowery verrier majormajors tinkerware letthewookiewin saidimu souravzzz hbdev012 rmoorman alexkwood calderonsteven connor thothd behnam socialq libin bronfman gdslink fduch2k gijs qingping sreeramanmg airbuzz rhuss nvdnkpr netconstructor hc5duke dctrl-creativetechnology endenizen gerhobbelt killscar lukehan doubleotoo hrishikeshio josephruscio d3m guoplus gpierre92 pluralweb huhongbo caged beaugunderson jasonbogovich petermj phobos182 ealliaume peksa preethinarayan reznor jeffcjohnson davelyon lynntsai shawnlauzon open-source-gis bguided digvan fourks profjsb redbrainlabs uxscripts san-diego-web-design davibe dustin sbenzev johann8384 dahabit leison uakami-bernardis chewbranca andrewkononuchenko gmcnaught jbyck willcode2surf threeknife racker ma-si jjjjw bawerd jinhu pandemicsyn peterpay jivinhuang alepharchives dmourati eugine2l dunloe niangaotuantuan

cubism's Issues

Support time seeking

I can use serverDelay as a shift parameter to seek to a region of time. However there are a few issues.

once you change serverDelay, you still have to wait until the next change event firing for the graph to be refreshed
The horizon change() method that paints the canvas makes assumptions that dx is always positive (so doesn't copy the correct part of the image in reuse)
The same method also assumes you are always repainting the "right" side of the chart
The metric is also assuming it always needs to fetch new values for the "right" side of the graph (rather than past values when seeking back in time).

Time permitting I will try to provide fixes to these issues if I can without completely changing the underlying architectural assumptions.

Domain to color mapping

I've defined the following colors:

var colors = ["#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff",
"#00BBBB", "#00CCCC", "#00DDDD", "#00EEEE", "#00FFFF", "#00BB5E", "#00CC66", "#00DD6F", "#00EE77", "#00FF84", "#BBBB00", "#CCCC00", "#DDDD00", "#EEEE00", "#FFFF00J", "#BB5E00", "#CC6600m", "#DD6F00", "#EE7700", "#FF8000", "#BB0000", "#CC0000", "#DD0000", "#EE0000", "#FF0000"];

My domain ranges from 0-100 and has a arbitrary number of data points.

I load the data like:

d3.select("body")
.data(hosts.map(app_server_data_collector))
.enter().insert("div", ".bottom")
.attr("class", "horizon")
.call(context.horizon().colors(colors));

I want the colors in the last 25 entries of the index to be uniformly used for the numbers between 0-100. For example 0-4 would get #00BBBB, 96-100 to #FF0000, etc.

However every value greater than 10 is being assigned the max color value #FF0000.

What am I doing wrong?

Default extent & 3-sigma

Hi, @RandomEtc @mbostock, excuse me, but I don't like the default extent of cubism.

If here is a much bigger number in the series, for instance, a series with average 10 but maximum 1k, like this chart:

The default extent is using max and min, but this makes the chart unreadable.

I know that we can set a const number (e.g. 0, 20) to solve this. But what my situation is, there are thousands of metrics to plot, I can't set them one by one.

My solution to this is using 3-sigma rule, and the extent will be: average - 3 *stddev, average + 3 *stddev. It covers most datapoints, no singular values.

So I open this issue to ask you how I can implement this.

Sincerely, thanks.

no mouseover 'value' in chrome

focus using the arrow keys works fine

using the mouse, the "value" of each metric is blank.

any ideas?

chrome linux Version 23.0.1271.1 dev

make horizon autoupdate historical data on drag

I would like to suggest an enhancement to the interactivity of cubism:

if the width of my screen is narrow, it limits my view of historical values. what i would like is to be able to click and drag 'back in time' on the view and have cubism auto fetch and populate the horizon plot for the missing data.

Question: How do you create a push-based metric source?

Do you have an example of how to create a metric source that receives it's datapoints from a websocket?

Graphite find method that supports groupByNode/sumSeries

Hello,

Has any one managed to use the groupByNode with the current find method?
Does anyone know if something like this would be possible?

// This is just an example
findString = 'groupByNode(carbon.agents.*.{creates,metricsReceived},2,"sumSeries")'

graphite.find(findString, function(error, results) { 
    var metrics = results.sort().map(function(i) {
      return graphite.metric(i);
    });
});

Responsive Width?

Is there a way to handle resizing dynamically?

I'm using Bootstrap and my responsive page cuts the chart off when the browser shrinks. Is it possible to set it once to the width of .span12 and then listen for a change on that value?

Color cycling in horizon graphs

I'm trying to figure out how to add a feature to support color cycling in horizon graphs, i.e. when the final color is reached, start from the first color again, i.e. to visualise a stream infinitely. (At present it reaches the final color and then stops.)

Any clues to help, or if this is quick is it possible to add?

Thanks!

New Feature: Adding threshold and polarity to horizon.js

I am working on an enhancement to horizon.js where there is a settable threshold and polarity for determining which values are plotted above and which are plotted below. The defaults for the current behavior are:

threshhold = 0,
polarity = -1,

but for example :

threshhold = 50,
polarity = 1,

will draw values over 50 as "negative" or plotted on top.

Does anyone else think this is useful?
Would this change be accepted for a pull request?

d3.time still work for d3.v4?

Hi,

I am seeing an error related to d3.time at line 187 of cubism.js. There is no problem if using d3.v3.

Thanks,
Joleen

graphite port to use

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.

Don't lie when Graphite is missing 10-second data.

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.

suport InfluxDB?

how to configure pulling data from InfluxDB?

Cross-domain requests

Cubism.js uses standard json requests, but often the dashboard and graphite/cube will live in a different domains. So, when Cubism.js starts it yields the following errors in Chrome:

XMLHttpRequest cannot load http://graphite-url.com 
Origin http://cubism-url.com is not allowed by Access-Control-Allow-Origin.

There are a few ways of getting around that:

Softening the HTTP server Access-Control-Allow-Origin policy.
Launching your web browser without security checks. (e.g. Google Canary with --disable-web-security)
Making Cubism.js use JSONP.

I'm currently using (2), but I think (3) is the way to go, if possible.

Thanks!

Is the any plan to integrate Cubism.js with Grafana?

Grafana is a great tool for series visualization.

It would be great to have cubism.js integrated to it.

control width of plot

It would be lovely to control the width of the plots (i.e. the horizon plot) independently of the context's .size() method, especially for plots where getting a large number of data points is expensive.

The user would have to suffer a loss in the aesthetic of the plot in sacrificing some resolution, but this would be a better compromise to having a thin little plot!

How to start to use Cubism

I am new to cube and to cubism. and new to Javascript.
I've successfully gotten quite a few collections and metrics running in Cube. I'd like to use Cubism now to send cube queries and have Cubism graphically show the data.

If II have a cube query like below, how do I write a cubism html page which will graph the results?

http://127.0.0.1:1081/1.0/metric/get?expression=sum(cubePerformanceMeter(queryTime))/sum(cubePerformanceMeter)&start=2014-06-10&stop=2014-06-11&step=864e5

Include example and stylesheet with distribution.

serverDelay() does not respect delays where data is from prior day

serverDelay() only allows for delays from teh current day from what I can tell. E.g. Look at the stock demo: http://bost.ocks.org/mike/cubism/intro/demo-stocks.html

The axis is showing the most current data is from year 2015, when in fact it is from 2012 (see http://bost.ocks.org/mike/cubism/intro/stocks/AAPL.csv) and here is the demo code
var context = cubism.context()
.serverDelay(new Date(2012, 4, 2) - Date.now())
.step(864e5)
.size(1280)
.stop();

I'm trying to trace through and see where this is happening, but maybe someone can beat me to it?

Rule offset in 1.2.0

While for previous version the rule was aligned with the mouse pointer, with 1.2.0 there is now an offset to the pointer (in my use case).

decouple metric polling frequency from step

it would be nice if the metric's polling frequency could be changed independently of the timeseries' step.
i.e. if the timeseries has a value every 10ms, i might want to throttle down on pulling the data from the metric backend and for instance fetch and update 10 values at a time every 100ms.
or did i miss any existing api details to implement this kind of behavior?

cannot update the data in active charts

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.

horizon.remove does not unbind / remove listeners / data fetch

I've got a page of horizon charts and a drop down which serves as a category selector. When a different value is selected in the drop down, it clears out the current charts and loads new ones. Visually, everything works perfectly.

The problem is when I look at the browser's Network console (Chrome) I still see requests to the old metrics, which pretty quickly floods the server with too many requests. I am using graphite as the data source.

Here is my 'remove' code which is triggered on a change event on the selector:

d3.selectAll(".horizon")
    .call(horizon.remove)
    .remove();

Cubism 3 minute lag

I'm using cube and cubism and I've noticed that cubism is 3 minutes behind when using a 10 second step. I can see the data flowing from cube in near real time in the chrome network tab, but cubism takes about 3 minutes to actually show it on the chart. Is there a config setting for this or is this a bug?

cubism and d3 v3

Hello,

The cubism does not work well with new version of d3 (version 3), I could find the problem with graphite.find and fix it, but still the graph does not get rendered even with right metrics. I does work fine when I switch included lib to d3 2.10 and use the very same code:

d3.select(graph).selectAll(".horizon")
  .data(metrics)
  .enter().insert("div", ".bottom")
  .attr("class", "horizon")
  .call(context.horizon().extent([0, 1]));
});

this is just end part of the rendering code, that is imho the most relevant.

are there plans to make it d3.v3 compatible, or can it be fixed/patched to work?

Ales

Docs for beginners, or alternative library?

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)

Values drawn after refresh are spaced incorrectly

Cubism parameters are step(1e4).size(720) and the div element is 720px.
I'm reading from graphite (gauge metrics uploaded by statsd with flushInterval 10 sec).

After refreshing the page, the following redraws are "ugly". Here's an example after a while: http://i.imgur.com/V6D4gtg.png. The difference is very noticeable.

If I refresh the page, the whole horizon is drawn correctly (like the left side of the image).

It's seems that cubism works ,but can't fetching data from graphite！

I worked hard to drive cubim in working ,but get nothing like this ：

but the native webapp of graphite works nicely：

I am a rookie and confused ，can anybody help me!

Dynamic extent?

Is there a way to add a dynamic extend? Like 10% of the value instead of a fixed number?

When context.step() not divisible by 1 minute, graphite interprets as sec

The context.step() method takes a value which is supposed to be interpreted as a value in milliseconds. However, if it is not divisible by 6e4 (aka 1 minute), a bug in the graphite.metric function causes the value to be interpreted as a value in seconds, which of course is a problem with a value like 30 seconds (i.e. 3e4 is interpreted as ~8 hours).

I'll be sending a pull request shortly for this one.

Error: unable to load data from graphite

I'm getting this error message using the exact same code as in this stackexchange example: http://stackoverflow.com/questions/13731752/setting-height-on-horizon-context-stretches-the-graph-while-retaining-overplot

On the web console, it says:

[15:55:05.064] GET http://graphite-web/render?format=raw&target=alias(summarize(graphite-web-a.avgUpdateTime%2C%271min%27%2C%27sum%27)%2C%27%27)&from=1384785960&until=1384786499 [HTTP/1.1 200 OK 11ms]
[15:55:05.025] Error: unable to load data  (cubism.v1.js:416)

How can I refresh the whole chart

I've a custom metric that displays a user-selected statistic from a set of statistics.

When the user changes the statistic to display, can I ask cubism to call my metric for the whole time range?

AFAICS, I have to destroy the existing metric and create a new one?

Thanks.

Cubism not bubbling up left/right arrow key events?

I'd like to use Cubism on a page that also happens to have input fields, but it seems to be blocking the left/right keydowns events from bubbling up.

I have a hacked up version of the http://square.github.com/cubism/ landing page at http://bl.ocks.org/2983814 with an input field added to recreate the issue.

Not sure if this is a bug or if I'm just doing something wrong.

Unable to use extent for currency data

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

    function money(name) {
      var value = 0,
          values = [],
          i = 0,
          last;
      return context.metric(function(start, stop, step, callback) {
        $.getJSON("Website Link", function (api_data) {
          start = +start, stop = +stop;
          if (isNaN(last)) last = start;
          while (last < stop) {
            last += step;
            values.push(_.where(api_data,{"code": name})[0].rate);
          }
          callback(null, values = values.slice((start - stop) / step));
        });
      }, name);
    }

        var USD = money("USD"),
            EUR = money("EUR");
            INR = money("INR");

        d3.select(selection).call(function(div) {

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

          div.selectAll(".horizon")
              .data([USD, EUR, INR])
            .enter().append("div")
              .attr("class", "horizon")
              .call(context.horizon().format(d3.format(".2f")));

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

        });

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

I am using the above code and the entire band for all the three currencies is having green color without the rates' variation. Check the image

Please help me out.!!! :(

find metrics without expanding all wildcards

The current graphite.find() function expands all wildcards by passing "format=completer" to the metrics/find command. However, sometimes this is not desired; for example, if the resulting metrics are to be passed to a function (e.g. sumSeries), some of the wildcards should remain.

Proposal is to add a function graphite.findSome(), which accepts wildcards but only expands the final one (i.e. it doesn't pass "format=completer" to graphite.

Datetime synchronization with data

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

no graphite data appears in graphs when using derivative function

When using derivative or some other processing function for accessing graphite metric like nonNegativeDerivative(collectd.ts_toa.interface-ppp0.if_octets.rx) initial set of data appears in the graph but it is not updated.

Graphite seems to calculate function only for the requested period so derivative for a single data value produces zero and we therefore receive no data for update. I can check that in chrome console.

If I remove the call for nonNegativeDerivate function from metric definition the data seems to be displayed ok (but it becomes not very useful in this case) so I don't think this is the issue with my setup.

Graphite 0.9.10 is used and cubism.js.v1.min.js from gh-pages branch.

Smooth interpolation between values?

Hi,

Is it possible to add an argument to Cubism.js that will allow it to do smooth interpolation between values, or over missing values?

Somebody asked about it on SO here:

http://stackoverflow.com/questions/13732309/interpolation-on-cubism-graphs

and the answer mentioned using custom interpolators in D3:

http://bl.ocks.org/mbostock/3310323

Is something like that possible to add into Cubism.js?

Cheers,
Victor

Is it possbile to implement a `drawAsInfinite` line for graphite metrics?

I'm using the cubism to build a frontend for graphite, is it possible to add "deployment line" above the whole graph?

I get the idea from here:

http://codeascraft.etsy.com/2011/02/15/measure-anything-measure-everything/

I'm relatively new to js and unable to understand the whole source code, so asked here wanna know if it's possible?

Thanks.

Graphs eventually stop working

I have a pretty basic graph and if I leave it up in Chrome after about an hour or so it just stops updating with live data and I eventually have to reload the page. Is there any way to prevent this from happening ?

-John

Time off by 4 hours

When creating a basic horizon chart all the times for the metric's are off by -4 hours.
Graphite is returning UTC/GMT time via the raw url that is being sent (verified in browser and via the epoch timestamp).
Graphite's own graphs have correct time as do other graphite tools I have used (Highcharts for example).

I have 2 different graphite servers (one at home and one at work) with cubism graphing various things and all my charts are off by -4 hours for both installs (no I did not copy my config either between the servers).

I'm fairly sure this is limited to cubism or d3 but can't figure out how to fix it or change the timezone properly for cubism.

Any help would be greatly appreciated, thanks!

horizon doesn't draw data after a stop and start

When a context is stopped via context.stop() and then later started, the data in between those times is never drawn.

Graphite summarize 'sum' not always appropriate

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.

right part of axis gets colored unexpectedly

few seconds after it's cleaned, but happen again when last tick moves left

It's also cleaned if I double click on it
sadly I wasn't able to reproduce this problem: http://jsfiddle.net/B2WJM/21/
but I have the same cubism css in my app code: http://188.165.206.195:8888/

browser: Chrome 29

Metric Plugin API?

I've written a time series database that I'm using with cubism, but I find adding support for it just a bit awkward. Currently, I've replaced the calls to cubism.context() with mydatabase.context(), which calls cubism.context() and injects a new metric into the context so it can access the context properly and work as expected.

Has any thought been put into an API for registering new metrics? It looks like it'd be really easy to add a cubism.registerMetric() function to provide the proper context and let my plugin become it.

Rule disappears

I tried to create a rule by:

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

Even though I can see the values of where my mouse is in the charts, I just can't see the rule line. It's like it becomes invisible.

How can I change the color of that line? Or what did I do wrong?

Still maintained?

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 ?

Wiki links to API reference broken

Introduction page looks promising, but the GitHub wiki's links to all but the introction are broken... Any idea where I can find documentation?

Cubism giving "Error" in log but not saying why

Hi,

I've set up Cubism with our environment and the machines are correctly being discovered and filled out on the page but I'm getting some sort of non-descript error in the console when they're being drawn:
Error {}

Any ideas why this would pop up?