envision demo

http://www.humblesoftware.com/envision/documentation#templates

by dirkk0

HTML

<script src="https://raw.github.com/HumbleSoftware/d3/master/d3.v2.min.js"></script>
<script src="https://raw.github.com/HumbleSoftware/envisionjs/master/envision.js"></script>
<id="container" style="width:600px;height:300px;position:absolute;"></div>

CSS

.title{text-align:center}.subTitle{font-size:16px}#finance{position:relative;margin:40px 0;border:1px solid #9cf}#labels{position:absolute;width:800px;z-index:10}#financeTitle{position:absolute;top:-20px}#summaryGraph .flotr-grid-label{margin-top:-16px;background:transparent;text-align:left}.documentation p{font-size:14px;padding-left:20px;padding-right:8px}.documentation ol{font-size:14px}.documentation h3{padding-top:12px}.documentation h4{padding-left:20px;font-size:14px}.documentation p code{font-size:12px}.documentation .snippet{margin-left:20px}label{float:none}input{width:auto}#trig{margin:20px}.trig path,.trig circle,.trig line{stroke:steelblue;stroke-width:2px;fill:none}.trig .axis{stroke:#999}.trig text{fill:#444;font-family:sans-serif;font-size:22}.chart{position:relative;height:524px;padding-top:54px}.fortune p{font-size:14px}.fortune h3{margin-bottom:8px}.fortune ul{font-size:14px;margin-bottom:20px}.controls{position:absolute;top:0;right:0;font-size:12px;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none}.control,.controls .label{float:left;text-align:center}.controls .label{padding-top:2px}.control{font-size:14px}.control.rank{width:52px}.control.revenue{width:70px}.control.profit{width:52px}.control{cursor:pointer}.control.selected{font-weight:bold}.inflation{position:absolute;top:20px;right:0;font-size:12px;width:200px;text-align:right;padding-right:10px}.inflation label{display:inline-block;width:auto;padding-bottom:2px;cursor:pointer}.inflation input{position:relative;bottom:-2px}.company{font-size:12px;display:none;color:#222;position:absolute;margin-top:54px}.company-arrow{background:url(../home/cesutherland/HSD/images/demos/fortune-arrow.png) top center no-repeat;position:absolute;left:50%;margin-left:-6px;width:13px;height:7px;top:0}.company-content{margin-top:5px;border:2px solid #4863a0;padding:6px 6px 8px 6px;background:#fff;border-radius:5px}.company...

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
        new envision.templates.TimeSeries(options);

      })();