RGraph/examples/funnel.html

   1 <?php ob_start('ob_gzhandler') ?>
   2 <!DOCTYPE html>
   3 <html>
   4 <head>
   5     <meta http-equiv="X-UA-Compatible" content="chrome=1">
   6     <!--
   7         /**
   8         * o------------------------------------------------------------------------------o
   9         * | This file is part of the RGraph package - you can learn more at:             |
  10         * |                                                                              |
  11         * |                          http://www.rgraph.net                               |
  12         * |                                                                              |
  13         * | This package is licensed under the RGraph license. For all kinds of business |
  14         * | purposes there is a small one-time licensing fee to pay and for non          |
  15         * | commercial  purposes it is free to use. You can read the full license here:  |
  16         * |                                                                              |
  17         * |                      http://www.rgraph.net/LICENSE.txt                       |
  18         * o------------------------------------------------------------------------------o
  19         */
  20     -->
  21     <title>RGraph: HTML5 canvas graph library - funnel chart</title>
  22
  23     <meta name="keywords" content="rgraph html5 canvas example funnel chart" />
  24     <meta name="description" content="RGraph: Funnel chart examples" />
  25
  26     <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
  27     <link rel="icon" type="image/png" href="../images/favicon.png">
  28
  29     <script src="../libraries/RGraph.common.core.js" ></script>
  30     <script src="../libraries/RGraph.common.context.js" ></script>
  31     <script src="../libraries/RGraph.common.annotate.js" ></script>
  32     <script src="../libraries/RGraph.common.tooltips.js" ></script>
  33     <script src="../libraries/RGraph.common.zoom.js" ></script>
  34     <script src="../libraries/RGraph.common.resizing.js" ></script>
  35     <script src="../libraries/RGraph.funnel.js" ></script>
  36     <!--[if IE 8]><script src="../excanvas/excanvas.compressed.js"></script><![endif]-->
  37
  38     <script>
  39         /**
  40         * The onload function creates the graph
  41         */
  42         window.onload = function ()
  43         {
  44             var funnel = new RGraph.Funnel('funnel1', [100,45,45,26,21,5]);
  45             funnel.Set('chart.gutter', 40);
  46             funnel.Set('chart.text.boxed', false);
  47             funnel.Set('chart.title', 'Leads to sales (tooltips, context, zoom)');
  48
  49             funnel.Set('chart.shadow', true);
  50             funnel.Set('chart.shadow.color', 'gray');
  51             funnel.Set('chart.shadow.blur', 25);
  52             funnel.Set('chart.shadow.offsetx', 0);
  53             funnel.Set('chart.shadow.offsety', 0);
  54
  55             if (!RGraph.isIE8()) {
  56                 funnel.Set('chart.tooltips', [
  57                                               'id:tooltip_contact',
  58                                               'id:tooltip_lead',
  59                                               'id:tooltip_call',
  60                                               'id:tooltip_visit',
  61                                               'id:tooltip_sale',
  62                                               function (idx) {return '<b>After sales concern</b><br />An after sales concern or query was raised by the Customer.';}
  63                                              ]);
  64
  65                 funnel.Set('chart.tooltips.effect', 'fade');
  66                 funnel.Set('chart.zoom.hdir', 'center');
  67                 funnel.Set('chart.zoom.vdir', 'up');
  68                 funnel.Set('chart.contextmenu', [['Zoom in', RGraph.Zoom]]);
  69             }
  70
  71             funnel.Set('chart.labels', ['Initial contact', 'Established lead', 'Telephone contact', 'Site visit', 'Sale', 'After sales']);
  72             funnel.Set('chart.text.boxed', true);
  73             funnel.Draw();
  74
  75
  76             var funnel3 = new RGraph.Funnel('funnel3', [56,45,12,4,3,2,1]);
  77             funnel3.Set('chart.title', 'A funnel (zoom)');
  78
  79             if (!RGraph.isIE8()) {
  80                 funnel3.Set('chart.zoom.mode', 'thumbnail');
  81             }
  82
  83             funnel3.Draw();
  84         }
  85     </script>
  86 </head>
  87 <body>
  88
  89     <!-- Social networking buttons -->
  90
  91     <script>
  92         function HideTwitterDIV ()
  93         {
  94             document.getElementById("twitter_div").style.opacity = 0;
  95             document.getElementById("twitter_div").style.display = 'none';
  96         }
  97
  98
  99         function ShowTwitterDIV (e)
 100         {
 101             var e   = RGraph.FixEventObject(document.all ? event : e);
 102             var div = document.getElementById("twitter_div");
 103             var img = document.getElementById("twitter_icon");
 104
 105             div.style.display = 'block';
 106             div.style.left    = (RGraph.getCanvasXY(img)[0] + img.offsetWidth - div.offsetWidth + 110) + 'px';
 107             div.style.top     = (RGraph.getCanvasXY(img)[1] - 1) + 'px';
 108
 109             /**
 110             * Fade it in
 111             */
 112             setTimeout('document.getElementById("twitter_div").style.opacity = 0.2;', 25);
 113             setTimeout('document.getElementById("twitter_div").style.opacity = 0.4;', 50);
 114             setTimeout('document.getElementById("twitter_div").style.opacity = 0.6;', 100);
 115             setTimeout('document.getElementById("twitter_div").style.opacity = 0.8;', 125);
 116             setTimeout('document.getElementById("twitter_div").style.opacity = 1.0;', 150);
 117
 118             e.stopPropagation();
 119
 120             return false;
 121         }
 122
 123         /**
 124         * This code installs the event handler that hides the Twitter DIV
 125         */
 126         if (RGraph.isIE8()) {
 127              window.attachEvent('onload', function () {document.body.attachEvent('onclick', HideTwitterDIV);});
 128         } else {
 129             window.addEventListener('click', HideTwitterDIV, false);
 130         }
 131     </script>
 132
 133     <!-- The twitter DIV -->
 134     <div id="twitter_div" style="position: absolute;top: 0;left: 0;background-color: #eee;border: 2px dashed black;box-shadow: 0 0 15px #aaa;-moz-box-shadow: 0 0 15px #aaa;-webkit-box-shadow: 0 0 15px #aaa;padding: 3px;display: none;opacity: 0;z-index: 99;">
 135         <a href="http://twitter.com/home/?status=RGraph%3A+HTML5+canvas+graph+library+based+on+the+HTML5+canvas+tag+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas" target="_blank" title="Share on Twitter" rel="nofollow" style="text-decoration: none">Tweet&nbsp;about&nbsp;RGraph</a><br>
 136         <a href="http://twitter.com/_rgraph" style="text-decoration: none" rel="nofollow" target="_blank">Follow for HTML5 news</a>
 137     </div>
 138
 139     <div id="social_icons" class="warning" style="top: 0; left: 5px; position: absolute">
 140         <script>
 141             // Opera fix
 142             if (navigator.userAgent.indexOf('Opera') == -1) {
 143               document.getElementById("social_icons").style.position = 'fixed';
 144               document.getElementById("twitter_div").style.position = 'fixed';
 145
 146             }
 147         </script>
 148
 149         <b style="display: inline-block; position: relative; top: 1px">Bookmark and share:</b>
 150
 151
 152             <div id="social">
 153                 <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net&notes=RGraph%20is%20a%20HTML5%20based%20graph%20library%20supporting%20a%20wide%20range%20of%20different%20graph%20types:Bar,%20Bipolar,%20Donut,%20Funnel,%20Gantt,%20Horizontal%20Bar,%20LED,%20Line,%20Meter,%20Odometer,%20Pie,%20Progress%20Bar,%20Rose,%20RScatter,%20Scatter%20and%20Traditional%20Radar&title=RGraph:%20HTML5%20canvas%20graph%20library%20based%20on%20the%20HTML5%20canvas%20tag" target="_blank">
 154                     <img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" align="absmiddle" />
 155                 </a>
 156
 157                 <a href="" target="_blank" onmouseover="if (document.getElementById('twitter_div').style.display == 'none') ShowTwitterDIV(event);" onclick="event.stopPropagation(); event.cancelBubble = true; return false">
 158                     <img src="../images/twitter.png" id="twitter_icon" alt="tweet this site" width="22" height="22" border="0" align="absmiddle" />
 159                 </a>
 160
 161
 162 <!--
 163                 <a title="Post to Google Buzz!" href="" onclick="window.open('http://www.google.com/buzz/post?url=http://www.rgraph.net&imageurl=http://www.rgraph.net/images/logo.png', 'google_buzz_window', 'width=800,height=400,top=100,left=100'); return false">
 164                     <img src="../images/buzz.png" width="22" height="22" alt="Post to Google Buzz!" align="absmiddle" style="position: relative; top: -2px; border: 0" border="0"/>
 165                 </a>
 166
 167
 168                 <a title="Share RGraph on Facebook" href="" onclick="window.open('http://www.facebook.com/sharer.php?u=http://www.rgraph.net&t=RGraph:%20HTML5%20canvas%20graph%20library', 'facebook_window', 'width=500,height=300,top=100,left=100'); return false">
 169                     <img src="../images/facebook.png" width="22" height="22" alt="Post to Facebook" align="absmiddle" style="position: relative; top: -2px; border: 0" border="0"/>
 170                 </a>
 171
 172                 <a href="mailto:share@friendfeed.com" title="Share on FriendFeed">
 173                     <img src="../images/friendfeed.png" width="22" height="22" alt="Share on FriendFeed" border="0" align="absmiddle" />
 174                 </a>
 175
 176                 <a href="http://www.stumbleupon.com/submit?url=http://www.rgraph.net" target="_blank" title="Share on StumbleUpon" >
 177                     <img src="../images/stumble.png" alt="Stumble! this site" width="22" height="22" border="0" align="absmiddle" />
 178                 </a>
 179 -->
 180             </div>
 181     </div>
 182     <!-- /Social networking buttons -->
 183
 184     <div id="breadcrumb">
 185         <a href="../index.html">RGraph: HTML5 canvas graph library</a>
 186         >
 187         <a href="./index.html">Examples</a>
 188         >
 189         Funnel chart
 190     </div>
 191
 192     <h1>RGraph: HTML5 canvas graph library - Funnel chart</h1>
 193
 194     <script>
 195         if (RGraph.isIE8()) {
 196             document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the graphs, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag. Click <a href="http://groups.google.com/group/rgraph/browse_thread/thread/c5651ff8c56b8f3c#" target="_blank">here</a> to see some screenshots.</div>');
 197         }
 198     </script>
 199
 200     <p>
 201         The funnel chart can be used to show stages in a sales or order process, from initial lead/contact through to actual sale.
 202         It works well if you have a diminishing process, like that shown below. It can show potential revenue in each stage, or
 203         like below, it can show actual numbers. It can also highlight potential problems in an organisations sales and/or order fulfillment
 204         processes.
 205     </p>
 206
 207     <div>
 208         <div>
 209             <ul>
 210                 <li><a href="../docs/funnel.html">Funnel chart API documentation</a></li>
 211             </ul>
 212         </div>
 213
 214         <div style="width: 950px">
 215             <div style="width: 450px; float: left">
 216                 <canvas id="funnel3" width="300" height="400">[No canvas support]</canvas>
 217             </div>
 218
 219             <div style="width: 450px; float: right">
 220                 <canvas id="funnel1" width="400" height="400">[No canvas support]</canvas>
 221             </div>
 222         </div>
 223     </div>
 224
 225     <div style="display: none">
 226         <div id="tooltip_contact"><b>Initial contact</b><br />All potential cutomers were contacted and<br />interest was established.</div>
 227         <div id="tooltip_lead"><b>Established lead</b><br />Customers who were interested had their details<br />recorded and passed to the sales team.</div>
 228         <div id="tooltip_call"><b>Sales Call</b><br />Interested Customers were called by the<br />sales team.</div>
 229         <div id="tooltip_visit"><b>Site visit</b><br />The Customers site was visited by a representative<br />of the sales core.</div>
 230         <div id="tooltip_sale"><b>Sale agreed</b><br />A sale was finalised by the sales core.</div>
 231     </div>
 232
 233 </body>
 234 </html>