From Wikimedia Commons, the free media repository
Jump to navigation
Jump to search
Further examples of the use of the Charts SVG module.
Standard Chart Variations [ edit ]
{{#invoke:Charts SVG
| barChart
| FileTitle = Charts SVG Example 9 - Stacked Bar Chart
| YMax = 160
| Stack = y
| Series1Text = 1st W
| Series1Values = 1 70
2 10
3 50
4 10
5 70
| Series2Text = 2nd W
| Series2Values = 1 80
2 20
3 65
4 40
5 90
| Group1Text = A
| Group2Text = B
| Group3Text = C
| Group4Text = D
| Group5Text = E
}}
Bars stacked for each group.
{{#invoke:Charts SVG
| barChart
| FileTitle = Charts SVG Example 10 - Stacked 100% Bar Chart
| YMax = 160
| Stack100 = y
| Series1Text = 1st W
| Series1Values = 1 70
2 10
3 50
4 10
5 70
| Series2Text = 2nd W
| Series2Values = 1 80
2 20
3 65
4 40
5 90
| Group1Text = A
| Group2Text = B
| Group3Text = C
| Group4Text = D
| Group5Text = E
}}
Bars stacked, and each group scaled to 100%.
{{#invoke:Charts SVG
| lineChart
| FileTitle = Charts SVG Example 11 - Stacked Line Chart
| YMax = 160
| Stack = y
| Series1Text = 1st W
| Series1Values = 1 70
2 10
3 50
4 10
5 70
| Series2Text = 2nd W
| Series2Values = 1 80
2 20
3 65
4 40
5 90
| Group1Text = A
| Group2Text = B
| Group3Text = C
| Group4Text = D
| Group5Text = E
}}
A line chart, with each group stacked.
{{#invoke:Charts SVG
| lineChart
| FileTitle = Charts SVG Example 12 - Stacked 100% Area Chart
| YMax = 160
| Area = y
| Stack100 = y
| Series1Text = 1st W
| Series1Values = 1 70
2 10
3 50
4 10
5 70
| Series2Text = 2nd W
| Series2Type = bar
| Series2Values = 1 80
2 20
3 65
4 40
5 90
| Series3Text = 3rd W
| Series3Type = bar
| Series3Values = 1 90
2 15
3 45
4 25
5 85
| Group1Text = A
| Group2Text = B
| Group3Text = C
| Group4Text = D
| Group5Text = E
}}
An area chart, each group stacked and scaled to 100%.
{{#invoke:Charts SVG
| pieChart
| FileTitle = Charts SVG Example 13 - Exploded Pie Chart
| Explode = all
| SegmentText = y
| Series1Values = A 80
B 20
C 60
D 20
E 80
}}
A pie chart with all segments exploded, and the segment names next to the segments.
These examples have multiple adjustments.
{{#invoke:Charts SVG
| scatterChart
| FileTitle = Charts SVG Example 14 - Complex Scatter Chart
| XMax = 6
| XAxisValueStep = 1
| YMin = -40
| YMax = 160
| Y2Min = -20
| Y2Max = 80
| Series1Text = 1st W
| Series1Values = 1 70
2 10
3 50
4 10
5 70
| Series2Text = 2nd W
| Series2YAxis2 = y
| Series2Values = 0.8 80
2.2 20
2.7 65
4.5 40
5.1 75
| Series3Text = 2nd W trend
| Series3Line = y
| Series3Color = rgb(0, 192, 0)
| Series3Marker = none
| Series3YAxis2 = y
| Series3Values = 0.8 58
5.1 54.2
| Series4Line = y
| Series4Width = 50
| Series4Color = red
| Series4Marker = none
| Series4Values = 0 0
6 0
| ChartText1 = y = -0.8844x + 58.706, R<tspan font-size = "70%" dy = "-0.6em, 0.6em">2 </tspan> = 0.0037
| ChartText1X = 1.5
| ChartText1Y = 100
}}
A scatter chart with additional lines for the trend of '2nd W' and for the zero Y-value. The '2nd W' series is scaled using the right Y-Axis. Note how text values for display (the ChartText1 value here), because they are passed to the SVG as-is, can include SVG <tspan> elements for text appearance adjustments (the superscript '2').
{{#invoke:Charts SVG
| lineChart
| FileTitle = Charts SVG Example 15 - Text and Layout Adjustments
| ImageBackgroundColor = rgb(80%,80%,100%)
| ImageBorder = darkblue
| ImagePadding = 2
| ImagePaddingTop = 40
| ChartBackgroundColor = rgb(70%,70%,70%)
| XAxisTitle = Groups
| XAxisTitleFontSize = 60
| XAxisValuesFontSize = 60
| YMax = 160
| YAxisTitle = Y Values
| YAxisValuePrefix = $
| Series1Text = 1st W
| Series1Values = 1 70
2 10
3 50
4 10
5 70
| Series2Text = 2nd W
| Series2Values = 1 80
2 20
3 65
4 40
5 90
| Series3Text = 3rd W
| Series3Values = 1 90
2 15
3 45
4 25
5 85
| Group1Text = A
| Group2Text = B
| Group3Text = C
| Group4Text = D
| Group5Text = E
| LegendType = horizontal
| LegendBorder = red
| LegendX = 0.5
| LegendY = 140
| LegendTextWidth = 70
| Title = Line Chart
| TitleX = 0
| Footnote = Text and Layout Adjustments
| FootnoteX = 1.5
| FootnoteY = 165
| ImageForegroundSVG = <image x="476" y="0" width="100" height="100" xlink:href="http://upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png"/>
}}
A mixed chart with image and chart background colors, a reduced image padding (but an expanded top padding), and the title, legend and footnote moved. A foreground has been added showing the Wikipedia globe as an image.
{{#invoke:Charts SVG
|lineChart
|FileTitle=Charts SVG Example 16 - Axis Adjustments
|XMax=6
|XAxisValueStep=0.5
|XAxisMarkStep=1
|XAxisMark2Step=0.25
|XAxisArrows=yes
|XGrid=0.2
|YMax=160
|YAxisValueStep=20
|YAxisMark2Step=5
|YAxisColor=red
|YAxisArrows=yes
|YGrid=10
|Series1Text=1st W
|Series1Values=1 70
2 10
3 50
4 10
5 70
|Series2Text=2nd W
|Series2Values=0.8 80
2.2 20
2.7 65
4.5 40
5.1 90
}}
A line chart with adjustments to axis text value steps, tick mark spacings, the Y axis color, and with axis arrows.
{{#invoke:Charts SVG
| mixedChart
| FileTitle = Charts SVG Example 17 - Graph Style Adjustments
| YMax = 160
| BorderColor = #0FF
| BorderWidth = 300
| BarSpace = 50
| Series1Text = 1st W
| Series1Marker = 2
| Series1MarkerSize = 150
| Series1MarkerFill = #FF22FF
| Series1Width = 300
| Series1Values = 1 70
2 10
3 50
4 10
5 70
| Series2Text = 2nd W
| Series2Dash = 6
| Series2Values = 1 80
2 20
3 65
4 40
5 90
| Series3Text = 3rd W
| Series3Type = bar
| Series3Values = 1 80
2 20
3 65
4 40
5 90
| Series4Text = 4th W
| Series4Type = bar
| Series4Pattern = 3
| Series4PatternColor = lightgrey
| Series4Values = 1 90
2 15
3 45
4 25
5 85
| Group1Text = A
| Group2Text = B
| Group3Text = C
| Group4Text = D
| Group5Text = E
}}
A mixed chart with dash-patterns and markers on graph lines, and a fill pattern on one series of bars.
{{#invoke:fiddle
|mixedChart
|FileTitle=Charts SVG Example 18 - Horizontal Bars Grouped
|ChartWidth=350
|ChartHeight=500
|HorizontalBarGraph=yes
|Group1Text=Group 1
|Group2Text=Group 2
|Group3Text=Group 3
|XAxisValueSpace=100
|YMax=200
|YMin=0
|YAxisValueStep=10
|YAxisMark2Step=2
|YAxis2ValueRotate=-90
|Y2Max=20
|Y2Min=0
|YAxis2ValueStep=1
|YAxis2Mark2Step=0.2
|YAxis2Color=orange
|Series1Labels=yes
|Series1Values=1 150
2 20
3 125
|Series2Labels=yes
|Series2Values=1 60
2 100
3 10
|Series3YAxis2=yes
|Series3Color=orange
|Series3Labels=yes
|Series3Values=1 13
2 5
3 10
|BorderColor=#00f
|LegendType=none
}}
see caption A horizontal bar chart with the X-axis in groups.
{{#invoke:Charts SVG
|barChart
|FileTitle=Charts SVG Example 19 - Horizontal Bars Grouped - top down
|ChartWidth=500
|ChartHeight=350
|HorizontalBarGraph=yes
|GroupsTopDown=yes
|Group1Text=Alpha
|Group2Text=Beta
|Group3Text=Gamma
|XAxisValueSpace=100
|YMax=200
|YMin=0
|YAxisValueStep=10
|YAxisMark2Step=2
|YAxis2ValueRotate=-90
|Series1Labels=yes
|Series1Values=1 150
2 20
3 125
|Series2Labels=yes
|Series2Values=
1 80
2 60
3 40
|LegendType=none
}}
see caption A horizontal bar chart with the X-axis in groups, that appear top-down.
{{#invoke:Charts SVG
|barChart
|FileTitle=Charts SVG Example 20 - Population Pyramid
|ImagePadding=20
|ChartWidth=400
|ChartHeight=400
|HorizontalBarGraph=yes
|Stack=yes
|XMin=0
|XMax=100
|XAxisValueStep=10
|XGrid=none
|YMin=-7.5
|YMax=7.5
|YAxisValueStep=2.5
|YAxisMark2Step=0.5
|YGrid=0.5
|YAxisValueAbsolute=yes
|YAxisValueSuffix=%
|Series1Text=Males
|Series1Color=1
|Series1Values=2.5 -3.3
7.5 -3.3
12.5 -3.0
17.5 -3.2
22.5 -3.5
27.5 -3.8
32.5 -3.8
37.5 -3.2
42.5 -3.5
47.5 -3.2
52.5 -3.3
57.5 -3.1
62.5 -2.6
67.5 -2.5
72.5 -1.8
77.5 -1.3
82.5 -0.9
87.5 -0.5
92.5 -0.2
97.5 -0.0
|Series2Text=Females
|Series2Color=4
|Series2Values=2.5 3.1
7.5 3.1
12.5 2.9
17.5 3.0
22.5 3.3
27.5 3.7
32.5 3.7
37.5 3.2
42.5 3.5
47.5 3.2
52.5 3.3
57.5 3.1
62.5 2.7
67.5 2.5
72.5 1.9
77.5 1.4
82.5 1.1
87.5 0.8
92.5 0.4
97.5 0.1
|BorderColor=black
|LegendType=none
|Footnote=Source: populationpyramid.net/australia/2016/
}}
see caption A population pyramid, achieved by a horizontal bar chart, stacked (to ensure the left and right bar match vertically), one series all with -ve values, and absolute Y-axis values.