SVGGraph 3.4

Published

Welcome to the end of year to-do list fix fest, where I've gone through the to-do list for SVGGraph and tried to do as many as possible. This might seem like a bit of a random way to get things done, but it means I crossed off an item that has been there since early 2016 so I would call it a win.

The Coming of Shadows

The first of the new options adds support for displaying drop shadows on the graph:

Graph with shadows

This is actually my second attempt at getting shadows working. The first time I tried duplicating the shapes and changing the colours, but it didn't work at all well. This time I have used an SVG <filter> element to copy, desaturate, offset and blur the graph features to make the shadow, which gives a simple and consistent result for all graph types. The downside is that SVG filters might not be very well supported by some SVG to PDF libraries, so they might not show up if you try converting to PDF.

The option to turn shadows on is show_shadow, and there are also these options for the opacity, offset and amount of blurring: shadow_opacity, shadow_offset_x, shadow_offset_y, shadow_blur.

Different Strokes

Several things from the to-do list were related to stroking lines, by which I mean the lines around bars, pie slices, markers, tooltips, labels, etc. Up until now there was only support for stroking lines using solid colours, but version 3.4 adds support for stroking using gradients and patterns as well.

Stroking with fill and fillColour

The stroked lines can now be automatically stroked using the fill colour of the item, either using the base colour or the full gradient/pattern too. The example above shows both options, using a very thick line to make it clearer. You can enable these effects by setting the stroke_colour option to "fillColour" for stroking with the base colour, or "fill" to stroke with the whole fill colour/gradient/pattern. The marker_stroke_colour option supports the "fill" and "fillColour" values too.

The default value of the stroke_colour option is now "fillColour" for the multi-line and multi-radar graphs. In earlier versions these graphs always drew the line using the base colour for the dataset, but now you can choose to draw the lines however you want.

Related to these stroke changes, I also added an option to use gradients and patterns in the filled area of markers. marker_solid defaults to true, which keeps the current behaviour of only using solid colours for filling.

There is also a new tooltip_stroke_colour option for specifying a separate colour for the tooltip border from that of the text, overriding the tooltip_colour value.

The Legend Continues

Someone pointed out that the options for spacing out the different parts of a legend were a bit stingy, so I've added some more options for helping with that: legend_padding_x, legend_padding_y, legend_spacing, legend_column_spacing, legend_entry_spacing and legend_title_spacing. All of these options default to null, meaning they take the value of the existing legend_padding option.

Someone else found a bug in how floating bar graph entries are added to the legend, which meant I had to simplify a few things and shuffle a few other things around, but that is fixed now.

The Leftovers

There are some other changes that don't deserve their own headings, but I will grudgingly give them a bullet point each.

• An update to the minify_js option. Until now you had to provide your own Javascript minification code, but now you can set the option to true and SVGGraph will use a simple built-in function to squeeze out as much spare space as possible. In my tests this reduced the size of the Javascript by about 20%, which is better than I had hoped.

• I've changed how 3D bar graphs are drawn - to illustrate why I've made the two graphs below, both drawn with 10-pixel wide lines:

Spiky version 3.3
Smooth version 3.4

The one on the left was made using SVGGraph 3.3, the one on the right with version 3.4. I've made a similar change to the cylinder graphs, but things were not quite as bad there to start with.

• I've changed the order in which the parts of a pie graph are drawn, because the shaded overlay section was being drawn over the top of the stroked edge lines. Now the edge lines are drawn after the overlay, making things look a bit clearer.

• Radial gradients in radar graph grid background stripes. Until now gradients would not work in the background stripes on radar graphs, but I have added some extra code to remap the gradient to fit each stripe. I looked at doing the same thing for pie slices, but that would be *really complicated*.

• I found and fixed a bug in how histograms set up the axis length, which meant the last item could sometimes be missed off or cut off at the end of the axis.

• “Axis min/max giving strange top end”. This is the item that was on the to-do list for the longest, although it didn't take very long to actually fix it. Setting a minimum value for the Y-axis would make SVGGraph calculate a value for the top of the axis that was larger than it needed to be.

The new version of SVGGraph is available from the downloads page, or from GitHub / Packagist with Composer.

« Previous: TrayBlank 1.10 Back to top of page