RGraph/docs/adjusting.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 - Adjusting your graphs interactively</title>
  22
  23     <meta name="keywords" content="rgraph html5 canvas graph adjusting docs " />
  24     <meta name="description" content="RGraph: HTML5 canvas graph software - Documentation about adjusting your graphs" />
  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.adjusting.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.bar.js" ></script>
  35     <script src="../libraries/RGraph.line.js" ></script>
  36     <script src="../libraries/RGraph.hprogress.js" ></script>
  37     <script src="../libraries/RGraph.rose.js" ></script>
  38     <script src="../libraries/RGraph.tradar.js" ></script>
  39     <!--[if IE 8]><script src="../excanvas/excanvas.compressed.js"></script><![endif]-->
  40
  41 </head>
  42
  43 <body>
  44
  45     <!-- Social networking buttons -->
  46     <script src="../libraries/RGraph.common.core.js" ></script>
  47
  48     <script>
  49         function HideTwitterDIV ()
  50         {
  51             document.getElementById("twitter_div").style.opacity = 0;
  52             document.getElementById("twitter_div").style.display = 'none';
  53         }
  54
  55
  56         function ShowTwitterDIV (e)
  57         {
  58             var e   = RGraph.FixEventObject(document.all ? event : e);
  59             var div = document.getElementById("twitter_div");
  60             var img = document.getElementById("twitter_icon");
  61
  62             div.style.display = 'block';
  63             div.style.left    = (RGraph.getCanvasXY(img)[0] + img.offsetWidth - div.offsetWidth + 110) + 'px';
  64             div.style.top     = (RGraph.getCanvasXY(img)[1] - 1) + 'px';
  65
  66             /**
  67             * Fade it in
  68             */
  69             setTimeout('document.getElementById("twitter_div").style.opacity = 0.2;', 25);
  70             setTimeout('document.getElementById("twitter_div").style.opacity = 0.4;', 50);
  71             setTimeout('document.getElementById("twitter_div").style.opacity = 0.6;', 100);
  72             setTimeout('document.getElementById("twitter_div").style.opacity = 0.8;', 125);
  73             setTimeout('document.getElementById("twitter_div").style.opacity = 1.0;', 150);
  74
  75             e.stopPropagation();
  76
  77             return false;
  78         }
  79
  80         /**
  81         * This code installs the event handler that hides the Twitter DIV
  82         */
  83         if (RGraph.isIE8()) {
  84              window.attachEvent('onload', function () {document.body.attachEvent('onclick', HideTwitterDIV);});
  85         } else {
  86             window.addEventListener('click', HideTwitterDIV, false);
  87         }
  88     </script>
  89
  90     <!-- The twitter DIV -->
  91     <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;">
  92         <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>
  93         <a href="http://twitter.com/_rgraph" style="text-decoration: none" rel="nofollow" target="_blank">Follow for HTML5 news</a>
  94     </div>
  95
  96     <div id="social_icons" class="warning" style="top: 0; left: 5px; position: absolute">
  97         <script>
  98             // Opera fix
  99             if (navigator.userAgent.indexOf('Opera') == -1) {
 100               document.getElementById("social_icons").style.position = 'fixed';
 101               document.getElementById("twitter_div").style.position = 'fixed';
 102
 103             }
 104         </script>
 105
 106         <b style="display: inline-block; position: relative; top: 1px">Bookmark and share:</b>
 107
 108
 109             <div id="social">
 110                 <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">
 111                     <img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" align="absmiddle" />
 112                 </a>
 113
 114                 <a href="" target="_blank" onmouseover="if (document.getElementById('twitter_div').style.display == 'none') ShowTwitterDIV(event);" onclick="event.stopPropagation(); event.cancelBubble = true; return false">
 115                     <img src="../images/twitter.png" id="twitter_icon" alt="tweet this site" width="22" height="22" border="0" align="absmiddle" />
 116                 </a>
 117
 118
 119 <!--
 120                 <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">
 121                     <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"/>
 122                 </a>
 123
 124
 125                 <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">
 126                     <img src="../images/facebook.png" width="22" height="22" alt="Post to Facebook" align="absmiddle" style="position: relative; top: -2px; border: 0" border="0"/>
 127                 </a>
 128
 129                 <a href="mailto:share@friendfeed.com" title="Share on FriendFeed">
 130                     <img src="../images/friendfeed.png" width="22" height="22" alt="Share on FriendFeed" border="0" align="absmiddle" />
 131                 </a>
 132
 133                 <a href="http://www.stumbleupon.com/submit?url=http://www.rgraph.net" target="_blank" title="Share on StumbleUpon" >
 134                     <img src="../images/stumble.png" alt="Stumble! this site" width="22" height="22" border="0" align="absmiddle" />
 135                 </a>
 136 -->
 137             </div>
 138     </div>
 139     <!-- /Social networking buttons -->
 140
 141     <div id="breadcrumb">
 142         <a href="../index.html">RGraph: HTML5 canvas graph library</a>
 143         >
 144         <a href="index.html">Documentation</a>
 145         >
 146         Adjusting graphs interactively
 147     </div>
 148
 149     <h1>RGraph: HTML5 canvas graph library - Adjusting your graphs interactively</h1>
 150
 151     <script>
 152         if (RGraph.isIE8()) {
 153             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>');
 154         }
 155     </script>
 156
 157     <canvas id="myc" width="600" height="250" style="float: right">[No canvas support]</canvas>
 158     <canvas id="myc2" width="600" height="75" style="float: right">[No canvas support]</canvas>
 159     <canvas id="myc3" width="600" height="450" style="float: right">[No canvas support]</canvas>
 160     <canvas id="myc4" width="600" height="250" style="float: right">[No canvas support]</canvas>
 161     <canvas id="myc5" width="400" height="400" style="float: right">[No canvas support]</canvas>
 162
 163     <script>
 164         window.onload = function (e)
 165         {
 166             var line = new RGraph.Line('myc', [45,74,84,85,45,35,65,68,87,97,45,34,12], [15,14,12,16,18,19,14,12,74,84,95,65,35]);
 167             line.Set('chart.labels', ['Kev','Matt','Rich','Dave','Iggy','Polly','Fiona','Fred','Pete','Lou','Fred','Bob']);
 168             line.Set('chart.ylabels.inside', true);
 169             line.Set('chart.linewidth', 2);
 170             line.Set('chart.hmargin', 10);
 171             line.Set('chart.shadow', true);
 172             line.Set('chart.adjustable', true);
 173             line.Set('chart.title', 'An adjustable line chart (adjustable, context)');
 174             line.Set('chart.contextmenu', [['Zoom in', RGraph.Zoom], null, ['Cancel', function () {}]]);
 175             line.Set('chart.zoom.hdir', 'left');
 176             line.Set('chart.zoom.vdir', 'center');
 177             line.Draw();
 178
 179             var grad = line.context.createLinearGradient(25, 0, 575, 0);
 180             grad.addColorStop(0, 'green');
 181             grad.addColorStop(1, 'white');
 182
 183             var hprogress = new RGraph.HProgress('myc2', 83, 100, 0);
 184             hprogress.Set('chart.color', grad);
 185             hprogress.Set('chart.adjustable', true);
 186             hprogress.Set('chart.margin', 5);
 187             hprogress.Set('chart.tickmarks.inner', true);
 188             hprogress.Set('chart.label.inner', true);
 189             hprogress.Set('chart.units.post', '%');
 190             hprogress.Draw();
 191
 192             var rose = new RGraph.Rose('myc3',[4,3,5,6,2,1,4]);
 193             rose.Set('chart.gutter', 25);
 194             rose.Set('chart.colors.alpha', 0.5);
 195             rose.Set('chart.adjustable', true);
 196             rose.Set('chart.labels', ['Olga','Kev','Bob','Charlie','Pete','John','Fred']);
 197             rose.Draw();
 198
 199             var bar = new RGraph.Bar('myc4', [[512,433],[653,477],[512,436],[533,564],[674,741],[266,453],[411,159],[458,741],[496,845]]);
 200             bar.Set('chart.colors', ['blue', 'pink']);
 201             bar.Set('chart.labels.above', true);
 202             bar.Set('chart.shadow', true);
 203             bar.Set('chart.shadow.color', '#aaa');
 204             bar.Set('chart.strokecolor', 'rgba(0,0,0,0)');
 205             bar.Set('chart.gutter', 30);
 206             bar.Set('chart.adjustable', true);
 207             bar.Set('chart.labels', ['2000', '2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008']);
 208             bar.Draw();
 209
 210             var tradar = new RGraph.Tradar('myc5', [4,3,8,6,8,7,7,4,5]);
 211             tradar.Set('chart.adjustable', true);
 212             tradar.Set('chart.circle', 5);
 213             tradar.Set('chart.circle.fill', 'rgba(255,0,0,0.5)');
 214             tradar.Set('chart.color', 'rgba(0,255,0,0.5)');
 215             tradar.Set('chart.labels', ['Hoolio', 'Godfrey', 'Albert', 'Jeff', 'Jack', 'Pete', 'Lou', 'Barney', 'Fred']);
 216             tradar.Draw();
 217         }
 218     </script>
 219
 220     <p>
 221         Since 24th May 2010 you have had the ability to adjust your graphs interactively. Currently the Bar chart, Line chart,
 222         Progress Bar, Rose chart and the Tradar have this facility. Some graph types use multiple event handlers and as such
 223         are unlikely to work well with other dynamic features. The Line chart is an example of this, and whilst it does work
 224         with the context menu (and so the full canvas zoom), it is unlikely to work with other dynamic features.
 225     </p>
 226
 227
 228     <p>
 229         At the current time this feature on the Bar and Line charts don't work with X axis in the center.
 230     </p>
 231
 232
 233     <p>
 234         If your intention is to make some sort of interactive console, new HTML5 input types may also be of interest (for example the new <i>range</i> input type
 235         which gives you a "slider bar"). Eg (Chrome/Safari/Opera):
 236     </p>
 237
 238     <p style="text-align: center">
 239         <input type="range" min="0" max="100" value="76" onchange="document.getElementById('range_result').value = this.value"/>
 240         <input type="text" id="range_result" size="3" value="76" />
 241     </p>
 242
 243 </body>
 244 </html>