SVGGraph 2.13

Published 31 Jul 2013

Version 2.13 of SVGGraph adds one new graph type, a few new global options, makes more customisation available in the structured data fields and fixes a few bugs.

The example above shows the new “PopulationPyramid” class in action, a population or age pyramid of values that I pulled out of nowhere. It works like a horizontal stacked bar graph, but with values alternating sides of a central, vertical X-axis. Because both sides are positive, it does not support negative values.

To highlight the strange decline in the male population between the ages of 30-39 on the graph, I've given the bar a thick purple dashed line using some new structured data fields: stroke_width, stroke_colour and stroke_dash. (stroke_dash is also available as a global option for use with all the bar and pie graphs.)

More structured data fields

The other new structured data fields are for use with markers, so I've made the example MultiLineGraph below to show them in use.

On the red line, I've changed the markers on the years 2000 and 2009 to yellow diamonds using the new marker_type and marker_stroke_colour fields and the existing colour field. On the blue line, I've changed the markers to squares using marker_type again, and the marker for 2007 is also modified using marker_size and marker_stroke_width.

The Y-axis is labelled in millions of pounds using the units_y and units_before_y options - the tooltips use similar options to format the key and value fields, units_tooltip is set to “ million” (with a leading space), units_before_tooltip_key is set to “Year ” (with a trailing space) and units_tooltip_key is set to the pound symbol (£). I've also set the thousands option to an empty string so that the years do not become “1,998”, etc.

Because these files are encoded as UTF-8, I've included the pound symbol as a single character. You can use numeric XML character entities though, and version 2.13 of SVGGraph should handle them much better than previous versions. As an example, the pound symbol as a numeric character entity would be £ in hex, or £ in decimal.

There are two more new options in this version, minify which removes extra whitespace from the SVG (the default is for it to be enabled) and minify_js which allows you to specify a function to be used to minify the Javascript code. I haven't included any Javascript minification code with the library, but there are several minification scripts available that are written in PHP and should do the job.

Neither of these options reduce the size of the SVG file by a huge amount, but SVG is an XML format and compresses very well. I recommend enabling the compression of SVG by your web server (if it isn't already enabled). For the Apache server, the configuration is something like this:

AddOutputFilterByType DEFLATE image/svg+xml

- you should check your specific server documentation for how to achieve this.

Example code

Here are the actual settings and values used for the multi-line graph example above:

$settings = array(
  'force_assoc' => true,
  'structure' => array(
    'key' => 0,
    'value' => array(1, 2),
    'marker_type' => array('ms1', 'ms2'),
    'marker_size' => array('mz1', 'mz2'),
    'marker_stroke_colour' => array('mc1', 'mc2'),
    'marker_stroke_width' => array('mw1', 'mw2'),
    'colour' => array('c1', 'c2'),
  ),
  'marker_stroke_colour' => '#fff',
  'minimum_grid_spacing_h' => 30,
  'units_y' => 'm',
  'units_before_y' => '£',
  'units_tooltip' => ' million',
  'units_before_tooltip' => '£',
  'units_before_tooltip_key' => 'Year ',
  'thousands' => '',
);
  
$values = array(
  array(1998, 3.5, 6.4),
  array(1999, 3.7, 6.5),
  array(2000, 3.4, 6.7,
    'ms1' => 'square', 'c1' => '#fff', 'mc1' => '#f0f',
    'ms2' => 'diamond', 'c2' => '#ff0', 'mc2' => '#000',
  ),
  array(2001, 3.6, 6.3),
  array(2002, 3.9, 6.2),
  array(2003, 4.3, 5.8),
  array(2004, 4.9, 5.2),
  array(2005, 5.3, 4.8),
  array(2006, 5.7, 4.2),
  array(2007, 5.8, 4.5,
    'ms1' => 'square', 'mc1' => '#f00',  'mz1' => 8, 'mw1' => 3,
  ),
  array(2008, 5.3, 4.0),
  array(2009, 5.0, 3.5,
    'ms2' => 'diamond', 'c2' => '#ff0', 'mc2' => '#000',
  ),
  array(2010, 4.4, 4.1),
  array(2011, 4.6, 3.9),
  array(2012, 4.2, 2.9),
);

The updated zip files are available from the downloads page.

« Previous: JPEG Saver 4.9.1 Next: TrayBlank 1.4 »