Help:Barchart

This page, Help:Barchart, describes some techniques for generating a barchart in a WikiQueer page, by coding a set of numbers in a timeline-tag format. As shown in the example below, the tag "&lt;timeline&gt;" can display charts in various formats, where the whole image is scaled by a command, as in "ImageSize=width:180 height:90", and using the keyword "bar" triggers the barchart features.

Here, the presentation as vertical bars is formatted by the command "TimeAxis = orientation:vertical" (before specifying the data for the bars). The width of bars is set by "PlotData=width:20". The color of any bar can be set by appending the keyword "color:" (such as "color:lightgrey") at the end of each bar's numeric data.

For other optional parameters, see below: Barchart commands & attributes, or full list at Help:Timeline.

Example of a population barchart
The following barchart is generated, live, using a timeline-tag structure which contains population numbers for each year in the barchart (markup shown further below).

The above barchart, showing population bars for each year, can be generated by using the markup text listed below. The example text (below) can be copied and shortened, or expanded, to handle other years or numbers in a barchart format. The image size is set as "ImageSize = width:450 height:305" for a box of 450x305px. Barcharts can be made simpler by omitting some of the various data options, such as dropping the keyword "at:" ("at:390") which places labels at certain locations on a bar. The above text will generate the barchart-image shown above, with 14 bars in an image box, sized 450x305 pixels, with the left-corner note "Data from ISTAT".

Barchart commands & attributes
Each barchart command is followed by an equal-sign ("="), while attributes are followed by a colon (":") as in the command "Period = from:0 till:2000" which sets the vertical (y-axis) range from 0-2000.

The timeline commands to format the graph layout are:
 * ImageSize = width:450 height:305
 * The numbers 450 and 305 are pixel sizes of the image box.
 * PlotArea = left:50 bottom:50 top:30 right:30
 * The PlotArea defines margins around the barchart inside the image.
 * DateFormat = x.y
 * This sets the date format, if needed.
 * Period = from:0 till:2000
 * The Period is the range of numbers along the vertical axis (y-axis numbers). Setting attribute "till" larger by 500 (as "till:2500") would compress the bars, as 20% shorter within the image box.
 * TimeAxis = orientation:vertical
 * The attribute value as "vertical" displays the bars as upright.
 * AlignBars = justify
 * Using command "AlignBars=justify" will auto-widen the bars to fit.
 * ScaleMajor = gridcolor:darkgrey increment:1000 start:0
 * Command "ScaleMajor" sets the major y-axis ruler lines across the graph.
 * ScaleMinor = gridcolor:lightgrey increment:200 start:0
 * Command "ScaleMinor" sets the minor y-axis rulers across the graph.
 * BackgroundColors = canvas:sfondo
 * The overall color is set to id "sfondo" (defined above), as "value:rgb(1,1,1)" which is white hue, with the RGB (Red/Green/Blue) numbers as "1,1,1".

The timeline commands to format the text labels are:
 * bar:1861 at:390 fontsize:XS text: 390 shift:(-8,5)
 * Here "bar:1861" names the bar to label, at height 390, using fontsize:XS (for extra-small, or "S" as small, or M,L,XL font), with literal text as "390" slightly shifted in position by "shift:(-8,5)".


 * TextData=
 * fontsize:S pos:(20,10) text:Data from ISTAT
 * Command "TextData" sets a note line, here at left-corner X-Y position "pos:(20,10)" with the literal text note "Data from ISTAT".

The above descriptions are for the common commands, plus their colon-attributes with values from the example.

For more information, see Help:Timeline, with other examples, showing traditional timeline formats, beyond the barchart style shown above.


 * [ This page is a quick draft to be expanded later. ]