SVGGraph axis and grid settings
Skip to:
From version 2.3 SVGGraph includes options to specify where the axes and grid divisions should appear, instead of using the automatically determined values. This page provides some examples and explanation.
Example 1: days in the month (axis min/max and grid divisions)
This example shows the axis options using the following data values, the number of days in each month in a non-leap year. I've also shown the colour array used to produce the bar gradients.
$values = array(
'Jan' => 31, 'Feb' => 28, 'Mar' => 31, 'Apr' => 30,
'May' => 31, 'Jun' => 30, 'Jul' => 31, 'Aug' => 31,
'Sep' => 30, 'Oct' => 31, 'Nov' => 30, 'Dec' => 31,
);
$hot = array('red','yellow');
$warm = array('yellow','blue','white');
$cold = array('blue','white');
$colours = array($cold, $cold, $cold, $warm,
$hot, $hot, $hot, $hot,
$warm, $warm, $cold, $cold);
Figure 1 below shows how SVGGraph draws these values, showing the Y-axis
starting at 0 and ending just above the highest value found, which is 31 days.
The axis divisions are calculated based on the
minimum_grid_spacing
option (which is set to 20 pixels) and
attempts to find the best division size that fits the numbers.
As you can see, all of the bars take up most of the graph, and the interesting stuff is all at the top.
In figure 2 above, axis_min_v
has been set to 27, which means that
the vertical Y axis now starts at 27 instead of 0. The difference in the bars is
much easier to see here.
Now the 31-day bars all go right up to the top of the graph. It
might not be clear that they stop there, so figure 3 below sets
axis_max_v
to 32 to leave a gap at the top of the grid.
The graph still looks a bit odd though - there aren't any months with half-days
in them, so displaying them on the axis is unnecessary and could be confusing.
Figure 4 fixes this by setting the grid_division_v
option to 1 to make
sure that only whole numbers appear.
Example 2: temperatures over a week
For this example I've chosen a range of temperatures to display over the course of a week. I made these values up to demonstrate some of SVGGraph's properties more clearly. The colour array has not changed from the previous graphs.
$values = array(
'Mon' => -0.8, 'Tue' => -1.7, 'Wed' => -0.4, 'Thu' => 1.5,
'Fri' => 13.5, 'Sat' => 16.0, 'Sun' => 5.3
);
Figure 5 shows SVGGraph drawing the bar chart with the default settings. It picks an interval of 2 units for the Y-axis and shows all the values in their entirety.
I've decided to look more closely at the smaller values from Monday to
Thursday, so figure 6 shows the result of setting axis_max_v
to
1.6, which will leave a bit of space above Thursday's value of 1.5. The
larger values of Friday to Sunday are cropped at the grid edge. (But the
tooltip text will still tell you their correct value.)
Because of the change of scale, Tuesday's value of -1.7 now has the greatest magnitude and SVGGraph adjusts the top and bottom values to give the division size that most closely fits the values while still being greater than the minimum size.
Below in figure 7, the axis_min_v
option has been explicitly
set to -1.8. This doesn't make any difference here, but in versions of SVGGraph
before 3.1 the previous graph ended at -1.7. Version 3.1 improved the algorithm
for finding divisions, making graphs with negative values behave more sensibly.
Finally, I wasn't happy with 0.3 as an interval, so in figure 8 above the
grid_division_v
option has been set to a value of 0.2. The
minimum_grid_spacing
option is still set to 20 pixels, but this is
overridden when grid_division_v
is set. (Actually, the minimum
grid spacing is reduced to 1 pixel when grid_division_v
is set, to
prevent creating a huge SVG document full of unreadable labels.)
The divisions shown here are actually about 16 pixels apart.
This time, the maximum and minimum axis option values are both multiples of the grid interval, so no adjustment is necessary.
We will control the horizontal
From version 2.4, SVGGraph also supports similar options for controlling the horizontal axes.
In figure 9 the chart of days in a month is back, this time with
grid_division_h
set to 2. Grid lines are drawn at every other
month, with only those months labelled on the axis.
In figure 10 the axis_max_h
and axis_min_h
options have been set to add empty space to the left and right of the
chart. The empty sections of axis are not labelled because they do not
relate to any of the (non-numeric) keys in the data array.
In figures 9a and 10a below the same data values and options are used, but are stored as a plain array with integer keys starting at 0.
Because this array uses numeric keys, SVGGraph is able to fill in the axis labels for the empty grid spaces with extrapolated values.
Other stuff
The examples above all show the effects upon vertical graphs, but the horizontal graphs all support the same options. Figure 11 shows a HorizontalBarGraph with similar settings to those in figure 4, but with the horizontal and vertical options switched around.
Figure 12 shows you what happens if you specify a range that does not contain any of the values on the graph. In earlier versions of SVGGraph, you would see an error message saying that there were no values in the grid range, but now it will show an empty graph.
And figure 13 is what you get when your maximum is less than your minimum. So don't do that.
Use the “force_assoc” option, Luke
SVGGraph will look at the keys in the values that you assign to it and
decide whether the data is numeric or associative based on whether the keys
look like numbers or not. Sometimes it gets it wrong, which is where the
force_assoc
option comes in handy.
$values = array(
array(
1988 => 5, 1992 => 5, 1996 => 1,
2000 => 11, 2004 => 9, 2008 => 19
),
array(
1988 => 10, 1992 => 3, 1996 => 8,
2000 => 10, 2004 => 9, 2008 => 13
),
array(
1988 => 9, 1992 => 12, 1996 => 6,
2000 => 7, 2004 => 12, 2008 => 15
),
);
The values above that specify some data for various years will produce the
grouped bar graph shown in figure 14 below when the force_assoc
option is not used.
SVGGraph has found all numeric keys in the data and decided to fit the values
onto an X-axis that goes from 0 to 2100. You could use the
axis_min_h
option to crop the graph to the start of the data, but
there would still be gaps of three years in between each group of values.
Figure 15 shows the effect of enabling the force_assoc
option -
the 1988-2008 keys are only used to label the axes and their numeric values are
ignored.
Logarithmic scale
Version 2.12 adds the option of using a logarithmic scale for the Y-axis.
This is useful when the data cover a wide range of values. Figures 16 and 17
below both show a line graph of ex
(where x
goes from 1 to 8 in increments of 0.25).
The first graph is using the standard linear scale and the second has a log
scale enabled with the log_axis_y
option. The default base used is
10, though you can change this to any value > 1 using the
log_axis_y_base
option.
Log scales are supported by most grid-based graph types including bar, line, scatter and radar graphs. There are a few limitations to be aware of:
- Logarithmic scales cannot show 0 values, so you will see an error message
if your data contains a 0 and the
axis_min_v
option is not set. (Or theaxis_min_h
option for horizontal graphs.) - Logarithmic scales can show all positive or all negative values, but cannot show both negative and positive values on the same graph.
- The
log_axis_y_base
value must be greater than 1. It does not have to be an integer, though SVGGraph will not attempt to subdivide floating point-based scales. - None of the stacked line or bar graphs support log scales. I could have made them work, but the resulting graphs would have been confusing - stacked bars with equal values would decrease in height with the size of the stack.