| 1 |
lars |
1 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
|
|
|
2 |
<HTML>
|
|
|
3 |
<HEAD>
|
|
|
4 |
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=iso-iso-8859-1">
|
|
|
5 |
<LINK REL="Start" HREF="index.html">
|
|
|
6 |
<LINK REL="Contents" HREF="toc.html">
|
|
|
7 |
<LINK REL="Prev" HREF="915Addingplotmarksiradargraphs.html">
|
|
|
8 |
<LINK REL="Next" HREF="921AddingguidelinestoPiePlots.html">
|
|
|
9 |
<STYLE TYPE="text/css"><!--
|
|
|
10 |
BODY { font-family: serif }
|
|
|
11 |
H1 { font-family: sans-serif }
|
|
|
12 |
H2 { font-family: sans-serif }
|
|
|
13 |
H3 { font-family: sans-serif }
|
|
|
14 |
H4 { font-family: sans-serif }
|
|
|
15 |
H5 { font-family: sans-serif }
|
|
|
16 |
H6 { font-family: sans-serif }
|
|
|
17 |
SUB { font-size: smaller }
|
|
|
18 |
SUP { font-size: smaller }
|
|
|
19 |
PRE { font-family: monospace }
|
|
|
20 |
A { text-decoration: none }
|
|
|
21 |
--></STYLE>
|
|
|
22 |
</HEAD>
|
|
|
23 |
<BODY>
|
|
|
24 |
<A HREF="toc.html">Contents</A>
|
|
|
25 |
<A HREF="915Addingplotmarksiradargraphs.html">Previous</A>
|
|
|
26 |
<A HREF="921AddingguidelinestoPiePlots.html">Next</A>
|
|
|
27 |
<HR NOSHADE>
|
|
|
28 |
<H2><A NAME="9_2">9.2 Pie plots</A></H2>
|
|
|
29 |
<P> So far we have just show plots based on an X-Y coordinate system.
|
|
|
30 |
This is not the only types of graphs you can create with JpGraph.
|
|
|
31 |
Another common type is Pie plots. JpGraph supports both 2D and 3D pie
|
|
|
32 |
plots. For 2D pie plots there are also 2 versions, but more on that
|
|
|
33 |
later.</P>
|
|
|
34 |
<P> The main difference as compared to the X-Y plots is that to all pie
|
|
|
35 |
plots are added to the <A href="../ref/PieGraph.html#_C_PIEGRAPH">
|
|
|
36 |
PieGraph()</A> instead of the Graph() object we used for the X-Y graphs
|
|
|
37 |
we have drawn so far. For this you must first include the
|
|
|
38 |
"jpgraph_pie.php" in your script (or "jpgraph_pie3d.php" if you want to
|
|
|
39 |
use 3-dimensional pies).</P>
|
|
|
40 |
<P> Below you cane see the code needed to create the simplest possible
|
|
|
41 |
pie graph just using the default settings.</P>
|
|
|
42 |
<P><DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB">
|
|
|
43 |
</FONT><FONT color="#007700">include (</FONT><FONT color="#DD0000">
|
|
|
44 |
"../jpgraph.php"</FONT><FONT color="#007700">);
|
|
|
45 |
<BR>include (</FONT><FONT color="#DD0000">"../jpgraph_pie.php"</FONT><FONT
|
|
|
46 |
color="#007700">);
|
|
|
47 |
<BR>
|
|
|
48 |
<BR></FONT><FONT color="#0000BB">$data </FONT><FONT color="#007700">
|
|
|
49 |
= array(</FONT><FONT color="#0000BB">40</FONT><FONT color="#007700">,</FONT><FONT
|
|
|
50 |
color="#0000BB">60</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">
|
|
|
51 |
21</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">33</FONT><FONT
|
|
|
52 |
color="#007700">);
|
|
|
53 |
<BR>
|
|
|
54 |
<BR></FONT><FONT color="#0000BB">$graph </FONT><FONT color="#007700">
|
|
|
55 |
= new </FONT><FONT color="#0000BB">PieGraph</FONT><FONT color="#007700">
|
|
|
56 |
(</FONT><FONT color="#0000BB">300</FONT><FONT color="#007700">,</FONT><FONT
|
|
|
57 |
color="#0000BB">200</FONT><FONT color="#007700">);
|
|
|
58 |
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-></FONT><FONT
|
|
|
59 |
color="#0000BB">SetShadow</FONT><FONT color="#007700">();
|
|
|
60 |
<BR>
|
|
|
61 |
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-></FONT><FONT
|
|
|
62 |
color="#0000BB">title</FONT><FONT color="#007700">-></FONT><FONT color="#0000BB">
|
|
|
63 |
Set</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">
|
|
|
64 |
"A simple Pie plot"</FONT><FONT color="#007700">);
|
|
|
65 |
<BR>
|
|
|
66 |
<BR></FONT><FONT color="#0000BB">$p1 </FONT><FONT color="#007700">= new </FONT><FONT
|
|
|
67 |
color="#0000BB">PiePlot</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
|
|
|
68 |
$data</FONT><FONT color="#007700">);
|
|
|
69 |
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-></FONT><FONT
|
|
|
70 |
color="#0000BB">Add</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">
|
|
|
71 |
$p1</FONT><FONT color="#007700">);
|
|
|
72 |
<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-></FONT><FONT
|
|
|
73 |
color="#0000BB">Stroke</FONT><FONT color="#007700">();
|
|
|
74 |
<BR></FONT><FONT color="#0000BB"></FONT></FONT></CODE></DIV></P>
|
|
|
75 |
<P> The above code would give the following pie graph<DIV class="example">
|
|
|
76 |
<BR> <A href="exframes/frame_example26.html" target="blank"><IMG border="0"
|
|
|
77 |
HEIGHT="200" src="img/example26.png" WIDTH="300"></A>
|
|
|
78 |
<BR><B>Figure 117:</B> The simplest possible pie graph <A href="exframes/frame_example26.html"
|
|
|
79 |
target="blank">[src]</A>
|
|
|
80 |
<P></P>
|
|
|
81 |
</DIV></P>
|
|
|
82 |
<P> There is a few things worth noting here</P>
|
|
|
83 |
<UL>
|
|
|
84 |
<LI> By default all pie slices have the percentage shown just outside
|
|
|
85 |
the slice.</LI>
|
|
|
86 |
<LI> The colors are automatically assigned to the slices.</LI>
|
|
|
87 |
<LI> The pie have the edges marked by default</LI>
|
|
|
88 |
<LI> The first slice start at 0 degrees (3 o'clock)</LI>
|
|
|
89 |
</UL>
|
|
|
90 |
<P> You can change almost all aspects of appearance of the pie graphs.
|
|
|
91 |
For example you could change :</P>
|
|
|
92 |
<UL>
|
|
|
93 |
<LI> Change the angle for the first slice, (<A href="../ref/PiePlot.html#_PIEPLOT_SETSTARTANGLE">
|
|
|
94 |
PiePlot::SetStartAngle()</A>)</LI>
|
|
|
95 |
<LI>Remove the border lines around the pie (<A href="../ref/PiePlot.html#_PIEPLOT_SHOWBORDER">
|
|
|
96 |
PiePlot::ShowBorder()</A>)</LI>
|
|
|
97 |
<LI>Change the color of the border (<A href="../ref/PiePlot.html#_PIEPLOT_SETCOLOR">
|
|
|
98 |
PiePlot::SetColor()</A>,</LI>
|
|
|
99 |
<LI>Change the colors of the slices (<A href="../ref/PiePlot.html#_PIEPLOT_SETSLICECOLORS">
|
|
|
100 |
PiePlot::SetSliceCOlors()</A>)</LI>
|
|
|
101 |
<LI> Change the size and position of the pie (<A href="../ref/PiePlot.html#_PIEPLOT_SETSIZE">
|
|
|
102 |
PiePlot::SetSize()</A>, <A href="../ref/PiePlot.html#_PIEPLOT_SETCENTER">
|
|
|
103 |
PiePlot::SetCenter()</A>)</LI>
|
|
|
104 |
<LI> Adjust the labels for the slice (color, font, format, position ) by
|
|
|
105 |
accessing the <A href="../ref/DisplayValue.html#_C_DISPLAYVALUE">value
|
|
|
106 |
property</A> of pie plots, for example (<A href="../ref/DisplayValue.html#_DISPLAYVALUE_SETFONT">
|
|
|
107 |
PiePlot::value::SetFont()</A>, You can read more about label formatting
|
|
|
108 |
and how to change what is displayed as a value further down in this
|
|
|
109 |
chapter.</LI>
|
|
|
110 |
</UL>
|
|
|
111 |
<P></P>
|
|
|
112 |
<P> The next simplest addition we can do is to add a legend to the pie
|
|
|
113 |
graph. We do this by using the <A href="../ref/PiePlot.html#_PIEPLOT_SETLEGENDS">
|
|
|
114 |
SetLegends();</A> method. By adding the legends to the previous example
|
|
|
115 |
we get the following image<DIV class="example">
|
|
|
116 |
<BR> <A href="exframes/frame_example26.1.html" target="blank"><IMG border="0"
|
|
|
117 |
HEIGHT="200" src="img/example26.1.png" WIDTH="300"></A>
|
|
|
118 |
<BR><B>Figure 118:</B> Adding a legend to the pie graph <A href="exframes/frame_example26.1.html"
|
|
|
119 |
target="blank">[src]</A>
|
|
|
120 |
<P></P>
|
|
|
121 |
</DIV></P>
|
|
|
122 |
<P></P>
|
|
|
123 |
<P> (In the figure above we also moved the center of the pie slightly to
|
|
|
124 |
the left to make more room for the legend box.)</P>
|
|
|
125 |
<P> The text for the legends can also contain printf() style format
|
|
|
126 |
strings to format a number. This number passed on into this string is
|
|
|
127 |
either the absolute value of the slice or the percentage value. How to
|
|
|
128 |
switch between the is describe further down in this chapter.</P>
|
|
|
129 |
<P> The next change you might want to change is the size and position of
|
|
|
130 |
the Pie plot. You can change the size with a call to <A href="../ref/PiePlot.html#_PIEPLOT_SETSIZE">
|
|
|
131 |
SetSize();</A> and the position of the center of the pie plot with a
|
|
|
132 |
call to <A href="../ref/PiePlot.html#_PIEPLOT_SETCENTER"> SetCenter();</A>
|
|
|
133 |
The size can be specified as either an absolute size in pixels or as a
|
|
|
134 |
fraction of width/height (whatever is the smallest). The position of
|
|
|
135 |
the pie plot is specified as a fraction of the width and height.</P>
|
|
|
136 |
<P> To put the size and positioning API to use we will show how to put
|
|
|
137 |
several pie plots on the same pie graph. In the following example we
|
|
|
138 |
have also adjusted the legends of the slice values to use a smaller
|
|
|
139 |
font.</P>
|
|
|
140 |
<P> What we do in this example is quite simple, create 4 pie plots, make
|
|
|
141 |
them smaller and put them in the four corner of the graph. This will
|
|
|
142 |
give the result as shown in the following example.<DIV class="example">
|
|
|
143 |
<BR> <A href="exframes/frame_pieex3.html" target="blank"><IMG border="0" HEIGHT="300"
|
|
|
144 |
src="img/pieex3.png" WIDTH="350"></A>
|
|
|
145 |
<BR><B>Figure 119:</B> Multiple pie plots in the same pie graph <A href="exframes/frame_pieex3.html"
|
|
|
146 |
target="blank">[src]</A>
|
|
|
147 |
<P></P>
|
|
|
148 |
</DIV></P>
|
|
|
149 |
<P></P>
|
|
|
150 |
<HR NOSHADE>
|
|
|
151 |
<A HREF="toc.html">Contents</A>
|
|
|
152 |
<A HREF="915Addingplotmarksiradargraphs.html">Previous</A>
|
|
|
153 |
<A HREF="921AddingguidelinestoPiePlots.html">Next</A>
|
|
|
154 |
</BODY>
|
|
|
155 |
</HTML>
|