envision.js demo

HTML

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

CSS

/* Flotr */
.flotr-handles-handle {
  background: #eee;
  border: 1px solid #333;
  position: absolute;
  cursor: pointer;
  border-radius: 3px;
}
.flotr-handles-handle,
.flotr-grid-label {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.flotr-handles-drag {
  height: 12px;
  width: 6px;
}
.flotr-handles-scroll {
  height: 6px;
  cursor: move;
}
.flotr-handles-left {
  cursor: w-resize;
}
.flotr-handles-right {
  cursor: e-resize;
}


/* 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...

JavaScript

(function realtime_demo (container) {

  var
    rawtime = [],
    ifInOctets = [],
    ifInUcastPkts = [],
    ifInBroadcastPkts = [],
    ifInMulticastPkts = [],
    ifInDiscards = [],
    ifInErrors = [],
    ifOutOctets = [],
    ifOutUcastPkts = [],
    ifOutBroadcastPkts = [],
    ifOutMulticastPkts = [],
    ifOutDiscards = [],
    ifOutErrors = [],
    data = [[rawtime, ifInOctets], [rawtime, ifInUcastPkts],[rawtime, ifInBroadcastPkts],[rawtime, ifInMulticastPkts],[rawtime, ifInDiscards],[rawtime, ifInErrors],[rawtime, ifOutOctets], [rawtime, ifOutUcastPkts],[rawtime, ifOutBroadcastPkts],[rawtime, ifOutMulticastPkts],[rawtime, ifOutDiscards],[rawtime, ifOutErrors]],
    options, i, timesries;
    
    function pushArray(mainArray,addition) {
    var i;
    for (i = 0; i < addition.length; i += 1) {
    mainArray.push(addition[i]);
    }
        
 // whatever 2D array is returned by gson.
 //currently the first 16 entries of the log file.
        sortedData=[[1338842547,1338842548,1338842548,1338842548,1338842608,1338842608,1338842608,1338842608,1338842668,1338842668,1338842668,1338842668,1338842728,1338842728,1338842728,1338842728],[85454,27628,251712,140176,161208,47636,523618,290658,238232,67644,795650,441188,313820,87834,1069424,591402],[927,138,1006,2132,1904,266,2094,4447,2880,395,3186,6757,3852,523,4277,9066],[29,17,20,24,59,31,36,49,89,44,52,76,120,58,68,101],[63,59,16,10,128,119,17,17,196,179,17,28,262,240,18,37],[3,0,0,7,5,0,0,12,7,0,0,19,9,0,0,24],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[-264260,-277218,-189804,-120482,-539798,-561142,-394198,-249254,-815658,-844938,-598850,-378654,-1091376,-1130744,-803376,-507260],[-2465,-2568,-2446,-1776,-5136,-5350,-5123,-3718,-7809,-8128,-7801,-5652,-10480,-10907,-10471,-7588],[-55,-70,-67,-59,-110,-141,-136,-119,-166,-214,-206,-178,-221,-286,-276,-239],[-27,-27,-136,-17,-34,-37,-277,-25,-42,-47,-419,-35,-51,-61,-565,-45],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]]

  function...