RGraph/docs/issues.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 - Common issues</title>
  22
  23     <meta name="keywords" content="rgraph html5 canvas graph docs common issues" />
  24     <meta name="description" content="RGraph: HTML5 canvas graph software - Documentation about common issues" />
  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 </head>
  31 <body>
  32
  33     <!-- Social networking buttons -->
  34     <script src="../libraries/RGraph.common.core.js" ></script>
  35
  36     <script>
  37         function HideTwitterDIV ()
  38         {
  39             document.getElementById("twitter_div").style.opacity = 0;
  40             document.getElementById("twitter_div").style.display = 'none';
  41         }
  42
  43
  44         function ShowTwitterDIV (e)
  45         {
  46             var e   = RGraph.FixEventObject(document.all ? event : e);
  47             var div = document.getElementById("twitter_div");
  48             var img = document.getElementById("twitter_icon");
  49
  50             div.style.display = 'block';
  51             div.style.left    = (RGraph.getCanvasXY(img)[0] + img.offsetWidth - div.offsetWidth + 110) + 'px';
  52             div.style.top     = (RGraph.getCanvasXY(img)[1] - 1) + 'px';
  53
  54             /**
  55             * Fade it in
  56             */
  57             setTimeout('document.getElementById("twitter_div").style.opacity = 0.2;', 25);
  58             setTimeout('document.getElementById("twitter_div").style.opacity = 0.4;', 50);
  59             setTimeout('document.getElementById("twitter_div").style.opacity = 0.6;', 100);
  60             setTimeout('document.getElementById("twitter_div").style.opacity = 0.8;', 125);
  61             setTimeout('document.getElementById("twitter_div").style.opacity = 1.0;', 150);
  62
  63             e.stopPropagation();
  64
  65             return false;
  66         }
  67
  68         /**
  69         * This code installs the event handler that hides the Twitter DIV
  70         */
  71         if (RGraph.isIE8()) {
  72              window.attachEvent('onload', function () {document.body.attachEvent('onclick', HideTwitterDIV);});
  73         } else {
  74             window.addEventListener('click', HideTwitterDIV, false);
  75         }
  76     </script>
  77
  78     <!-- The twitter DIV -->
  79     <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;">
  80         <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>
  81         <a href="http://twitter.com/_rgraph" style="text-decoration: none" rel="nofollow" target="_blank">Follow for HTML5 news</a>
  82     </div>
  83
  84     <div id="social_icons" class="warning" style="top: 0; left: 5px; position: absolute">
  85         <script>
  86             // Opera fix
  87             if (navigator.userAgent.indexOf('Opera') == -1) {
  88               document.getElementById("social_icons").style.position = 'fixed';
  89               document.getElementById("twitter_div").style.position = 'fixed';
  90
  91             }
  92         </script>
  93
  94         <b style="display: inline-block; position: relative; top: 1px">Bookmark and share:</b>
  95
  96
  97             <div id="social">
  98                 <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">
  99                     <img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" align="absmiddle" />
 100                 </a>
 101
 102                 <a href="" target="_blank" onmouseover="if (document.getElementById('twitter_div').style.display == 'none') ShowTwitterDIV(event);" onclick="event.stopPropagation(); event.cancelBubble = true; return false">
 103                     <img src="../images/twitter.png" id="twitter_icon" alt="tweet this site" width="22" height="22" border="0" align="absmiddle" />
 104                 </a>
 105
 106
 107 <!--
 108                 <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">
 109                     <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"/>
 110                 </a>
 111
 112
 113                 <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">
 114                     <img src="../images/facebook.png" width="22" height="22" alt="Post to Facebook" align="absmiddle" style="position: relative; top: -2px; border: 0" border="0"/>
 115                 </a>
 116
 117                 <a href="mailto:share@friendfeed.com" title="Share on FriendFeed">
 118                     <img src="../images/friendfeed.png" width="22" height="22" alt="Share on FriendFeed" border="0" align="absmiddle" />
 119                 </a>
 120
 121                 <a href="http://www.stumbleupon.com/submit?url=http://www.rgraph.net" target="_blank" title="Share on StumbleUpon" >
 122                     <img src="../images/stumble.png" alt="Stumble! this site" width="22" height="22" border="0" align="absmiddle" />
 123                 </a>
 124 -->
 125             </div>
 126     </div>
 127     <!-- /Social networking buttons -->
 128
 129     <div id="breadcrumb">
 130         <a href="../index.html">RGraph: HTML5 canvas graph library</a>
 131         >
 132         <a href="index.html">Documentation</a>
 133         >
 134         Common issues
 135     </div>
 136
 137     <h1>RGraph: HTML5 canvas graph library - Common issues</h1>
 138
 139     <script>
 140         if (RGraph.isIE8()) {
 141             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>');
 142         }
 143     </script>
 144
 145     <!-- Google Groups code -->
 146         <table border="0" style="float: right; background-color: #eee; border: 2px dashed gray; padding: 5px" cellspacing=0>
 147             <tr>
 148                 <td>
 149                     <img src="../images/googlegroups.png" height="26" width="132" alt="Google Groups" />
 150                 </td>
 151             </tr>
 152
 153             <tr>
 154                 <td style="padding-left: 5px">
 155                     <b>Subscribe to RGraph support</b>
 156                 </td>
 157             </tr>
 158
 159             <tr>
 160                 <td style="padding-left: 5px;">
 161                     <form action="http://groups.google.com/group/rgraph/boxsubscribe" method="get">
 162                         Email: <input type=text name=email>
 163                         <input type=submit name="sub" value="Subscribe">
 164                     </form>
 165                 </td>
 166             </tr>
 167
 168             <tr>
 169                 <td align="right">
 170                     <a href="http://groups.google.com/group/rgraph/topics?gvc=2" target="_blank">Visit this group</a>
 171                 </td>
 172             </tr>
 173         </table>
 174     <!-- End of Google Groups code -->
 175
 176     <p>
 177         These are some common issues that you should be aware of. If you're having trouble, you may want to look through these to see
 178         if any apply to you or may be the source of your problem.
 179     </p>
 180
 181     <a name="tooltips"></a>
 182     <h4>Tooltips not working as of the October 2010 release</h4>
 183
 184     <p>
 185         If you're specifying numbers instead of strings for your tooltips, they will not work any more. Simply cast them to
 186         strings, like this:
 187     </p>
 188
 189     <pre class="code">
 190 <span style="color: red">
 191 // This WILL NOT work any more
 192 myBar.Set('chart.tooltips', [56, 67, 53]);
 193 </span>
 194 <span style="color: green">
 195 // Do any of these instead
 196 myBar.Set('chart.tooltips', ['56', (67).toString(), String(53)]);</span>
 197 </pre>
 198
 199     <a name="annotations"></a>
 200     <h4>Annotations aren't saved when running locally in Mozilla Firefox</h4>
 201
 202     <p>
 203         The solution here is to run the graphs using a web server. At this time (March 2010) only Safari, Chrome and Opera
 204         support saving annotations when running locally.
 205     </p>
 206
 207     <a name="missing.text"></a>
 208     <h4>Missing text in Google Chrome</h4>
 209
 210     <p>
 211         Since one of the Chrome 4 dev releases there has been an issue with Google Chrome 4 and 5, asynchronous processing and  not rendering
 212         graph labels. This has been remedied by simply not using asynchronous processing. Because of the tag placement on the front page,
 213         the effect shouldn't be apparent. Other browsers (eg Firefox, Safari, Opera, MSIE) are fine.
 214     </p>
 215
 216     <a name="firefox.tooltips.clipboard"></a>
 217     <h4>Firefox, tooltips and the clipboard</h4>
 218
 219     <p>
 220         Firefox, tooltips and using the clipboard is a little convoluted. To copy the text in a tooltip you must do the following:
 221     </p>
 222
 223     <ol>
 224         <li style="margin-top: 0">Select the text you want with the mouse.</li>
 225         <li style="margin-top: 0">Press CTRL+C (it may be a different key combination if you're not using Windows) to copy the text to the clipboard.</li>
 226     </ol>
 227
 228     <p>
 229         <b>Note:</b> Recent versions of Firefox 4 (from beta 6 onwards) appear to work as expected, and you can copy text with the mouse as normal.
 230     </p>
 231
 232     <h4>Shadows in Google Chrome and the line chart</h4>
 233
 234     <p>
 235         Shadows in recent versions of Google Chrome are somewhat broken. Firefox, MSIE, Opera and Safari are fine. The reason for this
 236         error is a combination of factors it seems - shadow blurring and line width. Fixes have been added to allow shadow blurring and
 237         a 1 pixel linewidth, though some graph types may still be affected.
 238     </p>
 239
 240 <!--
 241
 242     <p>
 243         <b></b><br />
 244     </p>
 245 -->
 246
 247 </body>
 248 </html>