Jump to content

User:Innesw/sandbox/Module:Charts SVG/doc/further examples

From Wikipedia, the free encyclopedia
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.
Retrieved from "https://en.wikipedia.org/w/index.php?title=User:Innesw/sandbox/Module:Charts_SVG/doc/further_examples&oldid=1096886164"