SVGGraph axis and grid settings

« Return to SVGGraph page

Skip to:

• Example 1 (axis min/max and grid divisions)
• Example 2 (axis min/max and grid divisions again)
• Example 3 (horizontal min/max and grid divisions)
• Other stuff (horizontal graphs, empty graphs and invalid options)
• Using the force_assoc option
• Logarithmic scale

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

« Back to top of page Axis and grid styles »

Copyright © 2020, Goat 1000