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 = [],
  y1 = [],
  y2 = [],
  data, options, i;

// Data Format:
data = [
  [x, y1], // First Series
  [x, y2]  // Second Series
];

// Sample the sine function for data
for (i = 0; i < 4 * Math.PI; i += 0.05) {
  x.push(i);
  y1.push(Math.sin(i));
  y2.push(Math.sin(i + Math.PI));
}
x.push(4 * Math.PI)
y1.push(Math.sin(4 * Math.PI));
y2.push(Math.sin(4 * Math.PI));

// TimeSeries Template Options
options = {
  // Container to render inside of
  container : container,
  // Data for detail (top chart) and summary (bottom chart)
  data : {
    detail : data,
    summary : data
  }
};

// Create the TimeSeries
var chart = new envision.templates.TimeSeries(options);
    console.log(chart);
    
    setTimeout(function () {
  
    });

})();