1 <?php ob_start('ob_gzhandler') ?>
5 <meta http-equiv="X-UA-Compatible" content="chrome=1">
8 * o------------------------------------------------------------------------------o
9 * | This file is part of the RGraph package - you can learn more at: |
11 * | http://www.rgraph.net |
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: |
17 * | http://www.rgraph.net/LICENSE.txt |
18 * o------------------------------------------------------------------------------o
21 <title>RGraph: HTML5 canvas graph library - API documentation</title>
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" />
26 <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
27 <link rel="icon" type="image/png" href="../images/favicon.png">
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]-->
35 <!-- Social networking buttons -->
36 <script src="../libraries/RGraph.common.core.js" ></script>
39 function HideTwitterDIV ()
41 document.getElementById("twitter_div").style.opacity = 0;
42 document.getElementById("twitter_div").style.display = 'none';
46 function ShowTwitterDIV (e)
48 var e = RGraph.FixEventObject(document.all ? event : e);
49 var div = document.getElementById("twitter_div");
50 var img = document.getElementById("twitter_icon");
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';
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);
71 * This code installs the event handler that hides the Twitter DIV
74 window.attachEvent('onload', function () {document.body.attachEvent('onclick', HideTwitterDIV);});
76 window.addEventListener('click', HideTwitterDIV, false);
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 about RGraph</a><br>
83 <a href="http://twitter.com/_rgraph" style="text-decoration: none" rel="nofollow" target="_blank">Follow for HTML5 news</a>
86 <div id="social_icons" class="warning" style="top: 0; left: 5px; position: absolute">
89 if (navigator.userAgent.indexOf('Opera') == -1) {
90 document.getElementById("social_icons").style.position = 'fixed';
91 document.getElementById("twitter_div").style.position = 'fixed';
96 <b style="display: inline-block; position: relative; top: 1px">Bookmark and share:</b>
100 <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=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" />
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" />
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"/>
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"/>
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" />
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" />
129 <!-- /Social networking buttons -->
131 <div id="breadcrumb">
132 <a href="../index.html">RGraph: HTML5 canvas graph library</a>
134 <a href="index.html">Documentation</a>
136 The RGraph.SetConfig() function
139 <h1>RGraph: HTML5 canvas graph library - The RGraph.SetConfig() function</h1>
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>');
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>
154 window.onload = function ()
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)'
165 var bar = new RGraph.Bar('cvs', [48,56,52,49,43,51]);
166 RGraph.SetConfig(bar, config);
167 bar.context.translate(20,-20);
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:
182 window.onload = function ()
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.
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
197 var bar = new RGraph.Bar('cvs', [48,56,52,49,43,51]);
198 RGraph.SetConfig(bar, config);
199 bar.context.translate(20,-20);