Template:SVG Chart

From Wikimedia Commons, the free media repository
Jump to: navigation, search


Documentation icon Documentation[view] [edit] [history] [purge]

This documentation is transcluded from Template:SVG Chart/doc.


This template creates charts by the generation of code for an SVG file. The special feature is that the data is retained in its original format and can be easily supplemented or changed later. In particular, a clear structure is produced, which can easily be modified with any text editor.

Quick start[edit]

Copy sample template:
{{SVG Chart
| XAxisText    = Year
| YAxisText    = Index
| LegendType   = none  

| XMin         = 1990
| XMax         = 2015
| YMin         = 5
| YMax         = 20
| Graph1Values =       
     1990 6.16
     2000 10.72
     2005 11.15
     2012 17.29
}}}
Copy the resulting preview text into a text file chart.svg and open this file in your browser or SVG viewer. You get a result like these:
Samplechart.svg
US Natural Gas Production.svg

Usage[edit]

  1. Create the template {{SVG Chart}} somewhere.
  2. Press the "Preview" button. You get the SVG instructions.
  3. Paste (with mouse) and copy (<Ctrl>+<C>) the received SVG instructions.
  4. Create an SVG file e.g. mychart.svg on your computer.
  5. Open that file with a plain text editor, e.g. Notepad.
  6. Paste (<Ctrl>+<V>) the copied data into the text file. Save that file (<Ctrl>+<S>).
  7. Check the file by drag and drop on your browser, with Jarry1250's SVG Check or File:Test.svg.
  8. If the check is successfully, store your file with Commons:Upload.

Main parameters[edit]

Required parameters[edit]

Param Description Value Default
XMin, XMax Range of values on x axis. Numbers 0, 100
YMin, YMax Range of values on y axis. Numbers 0,   50
XAxisText Description of values of x axis. Text -
YAxisText Description of values of Y axis. Text -
Graph1Values
...
Graph6Values
Any number of pairs of numbers are entered here. The first number of each pair is the x value. The second number of each pair is the y value. The numbers must be separated by spaces. For better readability in the svg file should be 5 spaces before each pair of values​​. Couples of numbers -

The differences of XMax - XMin and YMax - YMin should so far as possible similar. If not, divide or multiply the x or y chart values by multiples of 10.

Optional parameters[edit]

Param Description Value Default
Title A general short title for the diagram. This title is visible on top of the chart and readable in programs. Text -
Description The description can contain more informations to the diagram, for example the source of data. This information is not visible on the generated chart. Text -

Additional optional parameters[edit]

Axis[edit]

Every axis is shown automatically. Commonly are to be shown markers on axis. This is possible with the following values:

Param Description Value Default
XAxisMarkOffset YAxisMarkOffset The displacement of the first marker in relation to the axis origin. Numbers 0
XAxisMarkStep YAxisMarkStep The distance of the markers, should be the 5th to 10th part of whole length. Numbers 1
XAxisMark2Step The distance of the intermediate markers, should be the 2th to 5th part of XAxisMarkStep. Number -
XAxisValueStart YAxisValueStart The number of the first value. Number XMin, YMin
XAxisValueStep YAxisValueStep The difference of number of following numbers. Number XAxisMarkStep YAxisMarkStep
XAxisValuePosStart YAxisValuePosStart The position of the first value. Number coordinate origin
XAxisValuePosStep YAxisValuePosStep The distance of following values. Number XAxisMarkStep YAxisMarkStep
XAxisValueRound YAxisValueRound The values ​​of the axes are rounded with the herewith given precision. Number -
XAxisValueSVG YAxisValueSVG The text of the axis is completely replaced by the herewith provided SVG instructions. For this you can use the generated svg instructions which are included in the IDs "axistext-x" and "axistext-y". Text -
YAxisTextX, YAxis2TextX Position of axis description in percent. Value 100
YAxisValueSuffix A suffix for values, e.g. %. If needed, a space is to write additional. Text -

Grid[edit]

You can realize vertical and horizontal grid lines. The following parameters are available:

Param Description Value Default
XGrid Value of distance of vertical or lines. Number XAxisMarkStep
YGrid Value of distance of horizontal lines. Number YAxisMarkStep

Legend[edit]

Param Description Value Default
LegendType Type of legend.

none - none legend
box - names of charts in column
line - names of charts side by side (experimental)

Text box
Graph1Text

Graph6Text
Name of the corresponding chart. Text Simple name
LegendX Position of left side of legend to coordinate origin, in percent. Number 100
LegendY Position of top of legend to coordinate origin, in percent. Number 100
LegendWidth Width of legend. Number Fixed internal value
LegendBorder none, if border shall not be visible. Text Yes
LegendSVG The legend of the diagram is completely replaced by herewith provided SVG instructions. Text -

Additional text[edit]

Param Description Value Default
Text1

Text6
Any text. May be a description for a chart inside of the diagram. Text Graph1Text

Graph6Text
Text1X

Text1X
The horizontal position of the text. Must be a number between XMin and XMax. Number 0
Text1Y

Text1Y
The vertical position of the text. Must be a number between YMin and YMax. Number 0

Graph[edit]

Param Description Value Default
Graph1Color

Graph6Color
Color of chart line. May be rgb(75%, 10%, 10%) and other. Color term blue, red, …
Graph1Line

Graph6Line
none, if line of chart shall not be visible. Number -
GraphWidth Thickness of all lines. Number 100
Graph1Width Thickness of first line. Number 100

Marker[edit]

An alternate possibility is to show markers. In this case, the line stay visible or be off.

Param Description Value Default
Graph1Marker

Graph6Marker
Type of marker for corresponding chart.
1 - Square
2 - Circle
3 - Triangle
...
6 - ?
Number Fixed internal type
Graph1MarkerSize

Graph6MarkerSize
Size of chart marker in percent. Number 100
Graph1MarkerFill

Graph6MarkerFill
Color of the filling or none. Color term Color of the border

Image size[edit]

Param Description Value Default
GraphStretchWidth Width of the chart in percent. This value should be between 100 and 300. Number 100
GraphStretchHeight Height of the chart in percent. This value should be between 100 and 300. Number 100
ImageSize This parameter changes the overall size of the image. The graphs, lines and text are changed proportionally. Number 100
ImageTop Modification of the space on top of the diagram. Number internal value
ImageRight Modification of the space on the right side of the diagram in percent to the whole size of image. Number internal value, about 10
ImageBottom Modification of the space below the diagram. Number internal value
ImageLeft Modification of the space on the left side of the diagram. Number internal value
ElementsWidth Width and size of alle image elements like lines, text and markers. Number 100

Font size[edit]

Param Description Value Default
FontSize General font size in percent. Number 100
FontSizeTitle Font size of the title text in percent. Number 100
LegendFontSize Font size of legend text in percent. Number General font size
XAxisFontSize, YAxisFontSize Font sizes of axis text in percent. Value 100
ChartTextFontSize Font size of chart text in percent. Number 100

SVG additionals[edit]

Param Description Value Default
BackgroundSVG SVG instructions for the background of the chart area. Text -
ForegroundSVG SVG instructions for the foreground of the chart area. Text -
BackgroundImageSVG SVG instructions for the whole background. Text -

Correction of errors of the Wikipedia software[edit]

Param Description Value Default
XAxisValueDYlibrsvg, + YAxisValueDYlibrsvg Move misplaced axis text. Text -

Example[edit]

Sample[edit]

{{SVG Chart
| Title        = My test chart
| XAxisText    = Year
| YAxisText    = Index

| XMin         = 1990
| XMax         = 2015
| YMin         = 6
| YMax         = 13
| Graph1Values =       
     1991 7.59
     1994 8.56
     1997 9
     2000 9.27
     2003 9.69
     2006 10.16
     2009 10.7
     2012 11.29
}}

More examples[edit]

For further examples look here.

Upload[edit]

  • After the upload insert before {{int:filedesc}}
{{handSVG|||H}}
  • Insert after {{int:filedesc}}
== Generated with ''Wikimedia SVG Chart'' ==
{{SVG Chart/box}}
  • Add the category to the image
[[Category:Created with Commons SVG Chart]]
  • Add the source code of chart to the talk page additional with the headline == Source ==.

Development[edit]

If you have a question or a suggestion, share this here.

For more informations see: Programming of Wikimedia SVG Chart.