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



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.

  • Added axis.focusFormat

    Added axis.focusFormat

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






    opened by dustin 13
  • Improve librato source

    Improve librato source

    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\"))");
    opened by cyberdelia 9
  • graphite port to use

    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.

    opened by ashishrv 7
  • Add Support For Ganglia Metrics

    Add Support For Ganglia Metrics

    Apache Ambari ( 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!


    P.S. Prospective early adopters should note that this won't work with GangliaWeb until is committed.

    opened by reznor 6
  • Graphite summarize function fix

    Graphite summarize function fix

    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

    opened by phobos182 5
  • group title and value under common ancestor

    group title and value under common ancestor

    • 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
    opened by caged 5
  • Keydown while holding Shift moves focus more than 1 unit

    Keydown while holding Shift moves focus more than 1 unit

    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!

    opened by connor 5
  • Graphite summarize 'sum' not always appropriate

    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.

    opened by shawnlauzon 4
  • Support for Jolokia as source

    Support for Jolokia as source

    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!

    opened by rhuss 4
  • cannot update the data in active charts

    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.


    function random(name) {
      var value = 0,
          values = [],
          i = 0,
      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)));
        callback(null, values = values.slice((start - stop) / step));
      }, name);
    var context = cubism.context()
    var foo = random("foo"),
        bar = random("bar");"#test_chart").call(function(div) {
          .attr("class", "axis")
          .data([foo, bar, foo.add(bar), foo.subtract(bar)])
          .attr("class", "horizon")
          .call(context.horizon().extent([-20, 20]));
          .attr("class", "rule")
    context.metric(function(start, stop, step, callback) {
      var values = [];
      // convert start & stop to milliseconds
      start = +start;
      stop = +stop;
      while (start < stop) {
        start += step;
      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."#test_chart button").on("click", function(i) {
      var charts = 
        d3.selectAll(".horizon").data([foo.subtract(bar), bar, foo, foo.add(bar)]);
        .data([ bar.subtract(foo) ])
            .attr("class", "horizon")
            .call(context.horizon().extent([-20, 20]));


    <!DOCTYPE html>
    <html lang="en">
            <meta charset="utf-8" />
    .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 } 
                <div id="test_chart">

    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.

    opened by PeterMJ 4
  • Allow naming of Graphite metrics

    Allow naming of Graphite metrics

    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.

    opened by neilprosser 4
  • A D3V5 & ES6 port of cubism

    A D3V5 & ES6 port of cubism

    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

    opened by BigFatDog 3
  • Docs for beginners, or alternative library?

    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: (leaning towards this one) (really ugly) (another contender)

    opened by ScottBeeson 1
  • Datetime synchronization with data

    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 cubism


    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

    opened by dashrathc 1
  • Still maintained?

    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 ?

    opened by agaurav 14
Interactive visualizations of time series using JavaScript and the HTML canvas tag

dygraphs JavaScript charting library The dygraphs JavaScript library produces interactive, zoomable charts of time series: Learn more about it at dygr

Dan Vanderkam 3k Jan 3, 2023
Pretty time-series line graphs

Morris.js - pretty time-series line graphs Morris.js is the library that powers the graphs on It's a very simple API for dr

null 7k Dec 24, 2022
📈 A small, fast chart for time series, lines, areas, ohlc & bars

?? μPlot A small (~35 KB min), fast chart for time series, lines, areas, ohlc & bars (MIT Licensed) Introduction μPlot is a fast, memory-efficient Can

Leon Sorokin 7.5k Jan 7, 2023
A general purpose, real-time visualization library.

Epoch By Ryan Sandor Richards Epoch is a general purpose charting library for application developers and visualization designers. It focuses on two di

Epoch 5k Dec 30, 2022
Timeline/Graph2D is an interactive visualization chart to visualize data in time.

vis-timeline The Timeline/Graph2D is an interactive visualization chart to visualize data in time. The data items can take place on a single date, or

vis.js 1.2k Jan 3, 2023
Render echarts in obsidian,Apache ECharts,An Open Source JavaScript Visualization Library

obsidian-echarts Render echarts in obsidian,Apache ECharts,An Open Source JavaScript Visualization Library

null 23 Dec 26, 2022
Lightweight, interactive planning tool that visualizes a series of tasks using an HTML canvas

Planner Lightweight, interactive planning tool that visualizes a series of tasks using an HTML canvas. Try it yourself at Plans created

Brian Vaughn 512 Jan 2, 2023
Apache ECharts is a powerful, interactive charting and data visualization library for browser

Apache ECharts Apache ECharts is a free, powerful charting and visualization library offering an easy way of adding intuitive, interactive, and highly

The Apache Software Foundation 53.8k Jan 9, 2023
a graph visualization library using web workers and jQuery

arbor.js -------- Arbor is a graph visualization library built with web workers and jQuery. Rather than trying to be an all-encompassing framework, a

Christian Swinehart 2.6k Dec 19, 2022
Data visualization library for depicting quantities as animated liquid blobs

liquidity.js A data visualization library for depicting quantities as animated liquid blobs. For a demonstration of what the final product can look li

N Halloran 91 Sep 20, 2022
Powerful data visualization library based on G2 and React.

BizCharts New charting and visualization library has been released: More details about BizCharts Features Rea

Alibaba 6k Jan 3, 2023
🌏 A Declarative 3D Globe Data Visualization Library built with Three.js

Gio.js English | 中文 React Version: react-giojs Wechat minigame: wechat usage Gio.js is an open source library for web 3D globe data visualization buil

syt123450 1.6k Dec 29, 2022
📊 Data visualization library for React based on D3

Data visualization library for React based on D3js REAVIZ is a modular chart component library that leverages React natively for rendering the compone

REAVIZ 740 Dec 31, 2022
A library for visualization and creative-coding

Pts Pts is a typescript/javascript library for visualization and creative-coding. Get started at Please give it a try, file issues, and sen

William Ngan 4.9k Jan 3, 2023
Apache ECharts is a powerful, interactive charting and data visualization library for browser

Apache ECharts Apache ECharts is a free, powerful charting and visualization library offering an easy way of adding intuitive, interactive, and highly

The Apache Software Foundation 53.8k Jan 5, 2023
An open-source visualization library specialized for authoring charts that facilitate data storytelling with a high-level action-driven grammar.

Narrative Chart Introduction Narrative Chart is an open-source visualization library specialized for authoring charts that facilitate data storytellin

Narrative Chart 45 Nov 2, 2022
A port of the Processing visualization language to JavaScript.

⚠️ This project has been archived ⚠️ With the development of p5js and the API advances in Processing itself, as well as Processing.js itself having be

Processing.js 3.1k Jan 4, 2023
Data Visualization Components

react-vis | Demos | Docs A COMPOSABLE VISUALIZATION SYSTEM Overview A collection of react components to render common data visualization charts, such

Uber Open Source 8.4k Jan 2, 2023
📊 A highly interactive data-driven visualization grammar for statistical charts.

English | 简体中文 G2 A highly interactive data-driven visualization grammar for statistical charts. Website • Tutorial Docs • Blog • G2Plot G2 is a visua

AntV team 11.5k Dec 30, 2022