SVGGraph Bar and Line Graphs

« Return to SVGGraph page

Skip to:

• Bar and line graphs
• Pareto charts
• Options

There are two graph types that draw data as bars or lines: the BarAndLineGraph class draws a GroupedBarGraph and MultiLineGraph on the same graph, and the StackedBarAndLineGraph draws a StackedBarGraph and MultiLineGraph on the same graph.

The ParetoChart looks similar to a simple bar and line graph, but it displays the same dataset in two ways at once:

The bars are the values in the dataset sorted largest-first, and the line shows the running total percentage of all the values with its own axis on the right of the graph.

Example code

Here are the settings and PHP code used to generate the graphs above:

<?php
require_once 'SVGGraph/autoloader.php';

$settings = [
  'back_colour' => '#eee',
  'back_stroke_width' => 0,
  'back_stroke_colour' => '#eee',
  'stroke_colour' => '#000',
  'axis_colour' => '#333',
  'axis_overlap' => 2,
  'axis_font' => 'Arial',
  'axis_font_size' => 10,
  'label_colour' => '#000',
  'pad_right' => 20,
  'pad_left' => 20,
  'link_base' => '/',
  'link_target' => '_top',
  'minimum_grid_spacing' => 20,
  'show_subdivisions' => true,
  'show_grid_subdivisions' => true,
  'grid_colour' => '#666',
  'grid_subdivision_colour' => '#ccc',
  'line_dataset' => [1, 2],
  'fill_under' => false,
  'marker_type' => ['circle','square'],
  'marker_size' => 3,
  'marker_colour' => ['blue','red'],
];

$values = [
  ['Dough' => 30, 'Ray' => 50, 'Me' => 40, 'So' => 25, 'Far' => 45, 'Lard' => 35],
  ['Dough' => 20, 'Ray' => 30, 'Me' => 20, 'So' => 15, 'Far' => 25, 'Lard' => 35, 'Tea' => 45],
  ['Dough' => 10, 'Ray' => 20, 'Me' => 20, 'So' => 25, 'Far' => 15, 'Lard' => 20, 'Tea' => 20],
  ['Dough' => 30, 'Ray' => 10, 'Me' => 20, 'So' => 35, 'Far' => 25, 'Lard' => 25, 'Tea' => 45],
];

$colours = [ ['red', 'yellow'], ['blue', 'white'],
  ['green', 'pattern' => 'polkadot', 'size' => 6],
  ['orange','pattern' => 'check', 'size' => 6]
];

$links = ['Dough' => 'jpegsaver.php', 'Ray' => 'crcdropper.php', 'Me' => 'svggraph.php'];

$graph = new Goat1000\SVGGraph\SVGGraph(300, 200, $settings);

$graph->colours($colours);
$graph->values($values);
$graph->links($links);
$graph->render('BarAndLineGraph');

This is not the actual code used - I have adapted it to make it easier to copy and paste it into a new file to try for yourself. To change the type of graph generated, change 'BarAndLineGraph' in the final call to $graph->render to one of the other types.

BarAndLineGraph and StackedBarAndLineGraph

The BarAndLineGraph and StackedBarAndLineGraph types must be provided with the line_dataset option to specify which of the datasets should be drawn as lines instead of bars. The default is “1” to show the first dataset as bars, the second dataset as a line and any other dataset as bars.

Note: the dataset_axis option can be used with any datasets for the BarAndLineGraph, but only for line datasets when using StackedBarAndLineGraph. This is to ensure that the stacked bars use the same scale.

Pareto charts

A ParetoChart uses a single set of data to produce both a bar graph and a line graph. The bars are displayed in order of value, largest first. The line shows the sum of adding the bar graph values together, using a percentage scale.

They are generally used in quality control, with the bars representing faults, bug report categories or the associated costs. The line shows what percentage of all problems are made up by the preceding bars.

For this example I have used some data on a year of pest control call-outs to provide a more realistic chart:

From this we can easily see that over 80% of call-outs are due to rats, wasps and mice, which could be useful information if you are planning to deal with this kind of thing.

ParetoChart settings

The ParetoChart doesn't have any specific settings, though it does support the usual bar and line graph options. The bars are drawn as dataset 0 and the line as dataset 1, so per-dataset options can be set up to affect them individually.

Settings

There are only two options specific to the bar and line graphs, and neither of them apply to the Pareto chart:

For bar graph options visit the bar graphs page, and for line graph options visit the line graphs page.

« Back to top of page Scatter graphs »

Copyright © 2023, Goat 1000