User:Innesw/sandbox/further examples

Further examples of the use of the Charts SVG module.

Standard Chart Variations

{{#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
}}
see caption
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
}}
see caption
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
}}
see caption
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
}}
see caption
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
}}
see caption
A pie chart with all segments exploded, and the segment names next to the segments.

Complex Examples

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
}}
see caption
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"/>
}}
see caption
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
}}
see caption
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
}}
see caption
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.
Category:User pages with broken file links