LDP
/
old-www
1
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity
old-www/LDP/LG/issue83/padala.html

370 lines
30 KiB
HTML
Raw Permalink Blame History

<!--startcut ==============================================-->
<!-- *** BEGIN HTML header *** -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML><HEAD>
<title>Exploring Perl Modules - Part2: Creating Charts with GD::Graph LG #83</title>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#0000AF"
ALINK="#FF0000">
<!-- *** END HTML header *** -->
<!-- *** BEGIN navbar *** -->
<IMG ALT="" SRC="../gx/navbar/left.jpg" WIDTH="14" HEIGHT="45" BORDER="0" ALIGN="bottom"><A HREF="okopnik.html"><IMG ALT="[ Prev ]" SRC="../gx/navbar/prev.jpg" WIDTH="16" HEIGHT="45" BORDER="0" ALIGN="bottom"></A><A HREF="index.html"><IMG ALT="[ Table of Contents ]" SRC="../gx/navbar/toc.jpg" WIDTH="220" HEIGHT="45" BORDER="0" ALIGN="bottom" ></A><A HREF="../index.html"><IMG ALT="[ Front Page ]" SRC="../gx/navbar/frontpage.jpg" WIDTH="137" HEIGHT="45" BORDER="0" ALIGN="bottom"></A><A HREF="http://www.linuxgazette.com/cgi-bin/talkback/all.py?site=LG&article=http://www.linuxgazette.com/issue83/padala.html"><IMG ALT="[ Talkback ]" SRC="../gx/navbar/talkback.jpg" WIDTH="121" HEIGHT="45" BORDER="0" ALIGN="bottom" ></A><A HREF="../lg_faq.html"><IMG ALT="[ FAQ ]" SRC="./../gx/navbar/faq.jpg"WIDTH="62" HEIGHT="45" BORDER="0" ALIGN="bottom"></A><A HREF="prasad.html"><IMG ALT="[ Next ]" SRC="../gx/navbar/next.jpg" WIDTH="15" HEIGHT="45" BORDER="0" ALIGN="bottom" ></A><IMG ALT="" SRC="../gx/navbar/right.jpg" WIDTH="15" HEIGHT="45" ALIGN="bottom">
<!-- *** END navbar *** -->
<!--endcut ============================================================-->
<TABLE BORDER><TR><TD WIDTH="200">
<A HREF="http://www.linuxgazette.com/">
<IMG ALT="LINUX GAZETTE" SRC="../gx/2002/lglogo_200x41.png"
WIDTH="200" HEIGHT="41" border="0"></A>
<BR CLEAR="all">
<SMALL>...<I>making Linux just a little more fun!</I></SMALL>
</TD><TD WIDTH="380">
<center>
<BIG><BIG><STRONG><FONT COLOR="maroon">Exploring Perl Modules - Part2: Creating Charts with GD::Graph</FONT></STRONG></BIG></BIG><BR>
<STRONG>By <A HREF="../authors/padala.html">Pradeep Padala</A></STRONG></BIG>
</TD></TR>
</TABLE>
<P>
<!-- END header -->
<h3>Introduction</h3>
<p>
If you have read my
<A HREF="../issue81/padala.html">previous article on GD</A>, you might have
noticed that creating charts with the GD module is cumbersome. (That article
also contains some general information about loading Perl modules.) Martien
Verbruggen has created the GD::Graph module that allows easy creation of
charts. This module has useful functions to create various types of charts such
as bar charts, pie charts, line charts etc... The module is very useful in
creating dynamic charts depicting network statistics, web page access
statistics etc...
<p>
In this article, I will describe a general way of using the module
and also show a few examples of creating various charts.
<h3>Typical Way of Using the GD::Graph Module</h3>
<p>
A perl script using GD::Graph to create charts typically contains
the following things:
<ul>
<li> Prepare your data as an array of arrays. (More about this later)
<li> Decide on the type of chart. You would use a call like
<pre>
$mygraph = GD::Graph::<b>chart</b>-&gt;new($width, $height);
</pre>
where chart can be <i>bars</i>, <i>lines</i>, <i>points</i>, <i>linespoints</i>,
<i>mixed</i> or <i>pie</i>. For example, if you wanted a bar chart, you
would use
<pre>
$mygraph = GD::Graph::bars-&gt;new($width, $height);
</pre>
<li> Set options for the graph as needed. This involves setting 'title',
'x-label' etc... You can also set chart-type specific options.
<li>Plot the graph using the plot function
<pre>
$myimage = $mygraph-&gt;plot(\@data);
</pre>
<li> Finally, you can save the image to a file or output for web. This is
similar to the way we have saved images
<a href="../issue81/padala.html">using the GD module</a>.
</ul>
<h3>A Simple Example </h3>
<p>
Let's draw a simple chart following above steps. This script uses CGI to output
the image on to a web page.
<BR><A HREF="misc/padala/simple.pl.txt">[Text version of this listing.]</A>
<pre>
<font color="#a020f0">#!/usr/local/bin/perl -w</font>
<font color="#0000ff"># Change above line to point to your perl binary</font>
<font color="#a52a2a"><b>use </b></font>CGI <font color="#ff00ff">'</font><font color="#ff00ff">:standard</font><font color="#ff00ff">'</font>;
<font color="#a52a2a"><b>use </b></font>GD::Graph::bars;
<font color="#a52a2a"><b>use strict</b></font>;
<font color="#0000ff"># Both the arrays should same number of entries.</font>
<font color="#a52a2a"><b>my</b></font> <font color="#008b8b">@data</font> = ([<font color="#ff00ff">&quot;</font><font color="#ff00ff">Jan</font><font color="#ff00ff">&quot;</font>, <font color="#ff00ff">&quot;</font><font color="#ff00ff">Feb</font><font color="#ff00ff">&quot;</font>, <font color="#ff00ff">&quot;</font><font color="#ff00ff">Mar</font><font color="#ff00ff">&quot;</font>, <font color="#ff00ff">&quot;</font><font color="#ff00ff">Apr</font><font color="#ff00ff">&quot;</font>, <font color="#ff00ff">&quot;</font><font color="#ff00ff">May</font><font color="#ff00ff">&quot;</font>, <font color="#ff00ff">&quot;</font><font color="#ff00ff">Jun</font><font color="#ff00ff">&quot;</font>, <font color="#ff00ff">&quot;</font><font color="#ff00ff">Jul</font><font color="#ff00ff">&quot;</font>, <font color="#ff00ff">&quot;</font><font color="#ff00ff">Aug</font><font color="#ff00ff">&quot;</font>,
<font color="#ff00ff">&quot;</font><font color="#ff00ff">Sep</font><font color="#ff00ff">&quot;</font>, <font color="#ff00ff">&quot;</font><font color="#ff00ff">Oct</font><font color="#ff00ff">&quot;</font>, <font color="#ff00ff">&quot;</font><font color="#ff00ff">Nov</font><font color="#ff00ff">&quot;</font>, <font color="#ff00ff">&quot;</font><font color="#ff00ff">Dec</font><font color="#ff00ff">&quot;</font>],
[<font color="#ff00ff">23</font>, <font color="#ff00ff">5</font>, <font color="#ff00ff">2</font>, <font color="#ff00ff">20</font>, <font color="#ff00ff">11</font>, <font color="#ff00ff">33</font>, <font color="#ff00ff">7</font>, <font color="#ff00ff">31</font>, <font color="#ff00ff">77</font>, <font color="#ff00ff">18</font>, <font color="#ff00ff">65</font>, <font color="#ff00ff">52</font>]);
<font color="#a52a2a"><b>my</b></font> <font color="#008b8b">$mygraph</font> = GD::Graph::bars-&gt;<font color="#a52a2a"><b>new</b></font>(<font color="#ff00ff">500</font>, <font color="#ff00ff">300</font>);
<font color="#008b8b">$mygraph</font>-&gt;set(
<font color="#ff00ff">x_label </font>=&gt; <font color="#ff00ff">'</font><font color="#ff00ff">Month</font><font color="#ff00ff">'</font>,
<font color="#ff00ff">y_label </font>=&gt; <font color="#ff00ff">'</font><font color="#ff00ff">Number of Hits</font><font color="#ff00ff">'</font>,
<font color="#ff00ff">title </font>=&gt; <font color="#ff00ff">'</font><font color="#ff00ff">Number of Hits in Each Month in 2002</font><font color="#ff00ff">'</font>,
) <font color="#a52a2a"><b>or</b></font> <font color="#a52a2a"><b>warn</b></font> <font color="#008b8b">$mygraph</font>-&gt;error;
<font color="#a52a2a"><b>my</b></font> <font color="#008b8b">$myimage</font> = <font color="#008b8b">$mygraph</font>-&gt;plot(<font color="#008b8b">\@data</font>) <font color="#a52a2a"><b>or</b></font> <font color="#a52a2a"><b>die</b></font> <font color="#008b8b">$mygraph</font>-&gt;error;
<font color="#a52a2a"><b>print</b></font> <font color="#ff00ff">&quot;</font><font color="#ff00ff">Content-type: image/png</font><font color="#6a5acd">\n\n</font><font color="#ff00ff">&quot;</font>;
<font color="#a52a2a"><b>print</b></font> <font color="#008b8b">$myimage</font>-&gt;png;
</pre>
<p>
The output of the program can be seen <a href=misc/padala/simple_output.png>here</a>
<p>
The above program is pretty much self-explanatory. The <code>@data</code>
variable
is an array of arrays. The first array represents the labels on X-axis and all
the subsequent arrays present different datasets.
<h3>Tweaking the options</h3>
<p>
As you can see, the graph produced by above program is quite bland and simple.
We can tweak various options to produce better looking and customized graphs.
There are a multitude of options to control the various aspects of the graph.
Options are divided into two types: the options common to all types of graphs,
and the options specific to each type of graph.
<p>
Options can be set while creating the graph or with
<pre>
$mygraph-&gt;set(attrib1 =&gt; value1, attrib2 =&gt; value2, ...);
</pre>
<p>
Let us write a script setting legends, a grid and few options.
<BR><A HREF="misc/padala/legend.pl.txt">[Text version of this listing.]</A>
<pre>
<font color="#a020f0">#!/usr/local/bin/perl -w</font>
<font color="#0000ff"># Change above line to point to your perl binary</font>
<font color="#a52a2a"><b>use </b></font>CGI <font color="#ff00ff">'</font><font color="#ff00ff">:standard</font><font color="#ff00ff">'</font>;
<font color="#a52a2a"><b>use </b></font>GD::Graph::bars;
<font color="#a52a2a"><b>use strict</b></font>;
<font color="#0000ff"># Both the arrays should same number of entries.</font>
<font color="#a52a2a"><b>my</b></font> <font color="#008b8b">@data</font> = ([<font color="#ff00ff">'</font><font color="#ff00ff">Fall 01</font><font color="#ff00ff">'</font>, <font color="#ff00ff">'</font><font color="#ff00ff">Spr 01</font><font color="#ff00ff">'</font>, <font color="#ff00ff">'</font><font color="#ff00ff">Fall 02</font><font color="#ff00ff">'</font>, <font color="#ff00ff">'</font><font color="#ff00ff">Spr 02</font><font color="#ff00ff">'</font> ],
[<font color="#ff00ff">80</font>, <font color="#ff00ff">90</font>, <font color="#ff00ff">85</font>, <font color="#ff00ff">75</font>],
[<font color="#ff00ff">76</font>, <font color="#ff00ff">55</font>, <font color="#ff00ff">75</font>, <font color="#ff00ff">95</font>],
[<font color="#ff00ff">66</font>, <font color="#ff00ff">58</font>, <font color="#ff00ff">92</font>, <font color="#ff00ff">83</font>]);
<font color="#a52a2a"><b>my</b></font> <font color="#008b8b">$mygraph</font> = GD::Graph::bars-&gt;<font color="#a52a2a"><b>new</b></font>(<font color="#ff00ff">500</font>, <font color="#ff00ff">300</font>);
<font color="#008b8b">$mygraph</font>-&gt;set(
<font color="#ff00ff">x_label </font>=&gt; <font color="#ff00ff">'</font><font color="#ff00ff">Semester</font><font color="#ff00ff">'</font>,
<font color="#ff00ff">y_label </font>=&gt; <font color="#ff00ff">'</font><font color="#ff00ff">Marks</font><font color="#ff00ff">'</font>,
<font color="#ff00ff">title </font>=&gt; <font color="#ff00ff">'</font><font color="#ff00ff">Grade report for a student</font><font color="#ff00ff">'</font>,
<font color="#0000ff"># Draw bars with width 3 pixels</font>
<font color="#ff00ff">bar_width </font>=&gt; <font color="#ff00ff">3</font>,
<font color="#0000ff"># Sepearte the bars with 4 pixels</font>
<font color="#ff00ff">bar_spacing </font>=&gt; <font color="#ff00ff">4</font>,
<font color="#0000ff"># Show the grid</font>
<font color="#ff00ff">long_ticks </font>=&gt; <font color="#ff00ff">1</font>,
<font color="#0000ff"># Show values on top of each bar</font>
<font color="#ff00ff">show_values </font>=&gt; <font color="#ff00ff">1</font>,
) <font color="#a52a2a"><b>or</b></font> <font color="#a52a2a"><b>warn</b></font> <font color="#008b8b">$mygraph</font>-&gt;error;
<font color="#008b8b">$mygraph</font>-&gt;set_legend_font(GD::gdMediumBoldFont);
<font color="#008b8b">$mygraph</font>-&gt;set_legend(<font color="#ff00ff">'</font><font color="#ff00ff">Exam 1</font><font color="#ff00ff">'</font>, <font color="#ff00ff">'</font><font color="#ff00ff">Exam 2</font><font color="#ff00ff">'</font>, <font color="#ff00ff">'</font><font color="#ff00ff">Exam 3</font><font color="#ff00ff">'</font>);
<font color="#a52a2a"><b>my</b></font> <font color="#008b8b">$myimage</font> = <font color="#008b8b">$mygraph</font>-&gt;plot(<font color="#008b8b">\@data</font>) <font color="#a52a2a"><b>or</b></font> <font color="#a52a2a"><b>die</b></font> <font color="#008b8b">$mygraph</font>-&gt;error;
<font color="#a52a2a"><b>print</b></font> <font color="#ff00ff">&quot;</font><font color="#ff00ff">Content-type: image/png</font><font color="#6a5acd">\n\n</font><font color="#ff00ff">&quot;</font>;
<font color="#a52a2a"><b>print</b></font> <font color="#008b8b">$myimage</font>-&gt;png;
</pre>
<p>
The output of above program can be seen <a href=misc/padala/legend.png>here</a>
<h3>Graph with a logo in the background</h3>
<p>
Again as you can see, GD::Graph provides a flexible to way to create
customized graphs. Let's prepare another chart with a logo.
<pre>
Text version of the file can be found <a href=misc/padala/logo.pl.txt>here</a>
<font color="#a020f0">#!/usr/local/bin/perl -w</font>
<font color="#0000ff"># Change above line to point to your perl binary</font>
<font color="#a52a2a"><b>use </b></font>CGI <font color="#ff00ff">'</font><font color="#ff00ff">:standard</font><font color="#ff00ff">'</font>;
<font color="#a52a2a"><b>use lib</b></font> <font color="#ff00ff">'</font><font color="#ff00ff">/cise/homes/ppadala/mydepot/lib/perl5/site_perl</font><font color="#ff00ff">'</font>;
<font color="#a52a2a"><b>use </b></font>GD::Graph::bars;
<font color="#a52a2a"><b>use strict</b></font>;
<font color="#0000ff"># Both the arrays should same number of entries.</font>
<font color="#a52a2a"><b>my</b></font> <font color="#008b8b">@data</font> = ([<font color="#ff00ff">'</font><font color="#ff00ff">Fall 01</font><font color="#ff00ff">'</font>, <font color="#ff00ff">'</font><font color="#ff00ff">Spr 01</font><font color="#ff00ff">'</font>, <font color="#ff00ff">'</font><font color="#ff00ff">Fall 02</font><font color="#ff00ff">'</font>, <font color="#ff00ff">'</font><font color="#ff00ff">Spr 02</font><font color="#ff00ff">'</font> ],
[<font color="#ff00ff">80</font>, <font color="#ff00ff">90</font>, <font color="#ff00ff">85</font>, <font color="#ff00ff">75</font>],
[<font color="#ff00ff">76</font>, <font color="#ff00ff">55</font>, <font color="#ff00ff">75</font>, <font color="#ff00ff">95</font>],
[<font color="#ff00ff">66</font>, <font color="#ff00ff">58</font>, <font color="#ff00ff">92</font>, <font color="#ff00ff">83</font>]);
<font color="#a52a2a"><b>my</b></font> <font color="#008b8b">$mygraph</font> = GD::Graph::bars-&gt;<font color="#a52a2a"><b>new</b></font>(<font color="#ff00ff">500</font>, <font color="#ff00ff">300</font>);
<font color="#008b8b">$mygraph</font>-&gt;set(
<font color="#ff00ff">x_label </font>=&gt; <font color="#ff00ff">'</font><font color="#ff00ff">Semester</font><font color="#ff00ff">'</font>,
<font color="#ff00ff">y_label </font>=&gt; <font color="#ff00ff">'</font><font color="#ff00ff">Marks</font><font color="#ff00ff">'</font>,
<font color="#ff00ff">title </font>=&gt; <font color="#ff00ff">'</font><font color="#ff00ff">Grade report for a student</font><font color="#ff00ff">'</font>,
<font color="#0000ff"># Draw bars with width 3 pixels</font>
<font color="#ff00ff">bar_width </font>=&gt; <font color="#ff00ff">3</font>,
<font color="#0000ff"># Sepearte the bars with 4 pixels</font>
<font color="#ff00ff">bar_spacing </font>=&gt; <font color="#ff00ff">4</font>,
<font color="#0000ff"># Show the grid</font>
<font color="#ff00ff">long_ticks </font>=&gt; <font color="#ff00ff">1</font>,
<font color="#0000ff"># Show values on top of each bar</font>
<font color="#ff00ff">show_values </font>=&gt; <font color="#ff00ff">1</font>,
) <font color="#a52a2a"><b>or</b></font> <font color="#a52a2a"><b>warn</b></font> <font color="#008b8b">$mygraph</font>-&gt;error;
<font color="#008b8b">$mygraph</font>-&gt;set(<font color="#ff00ff">logo </font>=&gt; <font color="#ff00ff">'</font><font color="#ff00ff">lglogo.png</font><font color="#ff00ff">'</font>);
<font color="#008b8b">$mygraph</font>-&gt;set(<font color="#ff00ff">logo_resize </font>=&gt; <font color="#ff00ff">0.5</font>);
<font color="#008b8b">$mygraph</font>-&gt;set(<font color="#ff00ff">logo_position </font>=&gt; <font color="#ff00ff">'</font><font color="#ff00ff">LL</font><font color="#ff00ff">'</font>);
<font color="#008b8b">$mygraph</font>-&gt;set_legend_font(GD::gdMediumBoldFont);
<font color="#008b8b">$mygraph</font>-&gt;set_legend(<font color="#ff00ff">'</font><font color="#ff00ff">Exam 1</font><font color="#ff00ff">'</font>, <font color="#ff00ff">'</font><font color="#ff00ff">Exam 2</font><font color="#ff00ff">'</font>, <font color="#ff00ff">'</font><font color="#ff00ff">Exam 3</font><font color="#ff00ff">'</font>);
<font color="#a52a2a"><b>my</b></font> <font color="#008b8b">$myimage</font> = <font color="#008b8b">$mygraph</font>-&gt;plot(<font color="#008b8b">\@data</font>) <font color="#a52a2a"><b>or</b></font> <font color="#a52a2a"><b>die</b></font> <font color="#008b8b">$mygraph</font>-&gt;error;
<font color="#a52a2a"><b>print</b></font> <font color="#ff00ff">&quot;</font><font color="#ff00ff">Content-type: image/png</font><font color="#6a5acd">\n\n</font><font color="#ff00ff">&quot;</font>;
<font color="#a52a2a"><b>print</b></font> <font color="#008b8b">$myimage</font>-&gt;png;
</pre>
<p>
Output of above program can be seen <a href=misc/padala/logo_output.png>here</a>
<P>
Here's the Linux Gazette <A HREF="misc/padala/lglogo.png">logo</A> I used.
It's in PNG format. The current version of GD::Graph doesn't recognize
any image types besides GIF (although it can write PNG, go figure). I
submitted a
<A HREF="http://www.cise.ufl.edu/~ppadala/perl/exploring/gd_graph/l
ogo_patch">patch</A> to fix this. You can either apply the patch or use
an older version of GD or GD::Graph.
<h3>Graph with Lines </h3>
<p>
Some information can be better presented with line graphs. Here's an
example showing a line graph.
<BR><A HREF="misc/padala/lines.pl.txt">[Text version of this listing.]</A>
<pre>
<font color="#a020f0">#!/usr/local/bin/perl -w</font>
<font color="#0000ff"># Change above line to point to your perl binary</font>
<font color="#a52a2a"><b>use </b></font>CGI <font color="#ff00ff">'</font><font color="#ff00ff">:standard</font><font color="#ff00ff">'</font>;
<font color="#a52a2a"><b>use </b></font>GD::Graph::lines;
<font color="#a52a2a"><b>use strict</b></font>;
<font color="#0000ff"># Both the arrays should same number of entries.</font>
<font color="#a52a2a"><b>my</b></font> <font color="#008b8b">@data</font> = ([<font color="#ff00ff">'</font><font color="#ff00ff">Fall 01</font><font color="#ff00ff">'</font>, <font color="#ff00ff">'</font><font color="#ff00ff">Spr 01</font><font color="#ff00ff">'</font>, <font color="#ff00ff">'</font><font color="#ff00ff">Fall 02</font><font color="#ff00ff">'</font>, <font color="#ff00ff">'</font><font color="#ff00ff">Spr 02</font><font color="#ff00ff">'</font> ],
[<font color="#ff00ff">80</font>, <font color="#ff00ff">90</font>, <font color="#ff00ff">85</font>, <font color="#ff00ff">75</font>],
[<font color="#ff00ff">76</font>, <font color="#ff00ff">55</font>, <font color="#ff00ff">75</font>, <font color="#ff00ff">95</font>],
[<font color="#ff00ff">66</font>, <font color="#ff00ff">58</font>, <font color="#ff00ff">92</font>, <font color="#ff00ff">83</font>]);
<font color="#a52a2a"><b>my</b></font> <font color="#008b8b">$mygraph</font> = GD::Graph::lines-&gt;<font color="#a52a2a"><b>new</b></font>(<font color="#ff00ff">600</font>, <font color="#ff00ff">300</font>);
<font color="#008b8b">$mygraph</font>-&gt;set(
<font color="#ff00ff">x_label </font>=&gt; <font color="#ff00ff">'</font><font color="#ff00ff">Semester</font><font color="#ff00ff">'</font>,
<font color="#ff00ff">y_label </font>=&gt; <font color="#ff00ff">'</font><font color="#ff00ff">Marks</font><font color="#ff00ff">'</font>,
<font color="#ff00ff">title </font>=&gt; <font color="#ff00ff">'</font><font color="#ff00ff">Grade report for a student</font><font color="#ff00ff">'</font>,
<font color="#0000ff"># Draw datasets in 'solid', 'dashed' and 'dotted-dashed' lines</font>
<font color="#ff00ff">line_types </font>=&gt; [<font color="#ff00ff">1</font>, <font color="#ff00ff">2</font>, <font color="#ff00ff">4</font>],
<font color="#0000ff"># Set the thickness of line</font>
<font color="#ff00ff">line_width </font>=&gt; <font color="#ff00ff">2</font>,
<font color="#0000ff"># Set colors for datasets</font>
<font color="#ff00ff">dclrs </font>=&gt; [<font color="#ff00ff">'</font><font color="#ff00ff">blue</font><font color="#ff00ff">'</font>, <font color="#ff00ff">'</font><font color="#ff00ff">green</font><font color="#ff00ff">'</font>, <font color="#ff00ff">'</font><font color="#ff00ff">cyan</font><font color="#ff00ff">'</font>],
) <font color="#a52a2a"><b>or</b></font> <font color="#a52a2a"><b>warn</b></font> <font color="#008b8b">$mygraph</font>-&gt;error;
<font color="#008b8b">$mygraph</font>-&gt;set_legend_font(GD::gdMediumBoldFont);
<font color="#008b8b">$mygraph</font>-&gt;set_legend(<font color="#ff00ff">'</font><font color="#ff00ff">Exam 1</font><font color="#ff00ff">'</font>, <font color="#ff00ff">'</font><font color="#ff00ff">Exam 2</font><font color="#ff00ff">'</font>, <font color="#ff00ff">'</font><font color="#ff00ff">Exam 3</font><font color="#ff00ff">'</font>);
<font color="#a52a2a"><b>my</b></font> <font color="#008b8b">$myimage</font> = <font color="#008b8b">$mygraph</font>-&gt;plot(<font color="#008b8b">\@data</font>) <font color="#a52a2a"><b>or</b></font> <font color="#a52a2a"><b>die</b></font> <font color="#008b8b">$mygraph</font>-&gt;error;
<font color="#a52a2a"><b>print</b></font> <font color="#ff00ff">&quot;</font><font color="#ff00ff">Content-type: image/png</font><font color="#6a5acd">\n\n</font><font color="#ff00ff">&quot;</font>;
<font color="#a52a2a"><b>print</b></font> <font color="#008b8b">$myimage</font>-&gt;png;
</pre>
<p>
Output of above program can be seen <a href=misc/padala/linesgraph.png>here</a>
<p>
Here I have used GD::Graph::lines to create the graph handle. But for this
change, the program follows the same pattern for creating graphs.
<h3>A Pie Graph</h3>
<p>
Similarly we can create a pie chart.
<BR><A HREF="misc/padala/pie.pl.txt">[Text version of this listing.]</A>
<pre>
<font color="#a020f0">#!/usr/local/bin/perl -w</font>
<font color="#0000ff"># Change above line to point to your perl binary</font>
<font color="#a52a2a"><b>use </b></font>CGI <font color="#ff00ff">'</font><font color="#ff00ff">:standard</font><font color="#ff00ff">'</font>;
<font color="#a52a2a"><b>use </b></font>GD::Graph::pie;
<font color="#a52a2a"><b>use strict</b></font>;
<font color="#0000ff"># Both the arrays should same number of entries.</font>
<font color="#a52a2a"><b>my</b></font> <font color="#008b8b">@data</font> = ([<font color="#ff00ff">'</font><font color="#ff00ff">Project</font><font color="#ff00ff">'</font>, <font color="#ff00ff">'</font><font color="#ff00ff">HW1</font><font color="#ff00ff">'</font>, <font color="#ff00ff">'</font><font color="#ff00ff">HW2</font><font color="#ff00ff">'</font>, <font color="#ff00ff">'</font><font color="#ff00ff">HW3</font><font color="#ff00ff">'</font>, <font color="#ff00ff">'</font><font color="#ff00ff">MidTerm</font><font color="#ff00ff">'</font>, <font color="#ff00ff">'</font><font color="#ff00ff">Final</font><font color="#ff00ff">'</font>],
[<font color="#ff00ff">25</font>, <font color="#ff00ff">6</font>, <font color="#ff00ff">7</font>, <font color="#ff00ff">2</font>, <font color="#ff00ff">25</font>, <font color="#ff00ff">35</font>]);
<font color="#a52a2a"><b>my</b></font> <font color="#008b8b">$mygraph</font> = GD::Graph::pie-&gt;<font color="#a52a2a"><b>new</b></font>(<font color="#ff00ff">300</font>, <font color="#ff00ff">300</font>);
<font color="#008b8b">$mygraph</font>-&gt;set(
<font color="#ff00ff">title </font>=&gt; <font color="#ff00ff">'</font><font color="#ff00ff">Grading Policy for COP5555 course</font><font color="#ff00ff">'</font>,
<font color="#ff00ff">'</font><font color="#ff00ff">3d</font><font color="#ff00ff">'</font> =&gt; <font color="#ff00ff">1</font>,
) <font color="#a52a2a"><b>or</b></font> <font color="#a52a2a"><b>warn</b></font> <font color="#008b8b">$mygraph</font>-&gt;error;
<font color="#008b8b">$mygraph</font>-&gt;set_value_font(GD::gdMediumBoldFont);
<font color="#a52a2a"><b>my</b></font> <font color="#008b8b">$myimage</font> = <font color="#008b8b">$mygraph</font>-&gt;plot(<font color="#008b8b">\@data</font>) <font color="#a52a2a"><b>or</b></font> <font color="#a52a2a"><b>die</b></font> <font color="#008b8b">$mygraph</font>-&gt;error;
<font color="#a52a2a"><b>print</b></font> <font color="#ff00ff">&quot;</font><font color="#ff00ff">Content-type: image/png</font><font color="#6a5acd">\n\n</font><font color="#ff00ff">&quot;</font>;
<font color="#a52a2a"><b>print</b></font> <font color="#008b8b">$myimage</font>-&gt;png;
</pre>
<p>
The output pie chart can be seen <a href=misc/padala/piechart.png>here</a>
<p>
The '3d' option draws the pie chart in 3d.
<h3> An Area Graph</h3>
<p>
An area graph shows the data as area under a line.
<BR><A HREF="misc/padala/area.pl.txt">[Text version of this listing.]</A>
<pre>
<font color="#a020f0">#!/usr/local/bin/perl -w</font>
<font color="#0000ff"># Change above line to point to your perl binary</font>
<font color="#a52a2a"><b>use </b></font>CGI <font color="#ff00ff">'</font><font color="#ff00ff">:standard</font><font color="#ff00ff">'</font>;
<font color="#a52a2a"><b>use </b></font>GD::Graph::area;
<font color="#a52a2a"><b>use strict</b></font>;
<font color="#0000ff"># Both the arrays should same number of entries.</font>
<font color="#a52a2a"><b>my</b></font> <font color="#008b8b">@data</font> = ([<font color="#ff00ff">&quot;</font><font color="#ff00ff">Jan</font><font color="#ff00ff">&quot;</font>, <font color="#ff00ff">&quot;</font><font color="#ff00ff">Feb</font><font color="#ff00ff">&quot;</font>, <font color="#ff00ff">&quot;</font><font color="#ff00ff">Mar</font><font color="#ff00ff">&quot;</font>, <font color="#ff00ff">&quot;</font><font color="#ff00ff">Apr</font><font color="#ff00ff">&quot;</font>, <font color="#ff00ff">&quot;</font><font color="#ff00ff">May</font><font color="#ff00ff">&quot;</font>, <font color="#ff00ff">&quot;</font><font color="#ff00ff">Jun</font><font color="#ff00ff">&quot;</font>, <font color="#ff00ff">&quot;</font><font color="#ff00ff">Jul</font><font color="#ff00ff">&quot;</font>, <font color="#ff00ff">&quot;</font><font color="#ff00ff">Aug</font><font color="#ff00ff">&quot;</font>,
<font color="#ff00ff">&quot;</font><font color="#ff00ff">Sep</font><font color="#ff00ff">&quot;</font>, <font color="#ff00ff">&quot;</font><font color="#ff00ff">Oct</font><font color="#ff00ff">&quot;</font>, <font color="#ff00ff">&quot;</font><font color="#ff00ff">Nov</font><font color="#ff00ff">&quot;</font>, <font color="#ff00ff">&quot;</font><font color="#ff00ff">Dec</font><font color="#ff00ff">&quot;</font>],
[<font color="#ff00ff">23</font>, <font color="#ff00ff">5</font>, <font color="#ff00ff">2</font>, <font color="#ff00ff">20</font>, <font color="#ff00ff">11</font>, <font color="#ff00ff">33</font>, <font color="#ff00ff">7</font>, <font color="#ff00ff">31</font>, <font color="#ff00ff">77</font>, <font color="#ff00ff">18</font>, <font color="#ff00ff">65</font>, <font color="#ff00ff">52</font>]);
<font color="#a52a2a"><b>my</b></font> <font color="#008b8b">$mygraph</font> = GD::Graph::area-&gt;<font color="#a52a2a"><b>new</b></font>(<font color="#ff00ff">500</font>, <font color="#ff00ff">300</font>);
<font color="#008b8b">$mygraph</font>-&gt;set(
<font color="#ff00ff">x_label </font>=&gt; <font color="#ff00ff">'</font><font color="#ff00ff">Month</font><font color="#ff00ff">'</font>,
<font color="#ff00ff">y_label </font>=&gt; <font color="#ff00ff">'</font><font color="#ff00ff">Number of Hits</font><font color="#ff00ff">'</font>,
<font color="#ff00ff">title </font>=&gt; <font color="#ff00ff">'</font><font color="#ff00ff">Number of Hits in Each Month in 2002</font><font color="#ff00ff">'</font>,
) <font color="#a52a2a"><b>or</b></font> <font color="#a52a2a"><b>warn</b></font> <font color="#008b8b">$mygraph</font>-&gt;error;
<font color="#a52a2a"><b>my</b></font> <font color="#008b8b">$myimage</font> = <font color="#008b8b">$mygraph</font>-&gt;plot(<font color="#008b8b">\@data</font>) <font color="#a52a2a"><b>or</b></font> <font color="#a52a2a"><b>die</b></font> <font color="#008b8b">$mygraph</font>-&gt;error;
<font color="#a52a2a"><b>print</b></font> <font color="#ff00ff">&quot;</font><font color="#ff00ff">Content-type: image/png</font><font color="#6a5acd">\n\n</font><font color="#ff00ff">&quot;</font>;
<font color="#a52a2a"><b>print</b></font> <font color="#008b8b">$myimage</font>-&gt;png;
</pre>
<p>
Output image can be seen <a href=misc/padala/areagraph.png>here</a>
<h3> Conclusion</h3>
<p>
The GD::Graph module provides a powerful and flexible way to create charts.
It's very useful for creating graphs dynamically for serving on web.
<p>
I hope you have enjoyed reading this article. Next month, we will have a look
at the PerlMagic Module.
<!-- *** BEGIN copyright *** -->
<hr>
<CENTER><SMALL><STRONG>
Copyright &copy; 2002, Pradeep Padala.
Copying license <A HREF="../copying.html">http://www.linuxgazette.com/copying.html</A><BR>
Published in Issue 83 of <i>Linux Gazette</i>, October 2002</H5>
</STRONG></SMALL></CENTER>
<!-- *** END copyright *** -->
<HR>
<!--startcut ==========================================================-->
<CENTER>
<!-- *** BEGIN navbar *** -->
<IMG ALT="" SRC="../gx/navbar/left.jpg" WIDTH="14" HEIGHT="45" BORDER="0" ALIGN="bottom"><A HREF="okopnik.html"><IMG ALT="[ Prev ]" SRC="../gx/navbar/prev.jpg" WIDTH="16" HEIGHT="45" BORDER="0" ALIGN="bottom"></A><A HREF="index.html"><IMG ALT="[ Table of Contents ]" SRC="../gx/navbar/toc.jpg" WIDTH="220" HEIGHT="45" BORDER="0" ALIGN="bottom" ></A><A HREF="../index.html"><IMG ALT="[ Front Page ]" SRC="../gx/navbar/frontpage.jpg" WIDTH="137" HEIGHT="45" BORDER="0" ALIGN="bottom"></A><A HREF="http://www.linuxgazette.com/cgi-bin/talkback/all.py?site=LG&article=http://www.linuxgazette.com/issue83/padala.html"><IMG ALT="[ Talkback ]" SRC="../gx/navbar/talkback.jpg" WIDTH="121" HEIGHT="45" BORDER="0" ALIGN="bottom" ></A><A HREF="../lg_faq.html"><IMG ALT="[ FAQ ]" SRC="./../gx/navbar/faq.jpg"WIDTH="62" HEIGHT="45" BORDER="0" ALIGN="bottom"></A><A HREF="prasad.html"><IMG ALT="[ Next ]" SRC="../gx/navbar/next.jpg" WIDTH="15" HEIGHT="45" BORDER="0" ALIGN="bottom" ></A><IMG ALT="" SRC="../gx/navbar/right.jpg" WIDTH="15" HEIGHT="45" ALIGN="bottom">
<!-- *** END navbar *** -->
</CENTER>
</BODY></HTML>
<!--endcut ============================================================-->
Reference in New Issue View Git Blame Copy Permalink