SVGGraph axis and grid settings

« Return to SVGGraph page

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 with the highest value found, 31 days. The axis divisions are calculated based on the minimum_grid_spacing option (which is set to 20 pixels).

As you can see, all of the bars take up most of the graph, and the interesting stuff is all at the top.

Figure 1
default settings
Figure 2
axis_min_v = 27

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.

The 31-day bars all go right up to the top of the graph, though. 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.

Figure 3
axis_min_v = 27
axis_max_v = 32
Figure 4
axis_min_v = 27
axis_max_v = 32
grid_division_v = 1

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 days 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.

Figure 5
default settings
Figure 6
axis_max_v = 1.6

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 the interval is calculated to fit into that, giving divisions of 0.34. This doesn't go cleanly into the 1.6 that was specified, so SVGGraph adjusts the maximum value upwards to 1.7 to make it fit.

Below in figure 7, the axis_min_v option has been set to -1.8, putting a gap back below the bar for Tuesday. This time SVGGraph has chosen an interval of 0.3, so the axis maximum must be rounded up again from the specified value of 1.6 to the next multiple of the interval, which is 1.8.

Figure 7
axis_max_v = 1.6
axis_min_v = -1.8
Figure 8
axis_max_v = 1.6
axis_min_v = -1.8
grid_division_v = 0.2

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.

Figure 9
axis_max_v = 32
grid_division_v = 3
grid_division_h = 2
Figure 10
axis_max_v = 32
grid_division_v = 3
grid_division_h = 2
axis_max_h = 14
axis_min_h = -2

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.

Figure 9a
axis_max_v = 32
grid_division_v = 3
grid_division_h = 2
Figure 10a
axis_max_v = 32
grid_division_v = 3
grid_division_h = 2
axis_max_h = 14
axis_min_h = -2

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 11
axis_min_h = 27
axis_max_h = 32
grid_division_h = 1
Figure 12
axis_min_h = 32
axis_max_h = 40
Figure 13
axis_min_h = 32
axis_max_h = 27

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.

Figure 14
default settings
Figure 15
force_assoc = true

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).

Figure 16
y = ex
Figure 17
log_axis_y = true

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:

« Back to top of page Axis and grid styles »