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

JanFebMarAprMayJunJulAugSepOctNovDec048121620242832
1. Default settings
JanFebMarAprMayJunJulAugSepOctNovDec2727.427.828.228.62929.429.830.230.631
2. Axis minimum set
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.

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.

JanFebMarAprMayJunJulAugSepOctNovDec2727.52828.52929.53030.53131.532
3.Both ends of axis set
axis_min_v = 27
axis_max_v = 32
JanFebMarAprMayJunJulAugSepOctNovDec272829303132
4. Axis divisions set
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 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.

MonTueWedThuFriSatSun-20246810121416
5. Default settings
MonTueWedThuFriSatSun-1.8-1.5-1.2-0.9-0.6-0.300.30.60.91.21.51.8
6. Axis maximum set
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 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.

MonTueWedThuFriSatSun-1.8-1.5-1.2-0.9-0.6-0.300.30.60.91.21.51.8
7. Maximum and minimum set
axis_max_v = 1.6
axis_min_v = -1.8
MonTueWedThuFriSatSun-1.8-1.6-1.4-1.2-1-0.8-0.6-0.4-0.200.20.40.60.811.21.41.6
8. Division size set
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.

JanMarMayJulSepNov03691215182124273033
9. Horizontal divisions set
axis_max_v = 32
grid_division_v = 3
grid_division_h = 2
JanMarMayJulSepNov03691215182124273033
10. Horizontal start and end set
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.

024681003691215182124273033
9a. Integer keys
axis_max_v = 32
grid_division_v = 3
grid_division_h = 2
-20246810121403691215182124273033
10a. Extrapolated axis values
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.

272829303132JanFebMarAprMayJunJulAugSepOctNovDec
11. Horizontal bar graph
axis_min_h = 27
axis_max_h = 32
grid_division_h = 1
323334353637383940JanMaySep
12. Empty range
axis_min_h = 32
axis_max_h = 40
Invalid Y axis options: min > max (32 > 27)Invalid Y axis options: min > max (32 > 27)
13. Invalid range
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.

03006009001,2001,5001,8002,10002468101214161820
14. Default settings
19881992199620002004200802468101214161820
14. Using force_assoc
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).

e^1e^2e^3e^4e^5e^6e^7e^802505007501,0001,2501,5001,7502,0002,2502,5002,7503,000
16. Line graph [y = ex]
e^1e^2e^3e^4e^5e^6e^7e^81510501005001,0005,00010,000
17. Logarithmic axis enabled
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 »

This site uses cookies - details here.