RGraph/docs/setconfig.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 - API documentation</title>
  22
  23     <meta name="keywords" content="rgraph html5 canvas graph docs api" />
  24     <meta name="description" content="RGraph: HTML5 canvas graph software - Documentation about the RGraph API" />
  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.bar.js" ></script>
  31     <!--[if IE 8]><script src="../excanvas/excanvas.compressed.js"></script><![endif]-->
  32 </head>
  33 <body>
  34
  35     <!-- Social networking buttons -->
  36     <script src="../libraries/RGraph.common.core.js" ></script>
  37
  38     <script>
  39         function HideTwitterDIV ()
  40         {
  41             document.getElementById("twitter_div").style.opacity = 0;
  42             document.getElementById("twitter_div").style.display = 'none';
  43         }
  44
  45
  46         function ShowTwitterDIV (e)
  47         {
  48             var e   = RGraph.FixEventObject(document.all ? event : e);
  49             var div = document.getElementById("twitter_div");
  50             var img = document.getElementById("twitter_icon");
  51
  52             div.style.display = 'block';
  53             div.style.left    = (RGraph.getCanvasXY(img)[0] + img.offsetWidth - div.offsetWidth + 110) + 'px';
  54             div.style.top     = (RGraph.getCanvasXY(img)[1] - 1) + 'px';
  55
  56             /**
  57             * Fade it in
  58             */
  59             setTimeout('document.getElementById("twitter_div").style.opacity = 0.2;', 25);
  60             setTimeout('document.getElementById("twitter_div").style.opacity = 0.4;', 50);
  61             setTimeout('document.getElementById("twitter_div").style.opacity = 0.6;', 100);
  62             setTimeout('document.getElementById("twitter_div").style.opacity = 0.8;', 125);
  63             setTimeout('document.getElementById("twitter_div").style.opacity = 1.0;', 150);
  64
  65             e.stopPropagation();
  66
  67             return false;
  68         }
  69
  70         /**
  71         * This code installs the event handler that hides the Twitter DIV
  72         */
  73         if (RGraph.isIE8()) {
  74              window.attachEvent('onload', function () {document.body.attachEvent('onclick', HideTwitterDIV);});
  75         } else {
  76             window.addEventListener('click', HideTwitterDIV, false);
  77         }
  78     </script>
  79
  80     <!-- The twitter DIV -->
  81     <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;">
  82         <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>
  83         <a href="http://twitter.com/_rgraph" style="text-decoration: none" rel="nofollow" target="_blank">Follow for HTML5 news</a>
  84     </div>
  85
  86     <div id="social_icons" class="warning" style="top: 0; left: 5px; position: absolute">
  87         <script>
  88             // Opera fix
  89             if (navigator.userAgent.indexOf('Opera') == -1) {
  90               document.getElementById("social_icons").style.position = 'fixed';
  91               document.getElementById("twitter_div").style.position = 'fixed';
  92
  93             }
  94         </script>
  95
  96         <b style="display: inline-block; position: relative; top: 1px">Bookmark and share:</b>
  97
  98
  99             <div id="social">
 100                 <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">
 101                     <img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" align="absmiddle" />
 102                 </a>
 103
 104                 <a href="" target="_blank" onmouseover="if (document.getElementById('twitter_div').style.display == 'none') ShowTwitterDIV(event);" onclick="event.stopPropagation(); event.cancelBubble = true; return false">
 105                     <img src="../images/twitter.png" id="twitter_icon" alt="tweet this site" width="22" height="22" border="0" align="absmiddle" />
 106                 </a>
 107
 108
 109 <!--
 110                 <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">
 111                     <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"/>
 112                 </a>
 113
 114
 115                 <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">
 116                     <img src="../images/facebook.png" width="22" height="22" alt="Post to Facebook" align="absmiddle" style="position: relative; top: -2px; border: 0" border="0"/>
 117                 </a>
 118
 119                 <a href="mailto:share@friendfeed.com" title="Share on FriendFeed">
 120                     <img src="../images/friendfeed.png" width="22" height="22" alt="Share on FriendFeed" border="0" align="absmiddle" />
 121                 </a>
 122
 123                 <a href="http://www.stumbleupon.com/submit?url=http://www.rgraph.net" target="_blank" title="Share on StumbleUpon" >
 124                     <img src="../images/stumble.png" alt="Stumble! this site" width="22" height="22" border="0" align="absmiddle" />
 125                 </a>
 126 -->
 127             </div>
 128     </div>
 129     <!-- /Social networking buttons -->
 130
 131     <div id="breadcrumb">
 132         <a href="../index.html">RGraph: HTML5 canvas graph library</a>
 133         >
 134         <a href="index.html">Documentation</a>
 135         >
 136         The RGraph.SetConfig() function
 137     </div>
 138
 139     <h1>RGraph: HTML5 canvas graph library - The RGraph.SetConfig() function</h1>
 140
 141     <script>
 142         if (RGraph.isIE8()) {
 143             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>');
 144         }
 145     </script>
 146
 147
 148     <div style="text-align: center; float: right; font-family: Verdana">
 149         <b>A graph showing RGraph.SetConfig()</b><br />
 150         <canvas id="cvs" width="600" height="250">[No canvas support]</canvas>
 151     </div>
 152
 153     <script>
 154         window.onload = function ()
 155         {
 156             var config = {
 157                           'chart.colors':                   ['red', 'green'],
 158                           'chart.labels':                   ['John','Fred','June','Charles','Lou', 'Olga'],
 159                           'chart.title.yaxis':               'Amount',
 160                           'chart.title.yaxis.pos':           -0.2,
 161                           'chart.title.xaxis':               'Person',
 162                           'chart.background.grid.autofit':  true,
 163                           'chart.strokestyle': 'rgba(0,0,0,0)'
 164                          }
 165             var bar = new RGraph.Bar('cvs', [48,56,52,49,43,51]);
 166             RGraph.SetConfig(bar, config);
 167             bar.context.translate(20,-20);
 168             bar.Draw();
 169         }
 170     </script>
 171
 172     <p>
 173         Instead of using a number of .Set() calls, you may find that using the <i>RGraph.SetConfig()</i> method more to your tastes. The
 174         method is an alternative to setting the configuration of your graph. It can also facilitate reuse better, so that the
 175         appearance of all of your websites charts is the same. There's an example of its use below:
 176     </p>
 177
 178     <br clear="all" />
 179
 180     <pre class="code">
 181 &lt;script&gt;
 182     window.onload = function ()
 183     {
 184         /**
 185         * This configuration could be stored in a central configuration file, making its reuse easier. You could also have
 186         * several different configurations that you pick and choose from depending on the requirements. Values in
 187         * subsequent calls to .SetConfig() will overwrite previous ones.
 188         */
 189         var config = {
 190                       'chart.colors':                  ['red', 'green'],
 191                       'chart.labels':                  ['John','Fred','June','Charles','Lou', 'Olga'],
 192                       'chart.title.yaxis':             'Amount',
 193                       'chart.title.yaxis.pos':         -0.2,
 194                       'chart.title.xaxis':             'Person',
 195                       'chart.background.grid.autofit': true
 196                      }
 197         var bar = new RGraph.Bar('cvs', [48,56,52,49,43,51]);
 198         RGraph.SetConfig(bar, config);
 199         bar.context.translate(20,-20);
 200         bar.Draw();
 201     }
 202 &lt;/script&gt;
 203 </pre>
 204
 205 </body>
 206 </html>