envision.js demo

by cesutherland

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 {
  padding-top: 7px;
  border: 1px...

JavaScript

(function () {

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

// Sample data
for (i = 0; i < 100; i += 1) {
  x.push(5140000*300+i*51400000);
  y1.push(Math.random())+"";
  y2.push(Math.random()*3)+"";
}

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
                },
        'lite-lines' : {
          lineWidth : 2
        },
        'points' : {
            radius : 5,
            fill : true
        },
        handles : {
          show : true
        },
        mouse : {
                        track: true,
                        trackY: true,
                        //trackX: false,
                        trackAll: true,
                        trackFormatter : function (config) {
                          console.log(arguments);
                          return parseFloat(config.y).toFixed(2);
                        },
                        sensibility: 1,
                        trackDecimals: 4,
                        position: 'ne'
                    },
        
        legend : {
          show : false
        },
...