envision.js demo

HTML

<script src="https://rawgithub.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 {
 ...

JavaScript

(function() {

  var
    container = document.getElementById('container'),
    x = [0],
    y1 = [0],
    y2 = [0],
    data, options, i;

  // Sample 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));
  
  var data1Name = 'one';
  var data2Name = 'two';
  // Data Format:
  data = [{
      data: [x, y1],
      label: data1Name,
      labelMargin: 70
    }, // First Series
    {
      data: [x, y2],
      label: data2Name,
      labelMargin: 50
    }
  ];

  // TimeSeries Template Options
  options = {

    grid: {
      horizontalLines: true,
      verticalLines: true
    },
    //grid.minorHorizontalLines : true,
    // Container to render inside of
    container: container,
    // Data for detail (top chart) and summary (bottom chart)
    data: {
      labelMargin: 50,
      detail: data,

      summary: data,
      selection: {
        data: {
          x: {
            min: 10,
            max: 20
          }
        }
      }
    },
    defaults: {
      detail: {
        config: {
          //            colors : ['green', 'blue'],
          grid: {
            horizontalLines: true,
            verticalLines: true,
            outlineWidth: 5
          },
          handles: {
            show: false
          },
          mouse: {
            track: true,
            trackY: true,
            //trackX: false,
            trackAll: true,
            trackFormatter: function(config) {
              console.log(arguments);
              return parseFloat(config.y).toFixed(2) + ' - ' +parseFloat(config.x)+' - '+config.series.label;
            },
            sensibility: 1,
            trackDecimals: 4,
            position: 'ne'
          },

          legend: {
            show: false
          },
          yaxis: {
            size: 19,
            autoscale: true,
           ...