PageRenderTime 38ms CodeModel.GetById 9ms RepoModel.GetById 1ms app.codeStats 0ms

/umfrage/auswertung/docs/html/3090axisform.html

http://flaimo-php.googlecode.com/
HTML | 288 lines | 277 code | 0 blank | 11 comment | 0 complexity | 18adb609ce565993c917b4f8760f2a7f MD5 | raw file
    

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
    2. 

  2. <HTML>
    3. 

  3. <HEAD>
    4. 

  4. <TITLE>JpGraph Manual (ver:30 Oct 2002 09:48)</TITLE>
    5. 

  5. <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=iso-8859-1">
    6. 

  6. <STYLE TYPE="text/css"><!--
    7. 

  7. BODY { font-family: serif }
    8. 

  8. H1 { font-family: sans-serif }
    9. 

  9. H2 { font-family: sans-serif }
    10. 

  10. H3 { font-family: sans-serif }
    11. 

  11. H4 { font-family: sans-serif }
    12. 

  12. H5 { font-family: sans-serif }
    13. 

  13. H6 { font-family: sans-serif }
    14. 

  14. SUB { font-size: smaller }
    15. 

  15. SUP { font-size: smaller }
    16. 

  16. PRE { font-family: monospace }
    17. 

  17. A { text-decoration: none }
    18. 

  18. --></STYLE>
    19. 

  19. </HEAD>
    20. 

  20. <BODY>
    21. 

  21. <IMG  src="img/JpGraph_Logo.png">
    22. 

  22. <A HREF="index.html">Contents</A>
    23. 

  23. <A HREF="3080graphaug.html">Previous</A>
    24. 

  24. <A HREF="3095bands.html">Next</A>
    25. 

  25. <HR>
    26. 

  26. <H2><A NAME="6_14">6.14 Formatting the axis</A></H2>
    27. 

  27.  To get the exact type of axis you want in your graph there are a number
    28. 

  28.  of adjustments available for you. You may change, color, size, position
    29. 

  29.  and general apperance.
    30. 

  30. <P></P>
    31. 

  31. <H3><A NAME="6_14_1">6.14.1  Standard two axis graphs</A></H3>
    32. 

  32.  Assuming we start with the traditonal two axis graph, one X and one Y
    33. 

  33.  axis. You may then change the position of each axis by calling<A href="../ref/Axis.html#_AXIS_SETPOS">
    34. 

  34.  Axis::SetPos($aPosition)</A> You have to remember that you need to
    35. 

  35.  specify the position on the other axis. SO you need to specify the
    36. 

  36.  world-coordinate for the position. By default the axis are each
    37. 

  37.  positoined at the 0-point on the other axis, i.e. the axis will cross
    38. 

  38.  at the 0,0 point in the graph.
    39. 

  39. <P> In additio to the standard positioning you may also use the two
    40. 

  40.  special position markers &quot;min&quot; and &quot;max&quot;. This will position the axis
    41. 

  41.  at the minimum (or maximum) position of the other axis.</P>
    42. 

  42. <P> For example, to make sure that the X-axis is always at the bottom of
    43. 

  43.  the graph (at lowest possible Y-value) you would have to add the line</P>
    44. 

  44. <P>
    45. 

  45. <BR> &nbsp;
    46. 

  46. <BR><DIV style="background-color:#E6E6E6;font-family:courier new;font-size:85%;font-weight:bold;">
    47. 

  47. <B><CODE><FONT color="#000000"><FONT color="#0000CC"> $graph</FONT><FONT color="#006600">
    48. 

  48. -&gt;</FONT><FONT color="#0000CC">xaxis</FONT><FONT color="#006600">-&gt;</FONT><FONT
    49. 

  49. color="#0000CC">SetPos</FONT><FONT color="#006600">(</FONT><FONT color="#CC0000">
    50. 

  50. &quot;min&quot;</FONT><FONT color="#006600">);</FONT><FONT color="#0000CC"></FONT></FONT>
    51. 

  51. </CODE></B></DIV></P>
    52. 

  52. <P></P>
    53. 

  53. <P> To change the color and width of the axis you have to make use of
    54. 

  54.  the<A href="../ref/Axis.html#_AXIS_SETCOLOR"> Axis::SetColor()</A> and<A
    55. 

  55. href="../ref/Axis.html#_AXIS_SETWEIGHT"> Axis::SetWeight()</A> methods.</P>
    56. 

  56. <HR> <SMALL><STRONG> Invisible axis</STRONG> Even though JpGraph (1.7)
    57. 

  57.  doesn't directly support &quot;hidden&quot; axis wher the labels are still drawn
    58. 

  58.  it is very easy to achive this effect by setting the colors of the axis
    59. 

  59.  to be the same as the background. See the example barintex2.php in the
    60. 

  60.  Example directory. To completely hide an axis you can make use of the<A href="../ref/Axis.html#_AXIS_HIDE">
    61. 

  61.  Hide()</A></SMALL>
    62. 

  62. <HR>
    63. 

  63. <P> You might also want to add titles to the axis. This is done through
    64. 

  64.  the<A href="../ref/Axis.html#_AXIS_SETTITLE"> Axis::SetTitle()</A>
    65. 

  65.  method. This is actually just a shortcut for accessing the title
    66. 

  66.  proeprty direct. Axis::title::Set() which also allow you to set the
    67. 

  67.  alignment in one call.</P>
    68. 

  68. <P> By default the position of the title is to the far right for the
    69. 

  69.  X-axis and in the middle (and 90 degrees rotated) for the Y-axis.</P>
    70. 

  70. <P> You can adjust the position of the title with the help of the second
    71. 

  71.  argument to the<A href="../ref/Axis.html#_AXIS_SETTITLE">
    72. 

  72.  Axis::SetTitle()</A> method.</P>
    73. 

  73. <P> The possible positions are &quot;high&quot;,&quot;middle&quot; and &quot;low&quot; which refers to
    74. 

  74.  the scale values on the axis.</P>
    75. 

  75. <P> One common modification you might want to do to the title is to
    76. 

  76.  increase the margin between the axis and the actual title. This is
    77. 

  77.  often necessary to do for the Y-axis if the values displayed are large.
    78. 

  78.  You may adjust the distance (in pixels) between the axis and the title
    79. 

  79.  by using the method<A href="../ref/Axis.html#_AXIS_SETTITLEMARGIN">
    80. 

  80.  Axis::SetTitleMargin()</A></P>
    81. 

  81. <P> So for example to increase the margin on the Y-axis you might add
    82. 

  82.  the line</P>
    83. 

  83. <P>
    84. 

  84. <BR> &nbsp;
    85. 

  85. <BR><DIV style="background-color:#E6E6E6;font-family:courier new;font-size:85%;font-weight:bold;">
    86. 

  86. <B><CODE><FONT color="#000000"><FONT color="#0000CC"> $graph</FONT><FONT color="#006600">
    87. 

  87. -&gt;</FONT><FONT color="#0000CC">yaxis</FONT><FONT color="#006600">-&gt;</FONT><FONT
    88. 

  88. color="#0000CC">SetTitleMargin</FONT><FONT color="#006600">(</FONT><FONT color="#0000CC">
    89. 

  89. 40</FONT><FONT color="#006600">);</FONT><FONT color="#0000CC"></FONT></FONT>
    90. 

  90. </CODE></B></DIV></P>
    91. 

  91. <P></P>
    92. 

  92. <P> to your code.</P>
    93. 

  93. <P> Finally we mention something about the positioning of tick marks and
    94. 

  94.  labels on the axis. You have the possibility to choose what side of the
    95. 

  95.  axis the tick marks and the labels should be at. For the X-axis this
    96. 

  96.  can be specified as either on the the top (inside the plotarera) or at
    97. 

  97.  bottom (outside of the plotarea). In the same way you can specify for
    98. 

  98.  the Y-axis if the labels ( or ticks) should be on the left or right
    99. 

  99.  side.</P>
    100. 

  100. <P> To adjust the label positioning you have to use the method<A href="../ref/Axis.html#_AXIS_SETTITLESIDE">
    101. 

  101.  Axis::SetTitleSide()</A> and to adjust the position of the tick mark
    102. 

  102.  you have to use the method<A href="../ref/Axis.html#_AXIS_SETTICKSIDE">
    103. 

  103.  SetTickSide()</A></P>
    104. 

  104. <HR> <SMALL> Note: There is also an alias for this method,
    105. 

  105.  SetTickDirection() which is deprecated from version 1.7 but kept for
    106. 

  106.  backwards compatibility.</SMALL>
    107. 

  107. <HR> Valid arguments for these methods are
    108. 

  108. <UL>
    109. 

  109. <LI> SIDE_UP</LI>
    110. 

  110. <LI> SIDE_DOWN</LI>
    111. 

  111. <LI> SIDE_LEFT</LI>
    112. 

  112. <LI> SIDE_RIGHT</LI>
    113. 

  113. </UL>
    114. 

  114.  For example, the following lines added to a script would change side of
    115. 

  115.  the labels and tickmarks for the X-axis.
    116. 

  116. <P>
    117. 

  117. <BR> &nbsp;
    118. 

  118. <BR><DIV style="background-color:#E6E6E6;font-family:courier new;font-size:85%;font-weight:bold;">
    119. 

  119. <B><CODE><FONT color="#000000"><FONT color="#0000CC"> $graph</FONT><FONT color="#006600">
    120. 

  120. -&gt;</FONT><FONT color="#0000CC">xaxis</FONT><FONT color="#006600">-&gt;</FONT><FONT
    121. 

  121. color="#0000CC">SetLabelPos</FONT><FONT color="#006600">(</FONT><FONT color="#0000CC">
    122. 

  122. SIDE_UP</FONT><FONT color="#006600">);
    123. 

  123. <BR /></FONT><FONT color="#0000CC">$graph</FONT><FONT color="#006600">-&gt;</FONT><FONT
    124. 

  124. color="#0000CC">xaxis</FONT><FONT color="#006600">-&gt;</FONT><FONT color="#0000CC">
    125. 

  125. SetTickSide</FONT><FONT color="#006600">(</FONT><FONT color="#0000CC">
    126. 

  126. SIDE_DOWN</FONT><FONT color="#006600">);</FONT><FONT color="#0000CC"></FONT>
    127. 

  127. </FONT></CODE></B></DIV></P>
    128. 

  128. <P></P>
    129. 

  129. <P> This technique is for example used if you position the X-axis at the
    130. 

  130.  top of the graph as the following example shows.</P>
    131. 

  131. <P><DIV align="center">
    132. 

  132. <BR><A href="exframes/frame_topxaxisex1.html"> <IMG border="0" HEIGHT="200"
    133. 

  133.  src="img/topxaxisex1.png" WIDTH="400"></A>
    134. 

  134. <BR><SMALL><EM><B>Figure 1:</B> Example of both how to adjust the
    135. 

  135.  position of the X-axis as well as adjusting the side for the tick and
    136. 

  136.  axis title<A href="exframes/frame_topxaxisex1.html"> [src]</A></EM></SMALL>
    137. 

  137. </DIV></P>
    138. 

  138. <P></P>
    139. 

  139. <H3><A NAME="6_14_2">6.14.2 Scientific style axis</A></H3>
    140. 

  140.  In scientific style plots it is often common to duplicate each axis so
    141. 

  141.  that all sides of the graph have a labeled axis. This is of course also
    142. 

  142.  fully supported by JpGraph.
    143. 

  143. <P> Before we continue we show a small example to illustrate this
    144. 

  144.  feature</P>
    145. 

  145. <P></P>
    146. 

  146. <P><DIV align="center">
    147. 

  147. <BR><A href="exframes/frame_funcex1.html"> <IMG border="0" HEIGHT="350"  src="img/funcex1.png"
    148. 

  148. WIDTH="450"></A>
    149. 

  149. <BR><SMALL><EM><B>Figure 2:</B> Example of scientific axis<A href="exframes/frame_funcex1.html">
    150. 

  150.  [src]</A></EM></SMALL></DIV></P>
    151. 

  151. <P></P>
    152. 

  152. <P> The example above shows the basic configuration. There are now
    153. 

  153.  several modifications you may do to these axis like</P>
    154. 

  154. <UL>
    155. 

  155. <LI> Choose if the labels should be inside ot outside the plotarea</LI>
    156. 

  156. <LI> Choose if the tickmarks should be inside or outside the plotarea</LI>
    157. 

  157. </UL>
    158. 

  158.  The style of axis is determined by the method<A href="../ref/Graph.html#_GRAPH_SETAXISSTYLE">
    159. 

  159.  Graph::SetAxisStyle()</A> The available type of axis are
    160. 

  160. <UL>
    161. 

  161. <LI> AXSTYLE_SIMPLE, The standard two axis graph</LI>
    162. 

  162. <LI> AXSTYLE_BOXIN, Four axis scientific style with labels and tickmarks
    163. 

  163.  on the inside</LI>
    164. 

  164. <LI> AXSTYLE_BOXOUT, Four axis scientific style with labels and
    165. 

  165.  tickmarks on the outside</LI>
    166. 

  166. </UL>
    167. 

  167. <H3><A NAME="6_14_3">6.14.3  Adjusting the position of the scale labels</A>
    168. 

  168. </H3>
    169. 

  169.  How to adjust the actual labels are discussed elsewhere in this manual
    170. 

  170.  (see ???,???). Howver we like to mention here that you can adjust the
    171. 

  171.  label margin (distance betweeen the axis and the labels) with the
    172. 

  172.  method<A href="../ref/Axis.html#_AXIS_SETLABELMARGIN">
    173. 

  173.  Axis::SetLabelMargin()</A>
    174. 

  174. <P> to adjust the actual label format (like font, color, angle) you need
    175. 

  175.  to access the<A href="../ref/Axis.html#_AXIS_SETFONT"> Axis::SetFont()</A>
    176. 

  176.  and the<A href="../ref/Axis.html#_AXIS_SETCOLOR"> Axis::SetColor()</A>
    177. 

  177.  methods. If you investigate the<A href="../ref/Axis.html#_C_AXIS"> Axis</A>
    178. 

  178.  class you will discover more methods to adjust the many aspects of the
    179. 

  179.  axis layout.</P>
    180. 

  180. <P> As a final note we also mention the methods<A href="../ref/Axis.html#_AXIS_SETLABELALIGN">
    181. 

  181.  Axis::SetLabelAlign()</A> and<A href="../ref/Axis.html#_AXIS_SETLABELANGLE">
    182. 

  182.  Axis::SetLabelAngle()</A> This first method is really only mentioned
    183. 

  183.  here for completenesss since it is mostly used for internal purposes.
    184. 

  184.  However on som occasion you might want to adjust the alignment of the
    185. 

  185.  labels. By default they are centered in respect to the tickmark. By
    186. 

  186.  using the method you might override this positioning should you choose
    187. 

  187.  to do so.</P>
    188. 

  188. <P> The second of these methods adjusts the angle of the label in
    189. 

  189.  regards to the axis. This is very usefull for X-axis that have long
    190. 

  190.  labels.</P>
    191. 

  191. <H3><A NAME="6_14_4">6.14.4 Formatting the scale labels</A></H3>
    192. 

  192.  [TODO]<A gref=""> Graph::SetLabelFormatCallback();</A><A gref="">
    193. 

  193.  Graph::SetLabelFormat();</A>
    194. 

  194. <H3><A NAME="6_14_5">6.14.5 Inverting the Y-axis</A></H3>
    195. 

  195.  One good way of illutrsate the usefullness of label callbacks in a
    196. 

  196.  slightly different context is to show how we can achieve the effect of
    197. 

  197.  an inverted Y-scale.
    198. 

  198. <P> An inverted Y-scale has the lowest number at the top and the scale
    199. 

  199.  values increases downwards.</P>
    200. 

  200. <P> Even though JpGraph doesn't directly support this feature it is
    201. 

  201.  wuite easy to achieve with just a few extra lines of code in your image
    202. 

  202.  script.</P>
    203. 

  203. <P> Before we continue we give an example of what we are referring to.</P>
    204. 

  204. <P></P>
    205. 

  205. <P><DIV align="center">
    206. 

  206. <BR><A href="exframes/frame_inyaxisex2.html"> <IMG border="0" HEIGHT="300"
    207. 

  207.  src="img/inyaxisex2.png" WIDTH="400"></A>
    208. 

  208. <BR><SMALL><EM><B>Figure 3:</B> Inverted Y-axis<A href="exframes/frame_inyaxisex2.html">
    209. 

  209.  [src]</A></EM></SMALL></DIV></P>
    210. 

  210. <P></P>
    211. 

  211. <P> Two achieve this effect there are two simple steps to take:</P>
    212. 

  212. <OL>
    213. 

  213. <LI> Negate all you Y-value in the data</LI>
    214. 

  214. <LI> Create a callback that negates the scale labels so they appear to
    215. 

  215.  be positive.</LI>
    216. 

  216. </OL>
    217. 

  217.  And that's it! We refeer you to the code in the example above for the
    218. 

  218.  details.
    219. 

  219. <H2><A NAME="6_15">6.15 Adjusting the autoscaling limits - grace value</A>
    220. 

  220. </H2>
    221. 

  221.  By default the autoscaling algorithm tries to make best possible use of
    222. 

  222.  screen estate by making the scale as large as possible, i.e. the
    223. 

  223.  extreme values (min/max) will be on the top and bottom of the scale if
    224. 

  224.  they happen to fall on a scale-tick. So for example doing a simple line
    225. 

  225.  plot could look like the plot shown in the below.
    226. 

  226. <P><DIV align="center">
    227. 

  227. <BR><A href="exframes/frame_example3.2.html"> <IMG border="0" HEIGHT="200"
    228. 

  228.  src="img/example3.2.png" WIDTH="300"></A>
    229. 

  229. <BR><SMALL><EM><B>Figure 4:</B> A typical graph with autoscaling and
    230. 

  230.  grace=0<A href="exframes/frame_example3.2.html"> [src]</A></EM></SMALL></DIV>
    231. 

  231. </P>
    232. 

  232. <P> However you might sometime want to add some extra to the minimum and
    233. 

  233.  maximum values so that there is some &quot;air&quot; in the graph between the end
    234. 

  234.  of the scale values and the extreme points in the graphs. This can be
    235. 

  235.  done by adding a &quot;grace&quot; percentage to the scale. So for example adding
    236. 

  236.  10% to the y-scale in the image above is done by calling the<A href="../ref/LinearScale.html#_LINEARSCALE_SETGRACE">
    237. 

  237.  SetGrace()</A> method on the yscale as in</P>
    238. 

  238. <P>
    239. 

  239. <BR> &nbsp;
    240. 

  240. <BR><DIV style="background-color:#E6E6E6;font-family:courier new;font-size:85%;font-weight:bold;">
    241. 

  241. <B><CODE><FONT color="#000000"><FONT color="#0000CC"> $graph</FONT><FONT color="#006600">
    242. 

  242. -&gt;</FONT><FONT color="#0000CC">yaxis</FONT><FONT color="#006600">-&gt;</FONT><FONT
    243. 

  243. color="#0000CC">scale</FONT><FONT color="#006600">-&gt;</FONT><FONT color="#0000CC">
    244. 

  244. SetGrace</FONT><FONT color="#006600">(</FONT><FONT color="#0000CC">10</FONT><FONT
    245. 

  245. color="#006600">,</FONT><FONT color="#0000CC">10</FONT><FONT color="#006600">
    246. 

  246. );</FONT><FONT color="#0000CC"></FONT></FONT></CODE></B></DIV></P>
    247. 

  247. <P> These lines add a minimum of 10% to the top and bottom values of the
    248. 

  248.  scale. Note that we say &quot;minimum&quot; since depending on the specific tick
    249. 

  249.  values choose this might be a little bit more to make the end of the
    250. 

  250.  scale fall on an even tick mark.</P>
    251. 

  251. <P> Adding this line to the previous graph will result in the following
    252. 

  252.  example</P>
    253. 

  253. <P></P>
    254. 

  254. <P><DIV align="center">
    255. 

  255. <BR><A href="exframes/frame_example3.2.1.html"> <IMG border="0" HEIGHT="200"
    256. 

  256.  src="img/example3.2.1.png" WIDTH="300"></A>
    257. 

  257. <BR><SMALL><EM><B>Figure 5:</B> Adding 10% grace value to top and bottom
    258. 

  258.  of the Y-scale<A href="exframes/frame_example3.2.1.html"> [src]</A></EM>
    259. 

  259. </SMALL></DIV></P>
    260. 

  260. <P> Since we haven't adjusted the positoin of the X-axis it will remain
    261. 

  261.  at Y=0 which might not necessary be waht we would like so we therefor
    262. 

  262.  also add the line</P>
    263. 

  263. <P>
    264. 

  264. <BR> &nbsp;
    265. 

  265. <BR><DIV style="background-color:#E6E6E6;font-family:courier new;font-size:85%;font-weight:bold;">
    266. 

  266. <B><CODE><FONT color="#000000"><FONT color="#0000CC"> $graph</FONT><FONT color="#006600">
    267. 

  267. -&gt;</FONT><FONT color="#0000CC">xaxis</FONT><FONT color="#006600">-&gt;</FONT><FONT
    268. 

  268. color="#0000CC">SetPos</FONT><FONT color="#006600">(</FONT><FONT color="#CC0000">
    269. 

  269. &quot;min&quot;</FONT><FONT color="#006600">);</FONT><FONT color="#0000CC"></FONT></FONT>
    270. 

  270. </CODE></B></DIV></P>
    271. 

  271. <P></P>
    272. 

  272. <P> So that the X-axis always will remain at the lowest possible
    273. 

  273.  Y-value. Doing this will then result in the example below</P>
    274. 

  274. <P></P>
    275. 

  275. <P><DIV align="center">
    276. 

  276. <BR><A href="exframes/frame_example3.2.2.html"> <IMG border="0" HEIGHT="200"
    277. 

  277.  src="img/example3.2.2.png" WIDTH="300"></A>
    278. 

  278. <BR><SMALL><EM><B>Figure 6:</B> Using grace but also adjusting the
    279. 

  279.  position of the X-axis<A href="exframes/frame_example3.2.2.html"> [src]</A>
    280. 

  280. </EM></SMALL></DIV></P>
    281. 

  281. <P></P>
    282. 

  282. <HR>
    283. 

  283. <IMG  src="img/JpGraph_Logo.png">
    284. 

  284. <A HREF="index.html">Contents</A>
    285. 

  285. <A HREF="3080graphaug.html">Previous</A>
    286. 

  286. <A HREF="3095bands.html">Next</A>
    287. 

  287. </BODY>
    288. 

  288. </HTML>
    289. 

  289.