SVGGraph Bar and Line Graphs
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.
Here are the settings and PHP code used to generate the graphs above:
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
to one of the other types.
BarAndLineGraph and StackedBarAndLineGraph
The BarAndLineGraph and StackedBarAndLineGraph types must be provided with
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.
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.
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.
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.
There are only two options specific to the bar and line graphs, and neither of them apply to the Pareto chart:
Bar and line graph options - Hide table
||A dataset number (or array of dataset numbers) to display as lines instead of bars|
||Sets the position of line markers on bar and line graphs.|
For bar graph options visit the bar graphs page, and for line graph options visit the line graphs page.