envision.js demo

by cesutherland

HTML

<script src="https://raw.github.com/HumbleSoftware/envisionjs/master/envision.js"></script>
<div id="container"></div>

CSS

#container {
  width: 400px;
  margin: 24px auto 0px auto;
}

/* Dimensions */
.envision-finance {
  width: 600px;
}
.envision-finance-price .envision-component {
  height : 200px;
}
.envision-finance-volume .envision-component {
  height : 60px;
}
.envision-finance-connection .envision-component {
  height: 16px;
}
.envision-finance-summary .envision-component {
  cursor: all-scroll;
  height : 70px;
  margin-top: -2px;
}

/* Bubble Borders */
.envision-finance-price,
.envision-finance-volume {
  border: 1px solid #B6D9FF;
  background: #fff;
}
.envision-finance-price {
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}
.envision-finance-volume {
  border-top: 0px;
}

/* Connection overlay */
.envision-finance-connection canvas {
  z-index: 10;
  background: #fff;
}
.envision-finance-connection canvas object {
  position: absolute;
  top: 0px;
}

/* Y-Axis Labels */
.envision-finance-price .flotr-grid-label {
  margin-left: 4px;
}
.envision-finance-price .flotr-grid-label.first {
  margin-top: -6px;
}
.envision-finance-price .flotr-grid-label.last {
  margin-top: 6px;
}

/* X-Axis Labels */
.envision-finance-summary .flotr-grid-label {
  margin-top: 3px;
}

/* Mouse Tracker */
.envision-finance-price .flotr-mouse-value {
    font-size: 12px;
}
.envision-finance-volume .flotr-mouse-value {
  display: none;
}

@media screen and (max-width: 600px) {
  .envision-finance {
    width: 100%;
  }
  .envision-finance-price .envision-component {
    height: 120px;
  }
  .envision-finance-summary .envision-component,
  .envision-finance-volume .envision-component {
    height: 40px;
  }
}

/* Dimensions */
.envision-timeseries {
  width: auto;
}
.envision-timeseries-detail .envision-component {
  height: 200px;
}
.envision-timeseries-connection .envision-component {
  height: 16px;
}
.envision-timeseries-summary .envision-component {
  cursor: all-scroll;
  height: 80px;
}

/* Bubble Borders */
.envision-timeseries-detail {
  padding-top: 7px;
  border: 1px...

JavaScript

(function () {
  var
    container = document.getElementById('container'),
    x = [],
    y = [],
    data = [x, y],
    options = {
      container : container,
      data : {
        detail : data,
        summary : data
      }
    },
    i, vis;

   for (i = 0; i < 10; i += .1) {
     x.push(i);
     y.push(Math.sin(i));
   }

  vis = new envision.templates.TimeSeries(options);

  vis.summary.trigger('select', {
    data : {
      x : {
        min : 1,
        max : 2
      }
    }
  });
})();