funnel.js/index.html at master · inlineblock/funnel.js · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html>
  <head>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/1.2.1/lodash.compat.js"></script>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://d3js.org/d3.v3.js" charset="utf-8"></script>
    <script src="http://backbonejs.org/backbone.js"></script>
    <script src="http://requirejs.org/docs/release/2.1.5/minified/require.js"></script>
    <style>
      body {
        font-family: Helvetica;
      }
      .funnel {
        position: relative;
        background: #F0F0F0;
      }
      .funnel-piece {
        background-color: gray;
        position: absolute;
        transition: 250ms;
        background-clip: content-box;
        border: 0px solid transparent;
      }
      .funnel-piece:hover {
        cursor: pointer;
        opacity: 0.9;
      }
      .funnel-axis {
        position: absolute;
      }
      .funnel.horizontal-funnel .funnel-axis {
        bottom: 0px;
      }
      .funnel.vertical-funnel .funnel-axis {
        right: 0px;
      }
      .funnel-axis .title{
        font-size: 14px;
        line-height: 22px;
        padding: 0 6px;
        color: #606060;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .funnel-axis .amount{
        line-height: 18px;
        font-size: 10px;
        padding: 0 6px;
        color: #999;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .funnel-zero-state {
        position: absolute;
        font-size: 3em;
        color: #C0C0C0;
        text-shadow: 0 1px 0 #FFF;
      }
    </style>
  </head>
  <body>
    <h1>Funnel HTML5</h1>
    <div class="funnel-container">
    </div>
    <button id="update">Update</button>
    <button id="toggle-orientation">Toggle Orientation</button>
    <button id="empty">Empty Data</button>
    <script type="text/javascript">
      $(function () {
        var getRandomData = function (count) {
          var data = [],
            i=0,
            count = count || 6;

          for(i=0; i < count; i++) {
            data.push({amount: Math.floor(Math.random() * 10000) , title: 'Something-' + i});
          }
          return data;
        }
        require(['Funnel'] , function (Funnel) {
          var funnel = new Funnel({
            valueAttribute: 'amount',
            uniqueAttribute: 'title',
            height: 400,
            sortData: true,
            horizontalOrientation: true,
            axisSize: 40,
            data: [
              {amount: 9909 , title: 'Vistors' , color: '#FF0000'},
              {amount: 8999 , title: 'Unique Vistors' , color: '#FFFF00'},
              {amount: 3040 , title: 'Signups' , color: '#FF00FF'},
              {amount: 2903 , title: 'Confirmed Users'},
              {amount: 1333 , title: 'Active Users'},
            ],
            axisTemplate: _.template('<div class="title"><%= title %></div><div class="amount"><%= amount %></div>')
          });
          $('.funnel-container').append(funnel.el);
          $('#update').on('click' , function () {
            var items = Math.ceil(Math.random()*7)+1;
            funnel.update(getRandomData(items));
          });
          $('#toggle-orientation').on('click' , function () {
            funnel.options.horizontalOrientation = !funnel.options.horizontalOrientation;
            funnel.options.axisSize = funnel.options.horizontalOrientation ? 40 : 200;
            funnel.options.gapBetweenSize = funnel.options.horizontalOrientation ? 20 : 10;
            funnel.update();
          });
          $('#empty').on('click' , function () {
            funnel.update([]);
          });
        });
      });
    </script>
  </body>
</html>