RGraph/docs/color.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 - About canvas color definitions</title>
  22
  23     <meta name="keywords" content="rgraph html5 canvas graph docs color" />
  24     <meta name="description" content="RGraph: HTML5 canvas graph software - Documentation about canvas colors" />
  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 </head>
  29 <body>
  30
  31     <!-- Social networking buttons -->
  32     <script src="../libraries/RGraph.common.core.js" ></script>
  33
  34     <script>
  35         function HideTwitterDIV ()
  36         {
  37             document.getElementById("twitter_div").style.opacity = 0;
  38             document.getElementById("twitter_div").style.display = 'none';
  39         }
  40
  41
  42         function ShowTwitterDIV (e)
  43         {
  44             var e   = RGraph.FixEventObject(document.all ? event : e);
  45             var div = document.getElementById("twitter_div");
  46             var img = document.getElementById("twitter_icon");
  47
  48             div.style.display = 'block';
  49             div.style.left    = (RGraph.getCanvasXY(img)[0] + img.offsetWidth - div.offsetWidth + 110) + 'px';
  50             div.style.top     = (RGraph.getCanvasXY(img)[1] - 1) + 'px';
  51
  52             /**
  53             * Fade it in
  54             */
  55             setTimeout('document.getElementById("twitter_div").style.opacity = 0.2;', 25);
  56             setTimeout('document.getElementById("twitter_div").style.opacity = 0.4;', 50);
  57             setTimeout('document.getElementById("twitter_div").style.opacity = 0.6;', 100);
  58             setTimeout('document.getElementById("twitter_div").style.opacity = 0.8;', 125);
  59             setTimeout('document.getElementById("twitter_div").style.opacity = 1.0;', 150);
  60
  61             e.stopPropagation();
  62
  63             return false;
  64         }
  65
  66         /**
  67         * This code installs the event handler that hides the Twitter DIV
  68         */
  69         if (RGraph.isIE8()) {
  70              window.attachEvent('onload', function () {document.body.attachEvent('onclick', HideTwitterDIV);});
  71         } else {
  72             window.addEventListener('click', HideTwitterDIV, false);
  73         }
  74     </script>
  75
  76     <!-- The twitter DIV -->
  77     <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;">
  78         <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>
  79         <a href="http://twitter.com/_rgraph" style="text-decoration: none" rel="nofollow" target="_blank">Follow for HTML5 news</a>
  80     </div>
  81
  82     <div id="social_icons" class="warning" style="top: 0; left: 5px; position: absolute">
  83         <script>
  84             // Opera fix
  85             if (navigator.userAgent.indexOf('Opera') == -1) {
  86               document.getElementById("social_icons").style.position = 'fixed';
  87               document.getElementById("twitter_div").style.position = 'fixed';
  88
  89             }
  90         </script>
  91
  92         <b style="display: inline-block; position: relative; top: 1px">Bookmark and share:</b>
  93
  94
  95             <div id="social">
  96                 <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">
  97                     <img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" align="absmiddle" />
  98                 </a>
  99
 100                 <a href="" target="_blank" onmouseover="if (document.getElementById('twitter_div').style.display == 'none') ShowTwitterDIV(event);" onclick="event.stopPropagation(); event.cancelBubble = true; return false">
 101                     <img src="../images/twitter.png" id="twitter_icon" alt="tweet this site" width="22" height="22" border="0" align="absmiddle" />
 102                 </a>
 103
 104
 105 <!--
 106                 <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">
 107                     <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"/>
 108                 </a>
 109
 110
 111                 <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">
 112                     <img src="../images/facebook.png" width="22" height="22" alt="Post to Facebook" align="absmiddle" style="position: relative; top: -2px; border: 0" border="0"/>
 113                 </a>
 114
 115                 <a href="mailto:share@friendfeed.com" title="Share on FriendFeed">
 116                     <img src="../images/friendfeed.png" width="22" height="22" alt="Share on FriendFeed" border="0" align="absmiddle" />
 117                 </a>
 118
 119                 <a href="http://www.stumbleupon.com/submit?url=http://www.rgraph.net" target="_blank" title="Share on StumbleUpon" >
 120                     <img src="../images/stumble.png" alt="Stumble! this site" width="22" height="22" border="0" align="absmiddle" />
 121                 </a>
 122 -->
 123             </div>
 124     </div>
 125     <!-- /Social networking buttons -->
 126
 127     <div id="breadcrumb">
 128         <a href="../index.html">RGraph: HTML5 canvas graph library</a>
 129         >
 130         <a href="index.html">Documentation</a>
 131         >
 132         About canvas color definitions
 133     </div>
 134
 135     <h1>RGraph: HTML5 canvas graph library - About canvas color definitions</h1>
 136
 137     <script>
 138         if (RGraph.isIE8()) {
 139             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>');
 140         }
 141     </script>
 142
 143     <p>
 144         You will probably want to know the different ways you can define a color. There are a few
 145         ways which you can use, all of which are quite straight-forward.
 146     </p>
 147
 148     <ul id="colors">
 149         <li><a href="#named">Named colors</a></li>
 150         <li><a href="#hex">Hex values</a></li>
 151         <li><a href="#rgb">RGB values</a></li>
 152         <li><a href="#rgba">RGBA values</a></li>
 153         <li><a href="#hsl">HSL values</a></li>
 154         <li><a href="#hsla">HSLA values</a></li>
 155         <li><a href="#lgradients">Linear gradients</a></li>
 156         <li><a href="#rgradients">Radial gradients</a></li>
 157         <li><a href="#info">More information</a></li>
 158     </ul>
 159
 160     <a name="named"></a>
 161     <br />&nbsp;<br />
 162     <h2>Named colors</h2>
 163
 164     <p>
 165         The first, and easiest, is to use named colors. This gives you a range of color values that have been predefined for you. Eg:
 166     </p>
 167
 168     <pre class="code">myObject.Set('chart.colors', ['red', 'blue']);</pre>
 169
 170     <a name="hex"></a>
 171     <br />&nbsp;<br />
 172     <h2>Hex values</h2>
 173
 174     <p>
 175         The next, is straight forward hex values like you can use in normal CSS. These consist of a hash sign,
 176         followed by three or six hexadecimal characters. Eg:
 177     </p>
 178
 179     <pre class="code">myObject.Set('chart.colors', ['#f00', '#0000ff']);</pre>
 180
 181     <a name="rgb"></a>
 182     <br />&nbsp;<br />
 183     <h2>RGB values</h2>
 184
 185     <p>
 186         Also as used in CSS, RGB values are the same as what you can use in CSS. Eg:
 187     </p>
 188
 189     <pre class="code">myObject.Set('chart.colors', ['rgb(255,0,0)', 'rgb(0,0,255)']);</pre>
 190
 191     <a name="rgba"></a>
 192     <br />&nbsp;<br />
 193     <h2>RGBA values</h2>
 194
 195     <p>
 196         Probably new to most people, is rgba(). Similar to regular rgb() values, but with a fourth value that allows you to specify the
 197         alpha value, which stipulates how transparent the color is. An alpha value of 0 is totally transparent, and a value of 1, is
 198         totally opaque (ie. you can't see through it). With a value of 1, rgba() acts exactly like rgb(). This example gives you red
 199         and blue colors that are semi-transparent:
 200     </p>
 201
 202     <pre class="code">myObject.Set('chart.colors', ['rgba(255,0,0,0.5)', 'rgba(0,0,255,0.5)']);</pre>
 203
 204     <a name="hsl"></a>
 205     <br />&nbsp;<br />
 206     <h2>HSL() values</h2>
 207
 208     <p>
 209         Also probably quite new to you, are hsl() values. Much like rgb(), but instead of red green and blue, it allows you to specify
 210         the Hue, Saturation and Light values instead. For example:
 211     </p>
 212
 213     <pre class="code">myObject.Set('chart.colors', ['hsl(255, 100%, 50%)', 'hsl(169, 100%, 50%)']);</pre>
 214
 215     <a name="hsla"></a>
 216     <br />&nbsp;<br />
 217     <h2>HSLA() values</h2>
 218
 219     <p>
 220         Much like rgb() and rgba(), hsl() has a corresponding hsla() version, which allows you to specify an alpha (transparency) value.
 221         Eg:
 222     </p>
 223
 224     <pre class="code">myObject.Set('chart.colors', ['hsla(255, 100%, 50%, 0.5)', 'hsla(169, 100%, 50%, 0.5)']);</pre>
 225
 226     <a name="lgradients"></a>
 227     <br />&nbsp;<br />
 228     <h2>Linear gradients</h2>
 229
 230     <p>
 231         Gradients can be used in place of color values. You can create a linear gradient like so:
 232     </p>
 233
 234     <pre class="code">myGradient = myObject.context.createLinearGradient(0,0,0,250);
 235 myGradient.addColorStop(0, 'red');
 236 myGradient.addColorStop(1, 'blue');</pre>
 237
 238     <p>
 239         This creates a gradient that goes from red to blue. The gradient starts at 0,0, and finishes at 0,250. ie A vertical
 240         gradient. You may not see the whole gradient - that depends on the extent of the shape you're filling. You can use the gradient
 241         in place of a regular color definition. Eg:
 242     </p>
 243
 244     <pre class="code">myObject.Set('chart.colors', [myGradient]);</pre>
 245
 246     <a name="rgradients"></a>
 247     <br />&nbsp;<br />
 248     <h2>Radial gradients</h2>
 249
 250     <p>
 251         Radial gradients are much like their linear counterparts, but circular, as the name suggests. Eg:
 252     </p>
 253
 254     <pre class="code">myGradient = myObject.context.createRadialGradient(0,0,0,0,0,100);
 255 myGradient.addColorStop(0, 'red');
 256 myGradient.addColorStop(1, 'blue');
 257 </pre>
 258
 259     <p>
 260         Instead of four arguments, it takes six - the coordinates of the start point along with the radius, and the coordinates
 261         of the end point, along with the radius. After it has been created, you can treat as you would a linear gradient:
 262     </p>
 263
 264     <pre class="code">myObject.Set('chart.colors', [myGradient]);</pre>
 265
 266     <a name="info"></a>
 267     <br />&nbsp;<br />
 268     <h2>More information</h2>
 269
 270     <p>
 271         You can read more about CSS3 color definitions  <a href="http://www.w3.org/TR/css3-color/" target="_blank" rel="nofollow">here</a>.
 272     </p>
 273 </body>
 274 </html>