deon/phptsmadmin
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
This repository has been archived on 2024-04-08. You can view files and clone it, but cannot push or open issues or pull requests.
21b013e3ba
phptsmadmin/includes/jpgraph/docs/chunkhtml/ch14s16.html

96 lines
9.7 KiB
HTML
Raw Normal View History

Added JPGraph v3.5.0b1
2011-05-28 09:51:52 +00:00
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Using background gradients</title><link rel="stylesheet" type="text/css" href="manual.css"><meta name="generator" content="DocBook XSL Stylesheets V1.76.0"><link rel="home" href="index.html" title="JpGraph Manual"><link rel="up" href="ch14.html" title="Chapter 14. Common features for all Cartesian (x,y) graph types"></head><body bgcolor="white" text="black" link="#0000FF" vlink="#840084" alink="#0000FF"><div class="navheader"><table width="100%" summary="Navigation header"><tr><th colspan="3" align="center">Using background gradients</th></tr><tr><td width="20%" align="left"> </td><th width="60%" align="center">Chapter 14. Common features for all Cartesian (x,y) graph types</th><td width="20%" align="right"> </td></tr></table><hr></div><div class="sect1" title="Using background gradients"><div class="titlepage"><div><div><h2 class="title" style="clear: both"><a name="id2552733"></a>Using background gradients</h2></div></div></div>
<p>A color gradient background will change the color from a start color to a finish
color in even steps (the number of steps depends on the size of the graph). The
direction of the gradient is controlled by specifying a style parameter for the
gradient. The signature for the gradient background method is</p>
<p>
</p><div class="orderedlist"><ol class="orderedlist" type="1"><li class="listitem">
<p><code class="code">Graph::SetBackgroundGradient($aFrom='navy',$aTo='silver',$aGradType=2,$aStyle=BGRAD_FRAME)</code></p>
</li></ol></div><p>
</p>
<p>The last style par mater specified where in the graph the gradient style should be
applied and the different options are</p>
<p>
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
<p><code class="code">BGRAD_FRAME</code>, The entire graph frame will be filled
</p>
</li><li class="listitem">
<p><code class="code">BGRAD_MARGIN</code>, Only the margin area (the graph area
outside the plot area) will be filled</p>
</li><li class="listitem">
<p><code class="code">GRAD_PLOT</code>, Only the plot area will be filled</p>
</li></ul></div><p>
</p>
<p>This is illustrated in <a class="xref" href="ch14s16.html#fig.different-gradient-fill-types" title="Figure 14.93. What area of the graph the gradient should affect">Figure 14.93. What area of the graph the gradient should affect</a></p>
<p>
</p><div class="figure"><a name="fig.different-gradient-fill-types"></a><p class="title"><b>Figure 14.93. What area of the graph the gradient should affect</b></p><div class="figure-contents">
<div class="informaltable">
<table border="0"><colgroup><col class="c1"><col class="c2"><col class="c3"></colgroup><tbody><tr><td align="center">
<p><span class="inlinemediaobject"><img src="images/grad_bgrad_frame.png" alt="What area of the graph the gradient should affect"></span></p>
<p><code class="code">BGRAD_FRAME</code></p>
</td><td align="center">
<p><span class="inlinemediaobject"><img src="images/grad_bgrad_margin.png" alt="What area of the graph the gradient should affect"></span></p>
<p><code class="code">BGRAD_MARGIN</code></p>
</td><td align="center">
<p><span class="inlinemediaobject"><img src="images/grad_bgrad_plot.png" alt="What area of the graph the gradient should affect"></span></p>
<p><code class="code">BGRAD_PLOT</code></p>
</td></tr></tbody></table>
</div>
</div></div><p><br class="figure-break">
</p>
<p>The different types of gradient fills are shown in <a class="xref" href="ch14s16.html#fig.different-gradient-types" title="Figure 14.94. Different types of gradient fills">Figure 14.94. Different types of gradient fills</a> where the gradient from color is
"<code class="code">white</code>" and the to color is "<code class="code">orange</code>"</p>
<p>
</p><div class="figure"><a name="fig.different-gradient-types"></a><p class="title"><b>Figure 14.94. Different types of gradient fills</b></p><div class="figure-contents">
<div class="informaltable">
<table border="0"><colgroup><col class="c1"><col class="c2"></colgroup><tbody><tr><td>
<p><span class="inlinemediaobject"><img src="images/grad_vert.png" alt="Different types of gradient fills"></span></p>
</td><td>
<p><span class="inlinemediaobject"><img src="images/grad_hor.png" alt="Different types of gradient fills"></span></p>
</td></tr><tr><td>
<p><span class="inlinemediaobject"><img src="images/grad_midhor.png" alt="Different types of gradient fills"></span></p>
</td><td>
<p><span class="inlinemediaobject"><img src="images/grad_midver.png" alt="Different types of gradient fills"></span></p>
</td></tr><tr><td>
<p><span class="inlinemediaobject"><img src="images/grad_wide_midhor.png" alt="Different types of gradient fills"></span></p>
</td><td>
<p><span class="inlinemediaobject"><img src="images/grad_wide_midver.png" alt="Different types of gradient fills"></span></p>
</td></tr><tr><td>
<p><span class="inlinemediaobject"><img src="images/grad_left_reflection.png" alt="Different types of gradient fills"></span></p>
</td><td>
<p><span class="inlinemediaobject"><img src="images/grad_right_reflection.png" alt="Different types of gradient fills"></span></p>
</td></tr><tr><td>
<p><span class="inlinemediaobject"><img src="images/grad_center.png" alt="Different types of gradient fills"></span></p>
</td><td>
<p><span class="inlinemediaobject"><img src="images/grad_raised_panel.png" alt="Different types of gradient fills"></span></p>
</td></tr><tr><td>
<p><span class="inlinemediaobject"><img src="images/grad_diagonal.png" alt="Different types of gradient fills"></span></p>
</td><td> </td></tr></tbody></table>
</div>
</div></div><p><br class="figure-break">
</p>
<div class="sect2" title="Generating gradient background off-line"><div class="titlepage"><div><div><h3 class="title"><a name="id2553714"></a>Generating gradient background off-line</h3></div></div></div>
<p>A drawback of using gradient backgrounds is that they are processing intensive
and since they are generated each time the graph is generated it can take
substantive amount of time for large graphs. To help with this the library
offers a small (very simple) utility that can be tun to create gradient images
off line. These images can later on be used as (static) background images. In
the distribution there is a small utility in the
"<code class="filename">Examples/</code>" directory called
"<code class="filename">mkgrad.php</code>". Pointing the browser to this script will
show a basic form as shown in <a class="xref" href="ch14s16.html#fig.mkgrad" title='Figure 14.95. The "mkgrad" utiliy to create gradient images'>Figure 14.95. The "mkgrad" utiliy to create gradient images</a>. The script will
allow the creation of a gradient images using any of the predefined colors and
gradient types.</p>
<p>
</p><div class="figure"><a name="fig.mkgrad"></a><p class="title"><b>Figure 14.95. The "mkgrad" utiliy to create gradient images</b></p><div class="figure-contents">
<div class="mediaobject"><img src="images/mkgrad.png" alt='The "mkgrad" utiliy to create gradient images'></div>
</div></div><p><br class="figure-break">
</p>
</div>
</div><div class="navfooter"><hr><table width="100%" summary="Navigation footer"><tr><td width="40%" align="left"> </td><td width="20%" align="center"><a accesskey="u" href="ch14.html">Up</a></td><td width="40%" align="right"> </td></tr><tr><td width="40%" align="left" valign="top"> </td><td width="20%" align="center"><a accesskey="h" href="index.html">Home</a></td><td width="40%" align="right" valign="top"> </td></tr></table></div></body></html>
Reference in New Issue Copy Permalink