/static/RGraph/docs/color.html
HTML | 210 lines | 150 code | 43 blank | 17 comment | 0 complexity | eaa4d6fa01e3fb853ce8f83542949653 MD5 | raw file
- <?php ob_start('ob_gzhandler') ?>
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="X-UA-Compatible" content="chrome=1">
- <!--
- /**
- * o------------------------------------------------------------------------------o
- * | This file is part of the RGraph package - you can learn more at: |
- * | |
- * | http://www.rgraph.net |
- * | |
- * | This package is licensed under the RGraph license. For all kinds of business |
- * | purposes there is a small one-time licensing fee to pay and for non |
- * | commercial purposes it is free to use. You can read the full license here: |
- * | |
- * | http://www.rgraph.net/LICENSE.txt |
- * o------------------------------------------------------------------------------o
- */
- -->
- <title>RGraph: Javascript charts and graph library - About canvas color definitions</title>
-
- <meta name="keywords" content="rgraph html5 canvas chart docs color" />
- <meta name="description" content="RGraph: Javascript charts and graph library - Documentation about canvas colors" />
-
- <meta property="og:title" content="RGraph: Javascript charts and graph library" />
- <meta property="og:description" content="A graph library based on the HTML5 canvas tag" />
- <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/>
- <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
- <link rel="icon" type="image/png" href="../images/favicon.png">
- <script>
- var _gaq = _gaq || [];
- _gaq.push(['_setAccount', 'UA-54706-2']);
- _gaq.push(['_trackPageview']);
-
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
- </head>
- <body>
-
- <!-- Social networking buttons -->
- <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed">
- <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%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20charts%20types&title=RGraph:Javascript%20charts%20and%20graphs%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" align="absmiddle" /></a>
- <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+and+graph+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank"><img src="../images/twitter.png" id="twitter_icon" alt="tweet this site" width="22" height="22" border="0" align="absmiddle" /></a>
- <a title="Share RGraph on Facebook" href="" onclick="window.open('http://www.facebook.com/sharer.php?u=http://www.rgraph.net&t=RGraph:%20Javascript%20chart%20and%20graph%20library', 'facebook_window', 'width=500,height=400,top=100,left=100'); return false"><img src="../images/facebook.png" width="22" height="22" alt="Post to Facebook" align="absmiddle" border="0"/></a>
- </div>
- <script>
- // Opera fix
- if (navigator.userAgent.indexOf('Opera') == -1) {
- document.getElementById("social_icons").style.position = 'fixed';
- }
- </script>
- <!-- Social networking buttons -->
- <div id="breadcrumb">
- <a href="../index.html">RGraph: Javascript charts and graph library</a>
- >
- <a href="index.html">Documentation</a>
- >
- About canvas color definitions
- </div>
- <h1>RGraph: Javascript charts and graph library - About canvas color definitions</h1>
- <script>
- if (RGraph.isIE8()) {
- 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 charts, 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://support.rgraph.net/message/rgraph-in-internet-explorer-9.html" target="_blank">here</a> to see some screenshots.</div>');
- }
- </script>
- <p>
- You will probably want to know the different ways you can define a color. There are a few
- ways which you can use, all of which are quite straight-forward.
- </p>
- <ul id="colors">
- <li><a href="#named">Named colors</a></li>
- <li><a href="#hex">Hex values</a></li>
- <li><a href="#rgb">RGB values</a></li>
- <li><a href="#rgba">RGBA values</a></li>
- <li><a href="#hsl">HSL values</a></li>
- <li><a href="#hsla">HSLA values</a></li>
- <li><a href="#lgradients">Linear gradients</a></li>
- <li><a href="#rgradients">Radial gradients</a></li>
- <li><a href="#info">More information</a></li>
- </ul>
-
- <a name="named"></a>
- <br /> <br />
- <h2>Named colors</h2>
-
- <p>
- The first, and easiest, is to use named colors. This gives you a range of color values that have been predefined for you. Eg:
- </p>
-
- <pre class="code">myObject.Set('chart.colors', ['red', 'blue']);</pre>
- <a name="hex"></a>
- <br /> <br />
- <h2>Hex values</h2>
-
- <p>
- The next, is straight forward hex values like you can use in normal CSS. These consist of a hash sign,
- followed by three or six hexadecimal characters. Eg:
- </p>
- <pre class="code">myObject.Set('chart.colors', ['#f00', '#0000ff']);</pre>
-
- <a name="rgb"></a>
- <br /> <br />
- <h2>RGB values</h2>
-
- <p>
- Also as used in CSS, RGB values are the same as what you can use in CSS. Eg:
- </p>
-
- <pre class="code">myObject.Set('chart.colors', ['rgb(255,0,0)', 'rgb(0,0,255)']);</pre>
- <a name="rgba"></a>
- <br /> <br />
- <h2>RGBA values</h2>
-
- <p>
- Probably new to most people, is rgba(). Similar to regular rgb() values, but with a fourth value that allows you to specify the
- alpha value, which stipulates how transparent the color is. An alpha value of 0 is totally transparent, and a value of 1, is
- totally opaque (ie. you can't see through it). With a value of 1, rgba() acts exactly like rgb(). This example gives you red
- and blue colors that are semi-transparent:
- </p>
-
- <pre class="code">myObject.Set('chart.colors', ['rgba(255,0,0,0.5)', 'rgba(0,0,255,0.5)']);</pre>
- <a name="hsl"></a>
- <br /> <br />
- <h2>HSL() values</h2>
-
- <p>
- Also probably quite new to you, are hsl() values. Much like rgb(), but instead of red green and blue, it allows you to specify
- the Hue, Saturation and Light values instead. For example:
- </p>
-
- <pre class="code">myObject.Set('chart.colors', ['hsl(255, 100%, 50%)', 'hsl(169, 100%, 50%)']);</pre>
- <a name="hsla"></a>
- <br /> <br />
- <h2>HSLA() values</h2>
- <p>
- Much like rgb() and rgba(), hsl() has a corresponding hsla() version, which allows you to specify an alpha (transparency) value.
- Eg:
- </p>
-
- <pre class="code">myObject.Set('chart.colors', ['hsla(255, 100%, 50%, 0.5)', 'hsla(169, 100%, 50%, 0.5)']);</pre>
- <a name="lgradients"></a>
- <br /> <br />
- <h2>Linear gradients</h2>
-
- <p>
- Gradients can be used in place of color values. You can create a linear gradient like so:
- </p>
-
- <pre class="code">myGradient = myObject.context.createLinearGradient(0,0,0,250);
- myGradient.addColorStop(0, 'red');
- myGradient.addColorStop(1, 'blue');</pre>
- <p>
- This creates a gradient that goes from red to blue. The gradient starts at 0,0, and finishes at 0,250. ie A vertical
- gradient. You may not see the whole gradient - that depends on the extent of the shape you're filling. You can use the gradient
- in place of a regular color definition. Eg:
- </p>
-
- <pre class="code">myObject.Set('chart.colors', [myGradient]);</pre>
- <a name="rgradients"></a>
- <br /> <br />
- <h2>Radial gradients</h2>
- <p>
- Radial gradients are much like their linear counterparts, but circular, as the name suggests. Eg:
- </p>
-
- <pre class="code">myGradient = myObject.context.createRadialGradient(0,0,0,0,0,100);
- myGradient.addColorStop(0, 'red');
- myGradient.addColorStop(1, 'blue');
- </pre>
-
- <p>
- Instead of four arguments, it takes six - the coordinates of the start point along with the radius, and the coordinates
- of the end point, along with the radius. After it has been created, you can treat as you would a linear gradient:
- </p>
- <pre class="code">myObject.Set('chart.colors', [myGradient]);</pre>
- <a name="info"></a>
- <br /> <br />
- <h2>More information</h2>
-
- <p>
- You can read more about CSS3 color definitions <a href="http://www.w3.org/TR/css3-color/" target="_blank" rel="nofollow">here</a>.
- </p>
- </body>
- </html>