mic_none

User:Innesw/sandbox/Module:Charts SVG/doc/further examples Source: en.wikipedia.org/wiki/User:Innesw/sandbox/Module:Charts_SVG/doc/further_examples

This documentation is the DEVELOPMENT VERSION of the FURTHER EXAMPLES documentation for the module.

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
}}

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

[edit]

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 = Mixed 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
| XAxisValuePosStep = 0.5
| XAxisMarkStep = 1
| XAxisMark2Step = 0.25
| XGrid = 0.2
| YMax = 160
| YAxisValueStep = 20
| YAxisValuePosStart = 3
| YAxisMark2Step = 5
| YAxisColor = red
| 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, and the Y axis color.

{{#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.