Chart - a series of charting modules

    use Chart::type;   (type is one of: Points, Lines, Bars, LinesPoints, Composite, StackedBars, Mountain)

    $obj = Chart::type->new;
    $obj = Chart::type->new ( $png_width, $png_height );

    $obj->set ( $key_1, $val_1, ... ,$key_n, $val_n );
    $obj->set ( $key_1 => $val_1,
                ...
                $key_n => $val_n );
    $obj->set ( %hash );

    # GIFgraph.pm-style API to produce png formatted charts
    @data = ( \@x_tick_labels, \@dataset1, ... , \@dataset_n );
    $obj->png ( "filename", \@data );
    $obj->png ( $filehandle, \@data );
    $obj->png ( FILEHANDLE, \@data );
    $obj->cgi_png ( \@data );

    # Graph.pm-style API
    $obj->add_pt ($label, $val_1, ... , $val_n);
    $obj->add_dataset ($val_1, ... , $val_n);
    $obj->png ( "filename" );
    $obj->png ( $filehandle );
    $obj->png ( FILEHANDLE );
    $obj->cgi_png ();

    The similiar functions are available for jpeg

    # Retrieve imagemap information
    $obj->set ( 'imagemap' => 'true' );
    $imagemap_ref = $obj->imagemap_dump ();

This module is an attempt to build a general purpose graphing module that is easily modified and expanded. I borrowed most of the API from Martien Verbruggen's GIFgraph module. I liked most of GIFgraph, but I thought it was to difficult to modify, and it was missing a few things that I needed, most notably legends. So I decided to write a new module from scratch, and I've designed it from the bottom up to be easy to modify. Like GIFgraph, Chart uses Lincoln Stein's GD module for all of its graphics primitives calls.

Okay, so you caught me. There's really no Chart::type module. All of the different chart types (Points, Lines, Bars, LinesPoints, Composite, StackedBars, and Mountain so far) are classes by themselves, each inheriting a bunch of methods from the Chart::Base class. Simply replace the word type with the type of chart you want and you're on your way. For example,

  use Chart::Lines;

would invoke the lines module.

The new method can either be called without arguments, in which case it returns an object with the default image size (400x300 pixels), or you can specify the width and height of the image. Just remember to replace type with the type of graph you want. For example,

  $obj = Chart::Bars->new (600,400);

would return a Chart::Bars object containing a 600x400 pixel image. New also initializes most of the default variables, which you can subsequently change with the set method.

This is where the fun begins. Set looks for a hash of keys and values. You can pass it a hash that you've already constructed, like

  %hash = ('title' => 'Foo Bar');
  $obj->set (%hash);

or you can try just constructing the hash inside the set call, like

  $obj->set ('title' => 'Foo Bar');

The following are all of the currently supported options:

'transparent'

Makes the background of the image transparent if set to 'true'. Useful for making web page images. Default is 'false'.

'gif_border'

Sets the number of pixels used as a border between the graph and the edges of the png. Defaults to 10.

'graph_border'

Sets the number of pixels used as a border between the title/labels and the actual graph within the png. Defaults to 10.

'text_space'

Sets the amount of space left on the sides of text, to make it more readable. Defaults to 2.

'title'

Tells GD graph what to use for the title of the graph. If empty, no title is drawn. It recognizes '\n' as a newline, and acts accordingly. Default is empty.

'sub_title'

Deprecated, left in for backwards-compatibility. This option will probably be taken out of the next release.

'x_label'

Tells Chart what to use for the x-axis label. If empty, no label is drawn. Default is empty.

'y_label', 'y_label2'

Tells Chart what to use for the y-axis labels. If empty, no label is drawn. Default is empty.

'legend'

Specifies the placement of the legend. Valid values are 'left', 'right', 'top', 'bottom'. Setting this to 'none' tells chart not to draw a legend. Default is 'right'.

'legend_labels'

Sets the values for the labels for the different datasets. Should be assigned a reference to an array of labels. For example,

  @labels = ('foo', 'bar');
  $obj->set ('legend_labels' => \@labels);

Default is empty, in which case 'Dataset 1', 'Dataset 2', etc. are used as the labels. For a pareto graph, the first value should be the name of the set, and the second should be the name of the running sum of the values. For a pie graph, this option is ignored, as the values for the legend are taken from the array of data point labels.

'tick_len'

Sets the length of the x- and y-ticks in pixels. Default is 4.

'x_ticks'

Specifies how to draw the x-tick labels. Valid values are 'normal', 'staggered' (staggers the labels vertically), and 'vertical' (the labels are draw upwards). Default is 'normal'.

'y_ticks'

Sets the number of y_ticks to draw. Default is 6.

'max_val'

Sets the maximum y-value on the graph, overriding the normal auto-scaling. Default is undef.

'min_val'

Sets the minimum y-value on the graph, overriding the normal auto-scaling. Default is undef.

'pt_size'

Sets the radius of the points (for Chart::Points, etc.) in pixels. Default is 18.

'brush_size'

Sets the width of the lines (for Chart::Lines, etc.) in pixels. Default is 6.

'skip_x_ticks'

Sets the number of x-ticks and x-tick labels to skip. (ie. if 'skip_x_ticks' was set to 4, Chart would draw every 4th x-tick and x-tick label). Default is undef.

'custom_x_ticks'

Used in points, lines, linespoints, and bars charts, this option allows you to specify exatly which x-ticks and x-tick labels should be drawn. It should be assigned a reference to an array of desired ticks. Just remember that I'm counting from the 0th element of the array. (ie., if 'custom_x_ticks' is assigned [0,3,4], then the 0th, 3rd, and 4th x-ticks will be displayed)

'f_x_tick'

Needs a reference to a function which uses the x-tick labels generated by the CW@data->[0] as the argument. The result of this function can reformat the labels. For instance

   $obj -> set ('f_x'tick' => \&formatter );

An example for the function formatter: x labels are seconds since an event. The referenced function can transformat this seconds to hour, minutes and seconds.

'f_y_tick'

The same situation as for 'f_x_tick' but now used for y labels.

'colors'

This option lets you control the colors the chart will use. It takes a reference to a hash. The hash should contain keys mapped to references to arrays of rgb values. For instance,

        $obj->set('colors' => {'background' => [255,255,255]});

sets the background color to white (which is the default). Valid keys for this hash are

        'background' (background color for the png)
        'text' (all the text in the chart)
        'y_label' (color of the first y axis label)
        'y_label2' (color of the second y axis label)
        'grid_lines' (color of the grid lines)
        'x_grid_lines' (color of the x grid lines - for x axis ticks)
        'y_grid_lines' (color of the y grid lines - for to left y axis ticks)
        'y2_grid_lines' (color of the y2 grid lines - for right y axis ticks)
        'dataset0'..'dataset311' (the different datasets)
        'misc' (everything else, ie. ticks, box around the legend)

NB. For composite charts, there is a limit of 8 datasets per component. The colors for 'dataset8' through 'dataset15' become the colors for 'dataset0' through 'dataset7' for the second component chart.

'grey_background'

Puts a nice soft grey background on the actual data plot when set to 'true'. Default is 'true'.

'grid_lines'

Draws grid lines matching up to x and y ticks

'spaced_bars'

Leaves space between the groups of bars at each data point when set to 'true'. This just makes it easier to read a bar chart. Default is 'true'.

'imagemap'

Lets Chart know you're going to ask for information about the placement of the data for use in creating an image map from the png. This information can be retrieved using the imagemap_dump() method. NB. that the imagemap_dump() method cannot be called until after the Chart has been generated (ie. using the png() or cgi_png() methods).

'sort'

Tells Chart to sort the data before plotting it. Can be assigned an order ('asc' or 'desc' for ascending and descending, respectively), in which case it sorts numerically. Or it can also be assigned an array reference. The array reference should contain 3 elements: the order in which to search (as above), which dataset to use (remember that 0 is the x-tick labels), and the type of sort to do ('alpha' or 'num' for alphabetical or numerical sorts, respectively). For example,

    $obj->set ('sort' => ['asc', 2, 'num']);

would sort the data numerically in ascending order, sorting by the third dataset (second if you don't count the x-tick labels). Note that

    $obj->set ('sort' => ['asc', 0, 'alpha']);

will sort the data in ascending alphabetical order by the x-tick labels. Defualts to undef, normally, and 'desc' for pareto.

'nosort'

Turns off the default sort for pareto graphs. Default is undef.

'cutoff'

Only used for pareto charts, this option determines where the cut-off point is. It then lumps everything after the highest 'cutoff' data points into an 'Other' entry on the chart. Default is 5.

'nocutoff'

Turns off the default 'cutoff' feature of pareto graphs. Defaut is undef.

'composite_info'

This option is only used for composite charts. It contains the information about which types to use for the two component charts, and which datasets belong to which component chart. It should be a reference to an array of array references, containing information like the following

        $obj->set ('composite_info' => [ ['Bars', [1,2]],
                                         ['Lines', [3,4] ] ]);

This example would set the two component charts to be a bar chart and a line chart. It would use the first two data sets for the bar chart (note that the numbering starts at 1, not zero like most of the other numbered things in Chart), and the second two data sets for the line chart. The default is undef. NB. Chart::Composite can only do two component charts.

'min_val1', 'min_val2'

Only for composite charts, these options specify the minimum y-value for the first and second components respectively. Both default to undef.

'max_val1', 'max_val2'

Only for composite charts, these options specify the maximum y-value for the first and second components respectively. Both default to undef.

'ylabel2'

The label for the right y-axis (the second component chart) on a composite chart. Default is undef.

'yticks1', 'y_ticks2'

The number of y ticks to use on the first and second y-axis on a composite chart. Please note that if you just set the 'y_ticks' option, both axes will use that number of y ticks. Both default to undef.

'same_y_axes'

Forces both component charts in a composite chart to use the same maximum and minimum y-values if set to 'true'. This helps to keep the composite charts from being too confusing. Default is undef.

'no_cache'

Adds Pragma: no-cache to the http header. Be careful with this one, as Netscape 4.5 is unfriendly with POST using this method.

Sending the image to a file

Invoking the png method causes the graph to be plotted and saved to a file. It takes the name of the output file and a reference to the data as arguments. For example,

  $obj->png ("foo.png", \@data);

would plot the data in CW@data, and the save the image to foo.png. Of course, this then beggars the question What should CW@data look like?. Well, just like GIFgraph, CW@data should contain references to arrays of data, with the first array reference pointing to an array of x-tick labels. For example,

  @data = ( [ 'foo', 'bar', 'junk' ],
            [ 30.2,  23.5,  92.1   ] );

would set up a graph with one dataset, and three data points in that set. In general, the CW@data array should look something like

  @data = ( \@x_tick_labels, \@dataset1, ... , \@dataset_n );

And no worries, I make my own internal copy of the data, so that it doesn't mess with yours.

CGI and Chart

Okay, so you're probably thinking, Do I always have to save these images to disk? What if I want to use Chart to create dynamic images for my web site? Well, here's the answer to that.

  $obj->cgi_png ( \@data );

The cgi_png method will print the chart, along with the appropriate http header, to stdout, allowing you to call chart-generating scripts directly from your html pages (ie. with a <img src=image.pl> HTML tag). The CW@data array should be set up the same way as for the normal png method.

You might ask, But what if I just want to add a few points to the graph, and then display it, without all those references to references?. Well, friend, the solution is simple. Borrowing the add_pt idea from Matt Kruse's Graph module, you simply make a few calls to the add_pt method, like so:

    $obj->add_pt ('foo', 30, 25);
    $obj->add_pt ('bar', 16, 32);

Or, if you want to be able to add entire datasets, simply use the add_dataset method:

    $obj->add_dataset ('foo', 'bar');
    $obj->add_dataset (30, 16);
    $obj->add_dataset (25, 32);

These methods check to make sure that the points and datasets you are adding are the same size as the ones already there. So, if you have two datasets currently stored, and try to add a data point with three different values, it will carp (per the Carp module) an error message. Similarly, if you try to add a dataset with 4 data points, and all the other datasets have 3 data points, it will carp an error message.

Don't forget, when using this API, that I treat the first dataset as a series of x-tick labels. So, in the above examples, the graph would have two x-ticks, labeled 'foo' and 'bar', each with two data points.

Clearing the data

A simple call to the clear_data method empties any values that may have been entered.

    $obj->clear_data ();

Getting a copy of the data

If you want a copy of the data that has been added so far, make a call to the get_data method like so:

        $dataref = $obj->get_data;

It returns (you guessed it!) a reference to an array of references to datasets. So the x-tick labels would be stored as

        @x_labels = @{$dataref->[0]};

Sending the image to a file

If you just want to print this chart to a file, all you have to do is pass the name of the file to the png() method.

        $obj->png ("foo.png");

Sending the image to a filehandle

If you want to do something else with the image, you can also pass a filehandle (either a typeglob or a FileHandle object) to png, and it will print directly to that.

        $obj->png ($filehandle);
        $obj->png (FILEHANDLE);

CGI and Chart

Okay, so you're probably thinking (again), Do I always have to save these images to disk? What if I want to use Chart to create dynamic images for my web site? Well, here's the answer to that.

        $obj->cgi_png ();

The cgi_png method will print the chart, along with the appropriate http header, to stdout, allowing you to call chart-generating scripts directly from your html pages (ie. with a <img src=image.pl> HTML tag).

Chart can also return the pixel positioning information so that you can create image maps from the pngs Chart generates. Simply set the 'imagemap' option to 'true' before you generate the png, then call the imagemap_dump() method afterwards to retrieve the information. You will be returned a data structure almost identical to the CW@data array described above to pass the data into Chart.

        $imagemap_data = $obj->imagemap_dump ();

Instead of single data values, you will be passed references to arrays of pixel information. For Bars and StackedBars charts, the arrays will contain two x-y pairs (specifying the upper left and lower right corner of the bar), like so

        ( $x1, $y1, $x2, $y2 ) = @{ $imagemap_data->[$dataset][$datapoint] };

For Lines, Points, and LinesPoints, the arrays will contain a single x-y pair (specifying the center of the point), like so

        ( $x, $y ) = @{ $imagemap_data->[$dataset][$datapoint] };

A few caveats apply here. First of all, GD treats the upper-left corner of the png as the (0,0) point, so positive y values are measured from the top of the png, not the bottom. Second, these values will most likely contain long decimal values. GD, of course, has to truncate these to single pixel values. Since I don't know how GD does it, I can't truncate it the same way he does. In a worst-case scenario, this will result in an error of one pixel on your imagemap. If this is really an issue, your only option is to either experiment with it, or to contact Lincoln Stein and ask him. Third, please remember that the 0th dataset will be empty, since that's the place in the CW@data array for the data point labels.

•

Numeric x-axes.

•

Pie charts

•

Add some 3-D graphs.

Probably quite a few, since it's been completely rewritten. As usual, please mail me with any bugs, patches, suggestions, comments, flames, death threats, etc.

David Bonner (dbonner@cs.bu.edu)

Chart Group (Chart@wettzell.ifag.de)

Copyright(c) 1997-1998 by David Bonner, 1999 by Peter Clark, 2001 by the Chart group at BKG-Wettzell. All rights reserved. This program is free software; you can redistribute it and/or modify it under the same terms as Perl itself.