envision.js demo

HTML

<script src="https://rawgithub.com/HumbleSoftware/envisionjs/master/envision.js"></script>
<div style="width:50%;">
<div id="container"></div>
</div>

CSS

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

/* Dimensions */
.envision-finance {
  width: auto;
}
.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 {
 ...

JavaScript

var financeData = {
    summaryTicks: [{
        date: "August 19, 2004",
        open: 100.01,
        high: 104.06,
        low: 95.96,
        close: 100.34,
        volume: 22088000},
    {
        date: "August 20, 2004",
        open: 101.48,
        high: 109.08,
        low: 100.5,
        close: 108.31,
        volume: 11377000},
    {
        date: "August 23, 2004",
        open: 110.76,
        high: 113.48,
        low: 109.05,
        close: 109.4,
        volume: 9090700},
    {
        date: "August 24, 2004",
        open: 111.24,
        high: 111.6,
        low: 103.57,
        close: 104.87,
        volume: 7599100},
    {
        date: "August 25, 2004",
        open: 104.96,
        high: 108,
        low: 103.88,
        close: 106,
        volume: 4565900}],
    price: [
        [0, 1, 2, 3, 4],
        [100.34, 108.31, 109.4, 104.87, 106]],
    volume: [
        [0, 1, 2, 3, 4],
        [22088000, 11377000, 9090700, 7599100, 4565900]],
    summary: [
        [0, 14, 28, 42, 56],
        [100.34, 102.31, 131.08, 147.94, 172.55]]
};

chart = null;

(function() {
    var
    summaryTicks = financeData.summaryTicks,
        options = {
            container: document.getElementById("container"),
            data: {
                price: financeData.price,
                volume: financeData.volume,
                summary: financeData.price
            },
            trackFormatter: function(o) {
                var
                data = o.series.data,
                    index = data[o.index][0],
                    value = summaryTicks[index].date + ': $' + summaryTicks[index].close + ", Vol: " + summaryTicks[index].volume;
                return value;
            },
            xTickFormatter: function(index) {
                var date = new Date(financeData.summaryTicks[index].date);
                return date.getFullYear() + '';
            },
            // An initial selection
            selection: {
                data: {
      ...