graphs.xml
<?xml version="1.0"?> <!-- $Id: graphs.xml.txt,v 1.1.1.1 2007-06-05 15:52:38 mike Exp $ This document shows a number of different styles and types of graph. The data for the graphs is inline in this example, but a look at the source should reveal how easy it is to create inline graphs from a JDBC query (for example). Note also the reasonably heavy use of stylesheets. We've found that due to the large number of attributes that can be set on each graph, creating a standard "style" and referencing it using the class or id attribute on the graph makes for much clearer documents. --> <pdf> <head> <style type="text/css"> /**** Set some styles for the main elements in the document ****/ h2 { font-size:1.2em; } h3 { font-size:1em; } .graphtable td { margin:8; border:1; } .caption { font-size:8pt; align:justify; } /**** Now set various different styles for classes of graph ****/ .currency { yaxis-formatter:currency(); lang:en_GB; } .plainwall { zwall-border-color:#F0F0F0; } .linedate { xaxis-formatter:date(); xaxis-formatter-density:sparse; xaxis-align:left; xaxis-valign:top; xaxis-rotate:30; zwall-border-color:#F0F0F0; } .rotateline { xrotation:30; yrotation:30; zwall-border-color:#F0F0F0; } .walled { ywall-border-color:black; zwall-color:#F0F0F0; zwall-border-color:black; floor-color:#F0F0F0; floor-border-color:black; bar-width:80%; bar-depth:80%; } .rotateaxes { xaxis-align:left; xaxis-valign:middle; xaxis-rotate:45; } /**** Set some defaults for all the graphs *****/ piegraph { xrotation:30; yrotation:30; } bargraph, depthbargraph, towerbargraph, multibargraph, floatingbargraph { xrotation:30; yrotation:30; xaxis-align:right; xaxis-valign:top; } /**** Set some default colors - all shades of gray, good for printing ****/ bargraph, depthbargraph, towerbargraph, linegraph, piegraph, areagraph, multibargraph, floatingbargraph { default-colors:'#A0A0A0, #D0D0D0, pattern(spots,#A0A0A0,#808080,2), pattern(stripes,#A0A0A0,#D0D0D0,1.5,2,45), #808080' } /**** If you prefer a little more color, try uncommenting the following block. Guaranteed to put your PDF reader through its paces! .graphtable td { background-image:url(resources/logobig.jpg) } bargraph, depthbargraph, towerbargraph, linegraph, piegraph, areagraph, multibargraph, floatingbargraph { default-colors:'pattern(stripes,#FFA0A0,#A0A0FF,3,3,45), pattern(stars,#FFA0A0,#A0A0FF,10), pattern(polka, #FFA0A0,#A0A0FF,5), pattern(grid,#FFA0A0,#A0A0FF,2,10),pattern(stars,#A0A0FF,#FFA0A0,10)'; } *****/ </style> </head> <body padding="0.4in" requote="true"> <h1>Graph demonstrations</h1> <p> This document demonstrates a number of different styles of graphs. It's not meant to be a complete demonstration of the graph capabilities - the <a href="http://big.faceless.org/products/graph/docs/">graph library userguide</a> does that - but this is a good document to experiment with to try various combinations for plotting graphs. </p> <table width="100%" class="graphtable" margin-top="10"> <tr> <td align="center" width="50%"> <h2>A Simple BarGraph</h2> <bargraph width="100%" height="200"> <gdata name="apples" value="30"/> <gdata name="oranges" value="40"/> <gdata name="bananas" value="20"/> <gdata name="apricots" value="25"/> <gdata name="watermelon" value="28"/> </bargraph> <p class="caption"> This bargraph has the <tt>xrotation</tt> and <tt>yrotation</tt> specified, and the alignment of the xaxis set to right & top. This means each item on the X-axis is positioned at its top right corner. </p> </td> <td align="center" width="50%"> <h2>A Currency BarGraph</h2> <h3>Same data as the last but plotting currencies</h3> <bargraph width="100%" height="200" class="currency"> <gdata name="apples" value="30"/> <gdata name="oranges" value="40"/> <gdata name="bananas" value="20"/> <gdata name="apricots" value="25"/> <gdata name="watermelon" value="28"/> </bargraph> <p class="caption"> This bargraph has the <tt>yaxis-formatter</tt> set to <tt>currency()</tt> and the language set to <tt>en_GB</tt> </p> </td> </tr> <tr> <td align="center" width="50%"> <h2>A Walled BarGraph</h2> <h3>Identical to the one above but with walls</h3> <bargraph width="100%" height="200" class="walled" display-barvalues="top"> <gdata name="apples" value="30"/> <gdata name="oranges" value="40"/> <gdata name="bananas" value="20"/> <gdata name="apricots" value="25"/> <gdata name="watermelon" value="28"/> </bargraph> <p class="caption"> This bargraph has various <tt>floor</tt>, <tt>ywall</tt> and <tt>zwall</tt> attributes set to place "walls" behind the graphs. It also has the <tt>bar-width</tt> and <tt>bar-depth</tt> attributes set to 80%, and the "display-barvalues" attribute set to "top". </p> </td> <td align="center" width="50%"> <h2>A Change of Axes</h2> <h3>Identical to the first but for the X axis</h3> <bargraph width="100%" height="200" class="rotateaxes"> <gdata name="apples" value="30"/> <gdata name="oranges" value="40"/> <gdata name="bananas" value="20"/> <gdata name="apricots" value="25"/> <gdata name="watermelon" value="28"/> </bargraph> <p class="caption"> This last one is the same as the first, but has <tt>xaxis-align</tt> set to <tt>left</tt>, <tt>xaxis-valign</tt> set to <tt>middle</tt> and <tt>xaxis-rotate</tt> set to 45. </p> </td> </tr> <tr> <td align="center" width="50%"> <h2>A Depth BarGraph</h2> <h3>The same settings as "Walled Graph" above</h3> <depthbargraph width="100%" height="200" class="walled"> <gdata name="apples" name2="1999" value="20"/> <gdata name="apples" name2="2000" value="25"/> <gdata name="apples" name2="2001" value="30"/> <gdata name="oranges" name2="1999" value="18"/> <gdata name="oranges" name2="2000" value="20"/> <gdata name="oranges" name2="2001" value="17"/> <gdata name="bananas" name2="1999" value="12"/> <gdata name="bananas" name2="2000" value="14"/> <gdata name="bananas" name2="2001" value="17"/> <gdata name="apricots" name2="1999" value="12"/> <gdata name="apricots" name2="2000" value="10"/> <gdata name="apricots" name2="2001" value="7"/> <gdata name="watermelon" name2="1999" value="13"/> <gdata name="watermelon" name2="2000" value="15"/> <gdata name="watermelon" name2="2001" value="13"/> </depthbargraph> <p class="caption"> This example of a <tt>DepthBarGraph</tt> shows data on two different axis, and requires both the "name" and "name2" attributes to be set on each <tt>gdata</tt> tag. The order the values are plotted in depends on the order they're listed in the XML. </p> </td> <td align="center" width="50%"> <h2>A Tower BarGraph</h2> <h3>Identical data but in Towers</h3> <towerbargraph width="100%" height="200" class="walled"> <gdata name="apples" name2="1999" value="20"/> <gdata name="apples" name2="2000" value="25"/> <gdata name="apples" name2="2001" value="30"/> <gdata name="oranges" name2="1999" value="18"/> <gdata name="oranges" name2="2000" value="20"/> <gdata name="oranges" name2="2001" value="17"/> <gdata name="bananas" name2="1999" value="12"/> <gdata name="bananas" name2="2000" value="14"/> <gdata name="bananas" name2="2001" value="17"/> <gdata name="apricots" name2="1999" value="12"/> <gdata name="apricots" name2="2000" value="10"/> <gdata name="apricots" name2="2001" value="7"/> <gdata name="watermelon" name2="1999" value="13"/> <gdata name="watermelon" name2="2000" value="15"/> <gdata name="watermelon" name2="2001" value="13"/> </towerbargraph> <p class="caption"> This graph is identical to the last one in every respect, except it's a <tt>towerbargraph</tt> instead of a <tt>depthbargraph</tt>. This style of graph is useful for showing cumulative data. </p> </td> </tr> <tr> <td align="center" width="50%"> <h2>A Multi BarGraph </h2> <h3>But otherwise the same as above</h3> <multibargraph width="100%" height="200" class="walled"> <gdata name="apples" name2="1999" value="20"/> <gdata name="apples" name2="2000" value="25"/> <gdata name="apples" name2="2001" value="30"/> <gdata name="oranges" name2="1999" value="18"/> <gdata name="oranges" name2="2000" value="20"/> <gdata name="oranges" name2="2001" value="17"/> <gdata name="bananas" name2="1999" value="12"/> <gdata name="bananas" name2="2000" value="14"/> <gdata name="bananas" name2="2001" value="17"/> <gdata name="apricots" name2="1999" value="12"/> <gdata name="apricots" name2="2000" value="10"/> <gdata name="apricots" name2="2001" value="7"/> <gdata name="watermelon" name2="1999" value="13"/> <gdata name="watermelon" name2="2000" value="15"/> <gdata name="watermelon" name2="2001" value="13"/> </multibargraph> <p class="caption"> This is identical to the graph above, except it's a <tt>multibargraph</tt> instead of a <tt>depthbargraph</tt>. A useful alternative in 2D. </p> </td> <td align="center" width="50%"> <h2>A Tower BarGraph again</h2> <h3>With the key on the right this time</h3> <towerbargraph width="100%" height="200" class="walled" display-key="right" zwall-grid="vertical"> <gdata name="apples" name2="1999" value="20"/> <gdata name="apples" name2="2000" value="25"/> <gdata name="apples" name2="2001" value="30"/> <gdata name="oranges" name2="1999" value="18"/> <gdata name="oranges" name2="2000" value="20"/> <gdata name="oranges" name2="2001" value="17"/> <gdata name="bananas" name2="1999" value="12"/> <gdata name="bananas" name2="2000" value="14"/> <gdata name="bananas" name2="2001" value="17"/> <gdata name="apricots" name2="1999" value="12"/> <gdata name="apricots" name2="2000" value="10"/> <gdata name="apricots" name2="2001" value="7"/> <gdata name="watermelon" name2="1999" value="13"/> <gdata name="watermelon" name2="2000" value="15"/> <gdata name="watermelon" name2="2001" value="13"/> </towerbargraph> <p class="caption"> Again, identical to above but with <tt>display-key</tt> set to "right" and <tt>zwall-grid</tt> set to "vertical" </p> </td> </tr> <tr> <td align="center" width="50%"> <h2>A Line Graph</h2> <h3>Plotting two <tt>datacurve</tt> elements</h3> <linegraph width="100%" height="200" line-thickness="2" class="plainwall" display-key="bottom-with-markers"> <datacurve name="Our Results" marker="circle"> <sample x="1" y="5"/> <sample x="2" y="7"/> <sample x="3" y="8"/> <sample x="5" y="7"/> <sample x="6" y="10"/> <sample x="7" y="8"/> <sample x="9" y="4"/> </datacurve> <datacurve name="Their Results"> <sample x="1" y="3"/> <sample x="2" y="4"/> <sample x="3" y="6"/> <sample x="4" y="5"/> <sample x="6" y="7"/> <sample x="8" y="5"/> <sample x="9" y="6"/> </datacurve> </linegraph> <p class="caption"> A basic linegraph with two <tt>datacurve</tt> elements. We've set the <tt>line-thickness</tt> attribute to 2 - it's only used when the graph isn't rotated, but can help to make the relatively thin lines stand out. </p> </td> <td align="center" width="50%"> <h2>An Area Graph</h2> <h3>Same data, different presentation</h3> <areagraph width="100%" height="200" class="plainwall"> <datacurve name="Our Results"> <sample x="1" y="5"/> <sample x="2" y="7"/> <sample x="3" y="8"/> <sample x="5" y="7"/> <sample x="6" y="10"/> <sample x="7" y="8"/> <sample x="9" y="4"/> </datacurve> <datacurve name="Their Results"> <sample x="1" y="3"/> <sample x="2" y="4"/> <sample x="3" y="6"/> <sample x="4" y="5"/> <sample x="6" y="7"/> <sample x="8" y="5"/> <sample x="9" y="6"/> </datacurve> </areagraph> <p class="caption"> A basic areagraph, using the same data as the previous graph. Note how the values are automatically accumulated. </p> </td> </tr> <tr> <td align="center" width="50%"> <h2>A Stretched Line Graph</h2> <h3>Same as above but stretched to zero</h3> <linegraph width="100%" height="200" line-thickness="2" class="plainwall" x-stretch-to-zero="true" y-stretch-to-zero="true"> <datacurve name="Our Results"> <sample x="1" y="5"/> <sample x="2" y="7"/> <sample x="3" y="8"/> <sample x="5" y="7"/> <sample x="6" y="10"/> <sample x="7" y="8"/> <sample x="9" y="4"/> </datacurve> <datacurve name="Their Results"> <sample x="1" y="3"/> <sample x="2" y="4"/> <sample x="3" y="6"/> <sample x="4" y="5"/> <sample x="6" y="7"/> <sample x="8" y="5"/> <sample x="9" y="6"/> </datacurve> </linegraph> <p class="caption"> Identical to the above graph, but with <tt>x-stretch-to-zero</tt> and <tt>y-stretch-to-zero</tt> both set to true. This means the graph axes will always extend to zero on the specified axes. </p> </td> <td align="center" width="50%"> <h2>Plotting Dates</h2> <h3>Using date values and a formatter</h3> <linegraph width="100%" height="200" line-thickness="2" class="linedate"> <datacurve name="Our Results"> <sample x="2001-10-01" y="5"/> <sample x="2001-10-03" y="7"/> <sample x="2001-10-05" y="8"/> <sample x="2001-10-09" y="7"/> <sample x="2001-10-14" y="10"/> <sample x="2001-10-17" y="8"/> <sample x="2001-10-23" y="4"/> </datacurve> <datacurve name="Their Results"> <sample x="2001-10-04" y="3"/> <sample x="2001-10-07" y="4"/> <sample x="2001-10-12" y="6"/> <sample x="2001-10-15" y="5"/> <sample x="2001-10-18" y="7"/> <sample x="2001-10-20" y="5"/> <sample x="2001-10-24" y="6"/> </datacurve> </linegraph> <p class="caption"> Here we plot some date values - they're no different to numeric values, we just set the <tt>x</tt> attribute in the <tt>sample</tt> tag to a date instead of a number, and set the <tt>xaxis-formatter</tt> to <tt>date()</tt>. </p> </td> </tr> <tr> <td align="center" width="50%"> <h2>A Line Graph in 3D</h2> <h3>Plotting two <tt>datacurve</tt> elements</h3> <linegraph width="100%" height="200" line-thickness="2" class="rotateline"> <datacurve name="Our Results"> <sample x="1" y="5"/> <sample x="2" y="7"/> <sample x="3" y="8"/> <sample x="5" y="7"/> <sample x="6" y="10"/> <sample x="7" y="8"/> <sample x="9" y="4"/> </datacurve> <datacurve name="Their Results"> <sample x="1" y="3"/> <sample x="2" y="4"/> <sample x="3" y="6"/> <sample x="4" y="5"/> <sample x="6" y="7"/> <sample x="8" y="5"/> <sample x="9" y="6"/> </datacurve> </linegraph> <p class="caption"> Identical to the first line graph, but with a 3D rotation. </p> </td> <td align="center" width="50%"> <h2>An Area Graph in 3D</h2> <h3>Same data, different presentation</h3> <areagraph width="100%" height="200" class="rotateline"> <datacurve name="Our Results"> <sample x="1" y="5"/> <sample x="2" y="7"/> <sample x="3" y="8"/> <sample x="5" y="7"/> <sample x="6" y="10"/> <sample x="7" y="8"/> <sample x="9" y="4"/> </datacurve> <datacurve name="Their Results"> <sample x="1" y="3"/> <sample x="2" y="4"/> <sample x="3" y="6"/> <sample x="4" y="5"/> <sample x="6" y="7"/> <sample x="8" y="5"/> <sample x="9" y="6"/> </datacurve> </areagraph> <p class="caption"> Identical to the first area graph, but with a 3D rotation. </p> </td> </tr> <tr> <td align="center" width="50%"> <h2>Plotting functions</h2> <h3>Using a <tt>simplecurve</tt> to plot a function</h3> <linegraph width="100%" height="200" line-thickness="2" class="rotateline" min-x="-3.2" max-x="3.2"> <simplecurve method="java.lang.Math.sin" name="Sine"/> <simplecurve method="java.lang.Math.cos" name="CoSine"/> </linegraph> <p class="caption"> Instead of plotting data, we're now plotting functions. The <tt>simplecurve</tt> element allows any java function to be plotted. </p> </td> <td align="center" width="50%"> <h2>An Area Graph sans segments</h2> <h3>Same as above but with no segments</h3> <areagraph width="100%" height="200" class="rotateline" draw-segments="false"> <datacurve name="Our Results"> <sample x="1" y="5"/> <sample x="2" y="7"/> <sample x="3" y="8"/> <sample x="5" y="7"/> <sample x="6" y="10"/> <sample x="7" y="8"/> <sample x="9" y="4"/> </datacurve> <datacurve name="Their Results"> <sample x="1" y="3"/> <sample x="2" y="4"/> <sample x="3" y="6"/> <sample x="4" y="5"/> <sample x="6" y="7"/> <sample x="8" y="5"/> <sample x="9" y="6"/> </datacurve> </areagraph> <p class="caption"> The same as the above area graph, but with the <tt>draw-segments</tt> attribute set to false, for a different effect. </p> </td> </tr> <tr> <td align="center" width="50%"> <h2>A Simple PieGraph</h2> <piegraph width="100%" height="200"> <gdata name="apples" value="30"/> <gdata name="oranges" value="40"/> <gdata name="bananas" value="20"/> <gdata name="apricots" value="25"/> <gdata name="watermelon" value="28"/> </piegraph> <p class="caption"> This basic pigraph uses exactly the same data as the first graph in this document. Like that, the <tt>xrotation</tt> and <tt>yrotation</tt> are both set to 30 degrees, and the <tt>display-key</tt> left at the default value of "bottom". </p> </td> <td align="center" width="50%"> <h2>Another Simple PieGraph</h2> <h3>Using the <tt>rotated-inner-flat-outer</tt> key</h3> <piegraph width="100%" height="200" display-key="rotated-inner-flat-outer"> <gdata name="apples" value="30"/> <gdata name="oranges" value="40"/> <gdata name="bananas" value="20" extend="20%"/> <gdata name="apricots" value="25"/> <gdata name="watermelon" value="28"/> </piegraph> <p class="caption"> This same as the last graph, but with the key set to <tt>rotated-inner-flat-outer</tt>. The "bananas" <tt>gdata</tt> tag also has the <tt>extend</tt> attribute set to 20%. </p> </td> </tr> <tr> <td align="center" width="50%"> <h2>A Twisted PieGraph</h2> <h3>Using the <tt>zrotation</tt> attribute</h3> <piegraph width="100%" height="200" zrotation="40"> <gdata name="apples" value="30"/> <gdata name="oranges" value="40"/> <gdata name="bananas" value="20"/> <gdata name="apricots" value="25"/> <gdata name="watermelon" value="28"/> </piegraph> <p class="caption"> The same as the graph above but with the <tt>zrotation</tt> attribute set to 40. This exposes the left side of the graph. </p> </td> <td align="center" width="50%"> <h2>Another style of key</h2> <h3>Using the <tt>flat-outer</tt> key</h3> <piegraph width="100%" height="200" pie-height="30" display-key="flat-outer" display-percentage="with-key"> <gdata name="apples" value="30"/> <gdata name="oranges" value="40"/> <gdata name="bananas" value="20" extend="20%"/> <gdata name="apricots" value="25"/> <gdata name="watermelon" value="28"/> </piegraph> <p class="caption"> This same as the above graph, but with the key set to <tt>flat-outer</tt>, the <tt>pie-height</tt> increased to 30 and the <tt>display-percentage</tt> attribute set to "with-key" </p> </td> </tr> <tr> <td align="center" width="50%"> <h2>A Floating BarGraph</h2> <h3>For showing min, mean and max values</h3> <floatingbargraph width="100%" height="200" class="walled"> <gdata name="apples" min-value="11" mid-value="17" max-value="24"/> <gdata name="oranges" min-value="7" mid-value="11" max-value="20"/> <gdata name="bananas" min-value="12" mid-value="14" max-value="19"/> <gdata name="apricots" min-value="14" mid-value="17" max-value="28"/> <gdata name="watermelon" min-value="9" mid-value="16" max-value="17"/> </floatingbargraph> <p class="caption"> This example shows a <tt>FloatingBarGraph</tt>, which is new in the Report Generator as of version 1.0.10. Each bar has three values - a min, center and max value. </p> </td> <td align="center" width="50%"> <h2>A Round BarGraph</h2> <h3>Slower to draw but with nicer results</h3> <floatingbargraph width="100%" height="200" class="walled" round-bars="true"> <gdata name="apples" min-value="11" mid-value="17" max-value="24"/> <gdata name="oranges" min-value="7" mid-value="11" max-value="20"/> <gdata name="bananas" min-value="12" mid-value="14" max-value="19"/> <gdata name="apricots" min-value="14" mid-value="17" max-value="28"/> <gdata name="watermelon" min-value="9" mid-value="16" max-value="17"/> </floatingbargraph> <p class="caption"> Identical to the graph on the left, but with the <code>round-bars="true"</code> attribute. This can be applied to any type of bargraph except a multi-bargraph. It does take a little longer to generate and to draw however. </p> </td> </tr> </table> </body> </pdf>