Template:SVG Chart
Note: See detailed documentation and instructions farther down. For charts see Category:SVG created with Wikimedia SVG Chart.
Mark and copy the following text. Paste it into a plain text file. The text file should have an svg extension, for example mychart.svg.
You can check the result with Toolforge tool SVGCheck (upload file temporarily), in W3Schools Tryit Editor (insert source code) or in Commons with File:Test.svg (upload as new file revision).
<?xml version="1.0" encoding="UTF-8" ?> <!-- Generator: wikimedia.svg.chart, 2013-08-28 --> <!-- modify viewBox (x,y,dx,dy) for position (x,y) and size (dx,dy) --> <svg id="head" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="-19,-53.5,167,71.5" width="750" height="320" font-family="Helvetica, Arial, Liberation Sans" > <!-- also a workaround for librsvg: a <rect> must be placed somewhere before text for a good display of text --> <rect id="imagebackground" x="-19" y="-53.5" width="167" height="71.5" stroke-width="0.1" stroke="none" fill="white"/> <title>plain text svg graphic</title> <desc> This svg graphic is to edit with an text editor. Please do not overwrite this file by saving with an image editor. </desc> <style id="styles" type="text/css"> <![CDATA[ .graphgeneral { /*-- general look of graphs and markers, e.g. in legend --*/ stroke-width: 0.7; fill: none; stroke-linejoin: round; stroke-linecap: round; } .graphgeneralstretch { /*-- general look of graphs and markers on a stretched chart --*/ stroke-width: 0.7; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.graph1lineblank { /*-- look of graph 1 --*/ stroke: rgb(00%, 00%, 60%); } .graph1line { stroke: rgb(00%, 00%, 60%); }
.graph2lineblank { /*-- look of graph 2 --*/ stroke: rgb(75%, 10%, 10%); } .graph2line { stroke: rgb(75%, 10%, 10%); }
.graph3lineblank { /*-- look of graph 3 --*/ stroke: rgb(00%, 60%, 00%); } .graph3line { stroke: rgb(00%, 60%, 00%); }
.graph4lineblank { /*-- look of graph 4 --*/ stroke: rgb(00%, 60%, 60%); } .graph4line { stroke: rgb(00%, 60%, 60%); }
.graph5lineblank { /*-- look of graph 5 --*/ stroke: rgb(60%, 00%, 60%); } .graph5line { stroke: rgb(60%, 00%, 60%); }
.graph6lineblank { /*-- look of graph 6 --*/ stroke: rgb(60%, 60%, 00%); } .graph6line { stroke: rgb(60%, 60%, 00%); }
.graph7lineblank { /*-- look of graph 7 --*/ stroke: rgb(00%, 00%, 30%); } .graph7line { stroke: rgb(00%, 00%, 30%); }
.graph8lineblank { /*-- look of graph 8 --*/ stroke: rgb(00%, 30%, 00%); } .graph8line { stroke: rgb(00%, 30%, 00%); } .axisline { stroke: black; stroke-width: 0.35; stroke-linecap: round; } .titletext { font-size: 6.6px; } .axistext-x { font-size: 6px; } .axistext-x-number { font-size: 6px; } .axistext-y { font-size: 6px; } .axismark-main { stroke: black; stroke-width: 0.25; } .axismark-second { stroke: black; stroke-width: 0.25; } .legendtext { font-size: 6px; text-anchor: start; } ]]></style> <defs> <!--== axis dashes definitions ==--> <!-- x-axis mark, modify "height" --> <pattern id="x-axismark-main" x="0" width="10" height="2" patternUnits="userSpaceOnUse"> <line x1="0" y1="-1" x2="0" y2="2" class="axismark-main"/> </pattern> <!-- y-axis mark, modify "width" --> <pattern id="y-axismark-main" width="2" height="10" patternUnits="userSpaceOnUse"> <line x1="-1" y1="0" x2="2" y2="0" class="axismark-main"/> </pattern> <!-- y-axis2 mark, modify "width" --> <pattern id="y-axis2mark-main" width="1" height="10" patternUnits="userSpaceOnUse"> <line x1="-1" y1="0" x2="11" y2="0" class="axismark-main"/> </pattern> </defs> <g transform="scale(1, -1)"> <!-- x axis, modify "x2" and "width" --> <rect id="x-axismark" x="-0.5" y="-1.8" width="102" height="1.75" fill="url(#x-axismark-main)"/> <line id="x-axis" x1="0" y1="0" x2="100" y2="0" class="axisline"/> <!-- y axis, modify "height" --> <rect id="y-axismark" x="-1.75" y="-0.5" width="1.75" height="51" fill="url(#y-axismark-main)"/> <line id="y-axis" x1="0" y1="0" x2="0" y2="50" class="axisline"/> </g> <!-- x axis text, modify each value --> <g id="axistext-x" class="axistext-x-number" transform="translate(0, 7.8)" text-anchor="middle"> <text x= "0">0</text> <text x= "10">10</text> <text x= "20">20</text> <text x= "30">30</text> <text x= "40">40</text> <text x= "50">50</text> <text x= "60">60</text> <text x= "70">70</text> <text x= "80">80</text> <text x= "90">90</text> <text x="100">100</text> <text id="title-x" class="axistext-x" x="50" y="7.8" >Values of x axis</text> </g> <!-- y axis text, modify each value --> <g id="axistext-y" class="axistext-y" text-anchor="end" transform="translate(-3, 1.5)"> <text y= "-0">0</text> <text y= "-10">10</text> <text y= "-20">20</text> <text y= "-30">30</text> <text y= "-40">40</text> <text y= "-50">50</text> <text id="title-y" x="25" y="-10.9" transform="rotate(-90)" text-anchor="middle" >Values of y axis</text> </g>
<!-- legend --> <g id="legend" class="legendtext" transform="translate(105, -45)">
<g id="legend-background" class="axismark-main"> <rect x="0" y="0" fill="white" width="40" height="16.2"/> </g>
<g class="graphgeneral"><g class="graph1line"> <polyline id="legend-line1" points="2 4.62 7 4.62" marker-start="none" marker-end="none"/> </g></g> <text id="legend-text1" x="9" y="6.4">1st W </text>
<g class="graphgeneral"><g class="graph2line"> <polyline id="legend-line2" points="2 11.22 7 11.22" marker-start="none" marker-end="none"/> </g></g> <text id="legend-text2" x="9" y="13">2nd W </text> </g> <!--====== graph data with origin values, you can manually copy or attach the values here ======--> <!-- modify displacement "translate" --> <defs> <g id="graphs">
<!-- graph 2 -->
<polyline id="graph2" points=" 25 40 40 10 55 35 70 10 85 40 "/> </g> <g id="graph1"> <!-- graph 1 --> <polyline id="graph1-line" stroke-width="0.7" points=" 15 40 30 10 45 35 60 10 75 40 "/> </g> </defs> <g class="graphgeneralstretch" transform="scale(1, -1) translate(-0, -0)">
<!-- graph 2 --> <use id="graphuse2-1" transform="translate(0, 0)" class="graph2line" xlink:href="#graph2"/>
<!-- graph 1 --> <use id="graphuse1-1" transform="translate(0, 0)" class="graph1line" xlink:href="#graph1"/> </g> </svg>
This template generates SVG code for line charts.
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.
This template categorizes to Created with Wikimedia SVG Chart.
Quick start
[edit]Usage
[edit]- Create the template {{SVG Chart}} somewhere. This means: put for instance the text in the light gray box above, which starts with {{SVG Chart on some existing page, for instance, your own user page here on Wikimedia Commons (not on Wikipedia, where it will not have any effect).
- Adjust the numbers and put in your own data and descriptions of the axes. Note that if you put any text in your graph, you automatically restrict its usage to a single language version of Wikipedia; consider whether descriptions of the axes are really needed.
- Press the "Preview" button. You now see a page with instructions followed by the source code of an SVG file on a light gray background. The instructions at the top match the next few steps in this list here.
- Paste (with mouse) and copy (<Ctrl>+<C>) the text in the light gray box.
- Create an empty SVG file e.g. mychart.svg on your computer.
- Open that file with a plain text editor, e.g. Notepad.
- Paste (<Ctrl>+<V>) the copied data into the text file. Save that file (<Ctrl>+<S>).
- Check the file by drag and drop on your browser, with Jarry1250's SVG Check or File:Test.svg. If you did not change the data in step 2, you will see a red and a blue W.
- If the check is successfully, store your file with Commons:Upload.
- After uploading, put the source code (the text that starts with {{SVG Chart) on the Talk page of the newly created Commons file (go to the file, and click on the "Discussion" tab at the top of the page) so that others can easily update your graph in the future.
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 ... Graph8Values |
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, there 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 | - |
Image generation parameters
[edit]Param | Description | Value | Default |
---|---|---|---|
1 | number of W3C-errors | digit | 0
|
2 | '%x' when embedded text (x ∈ [ ,i,n,r,s,v,u]) | % | %n
|
gl | Graphic Lab by national Wikipedia, e.g. 'de' | lab |
|
t | additional text | Text |
|
T | additional text in new line | 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 |
---|---|---|---|
XAxisMarkStart YAxisMarkStart | 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 YAxisMark2Step | The distance of the intermediate markers, should be the 2th to 5th part of X or YAxisMarkStep. | 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 | Position of axis description in percent. | Value | 100
|
YAxisValueSuffix | A suffix for values, e.g. %. If needed, a space is to write additional. | Text | - |
2nd (Right) Axis (Optional)
[edit]Param | Description | Value | Default |
---|---|---|---|
YAxis2MarkStart | The displacement of the first marker in relation to the axis origin. | Numbers | 0
|
YAxis2MarkStep | The distance of the markers, should be the 5th to 10th part of whole length. | Numbers | 1
|
YAxis2ValueStart | The number of the first value. | Number | XMin, YMin
|
YAxis2ValueStep | The difference of number of following numbers. | Number | YAxis2MarkStep
|
YAxis2ValuePosStart | The position of the first value. | Number | coordinate origin
|
YAxis2ValuePosStep | The distance of following values. | Number | YAxis2MarkStep
|
YAxis2TextX | Position of axis description in percent. | Value | 100 |
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 - no legend |
Text | box
|
Graph1Text … Graph8Text |
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 … Graph8Text
|
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 … Graph8Color |
Color of chart line. May be rgb(75%, 10%, 10%) and other. | Color term | blue, red, …
|
Graph1Line … Graph8Line |
none, if line of chart shall not be visible. | Text | -
|
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 … Graph8Marker |
Type of marker for corresponding chart. 1 - Square 2 - Circle 3 - Triangle 4 - Diamond 5 - Inverted triangle 6 - X |
Number | yes for default
|
Graph1MarkerSize … Graph8MarkerSize |
Size of chart marker in percent. | Number | 100
|
Graph1MarkerFill … Graph8MarkerFill |
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. Must be divisible by 10 to display chart correctly. | Number | 100
|
GraphStretchHeight | Height of the chart in percent. This value should be between 100 and 300. Must be divisible by 10 to display chart correctly. | Number | 100
|
ImageSize | This parameter changes the overall width of the image. The graphs, lines and text are changed proportionally. Default is 750px. | 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}}
- This will 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 ==.
See also
[edit]- Another version of SVG Chart by the modern programming language Lua with more possibilities for the future is available at: Module:SVG_Chart.
This variant is to be used with
{{#invoke: SVG_Chart | SVGChart |
instead of
{{SVG Chart
Development
[edit]If you have a question or a suggestion, share this here.
For more informations see: Programming of Wikimedia SVG Chart.