თარგი:Line chart

[ხილვა] [რედაქტირება] [ისტორია] [განახლება]

ამ თარგით შეგიძლიათ შექმნათ ხაზოვანი დიაგრამები, რომლის შესაძლებლობებია:

Maximum number of data series: 10
Maximum number of x-values: 25

It is based on the extension EasyTimeline and has been copied from fr:Modèle:Graphique polygonal.

Syntax

{{Line chart
 | padding_top              = 
 | padding_bottom           = 
 | padding_right            = 
 | padding_left             = 
 | width                    = 
 | height                   = 
 | number_of_x-values       = 
 | y_max                    = 
 | y_min                    =
 | number_of_series         = 
 | color_background         = 
 | scale                    = 
 | color_primary_scale      = 
 | color_secondary_scale    = 
 | interval_primary_scale   = 
 | interval_secondary_scale = 
 | color_series_1           = 
 | ...
 | color_series_10          = 
 | label_x1                 = 
 | ...
 | label_x25                = 
 | S01V01                   = 
 | ...
 | S01V25                   = 
 | S02V01                   = 
 | ...
 | S02V25                   = 
 | ...
 | S10V01                   = 
 | ...
 | S10V25                   = 
}}

Parameters

Layout parameters

The following parameters are optional:

width: width in pixels of the chart (default: 500)
height: height in pixels of the chart (default: 350)
padding_top: margin in pixels between the top of the image and the top of the drawing area (default: 10)
padding_bottom: margin in pixels between the bottom of the image and the bottom of the drawing area (default: 20)
padding_right: margin in pixels between the right of the image and the right of the drawing area (default: 10)
padding_left: margin in pixels between the left of the image and the left of the drawing area (default: 30)

Form and color parameters

The following parameters are optional:

color_background: Background color (default: white).
color_primary_scale: Color of the primary lines of the ordinate scale (default: dark gray).
color_secondary_scale: Color of the secondary lines of the ordinate scale (default: light gray).
color_series_1 to color_series_10: Color of each line of data series (default: red, blue, green, yelloworange, purple, magenta, orange, lavender, powderblue, brightgreen).
thickness_series1 to thickness_series10 : Thickness of each line of data series, from 0.1 (very thin) to 10 (very thick). Default: 0.8

Color can be described with one of the keywords listed in the EasyTimeline documentation, or in the format rgb(red,green,blue), where red, green and blue are values from 0 to 1. Refer to the documentation to convert web colors into this format.

Data series parameters

SaaVxx: Value xx (from 01 to 25) of the series aa (from 01 to 10). The subsequent value must be between 0 and the parameter y_max (see below).
- Example: S05V01 = 25 means: "The first value (at x-axis position 01) of the fifth series (05) is 25".
- Note: X-axis values may be omitted. For example, if values for S01V01 and S01V03 are provided, but not for S01V02, a direct line between the x-axis value at 1 and at 3 is drawn.
points: Determines whether points symbolizing the x-axis value of the data are to be added to the graph. points = yes means that such points are added for all data series. All other values of the parameter are ignored.

Axis parameters

interval_primary_scale: Interval between each principal subdivision of the y-axis. Mandatory.
interval_secondary_scale: Interval between each secondary subdivision of the y-axis (if the parameter scale is given a value of yes).
number_of_x-values : number of values on the x-axis. Mandatory.
label_x1 to label_x25: the labels (text) of the x-axis values. The number of these parameters that is set must be equal to the value number_of_x-values. Default value: a number between 1 and 25.
y_max : Maximum value on the y-axis. Mandatory.
y_min : Minimum value on the y-axis. Default is zero.

Example

The following code:

{{Line chart
| color_background = white
| width = 500
| height = 350
| padding_left = 40
| padding_right = 15
| padding_top = 10
| padding_bottom = 20
| number_of_series = 3
| number_of_x-values = 10 
| label_x1 = Val. 1 | label_x2 = Val. 2 | label_x3 = Val. 3 | label_x4 = Val. 4 | label_x5 = Val. 5
| label_x6 = Val. 6 | label_x7 = Val. 7 | label_x8 = Val. 8 | label_x9 = Val. 9 | label_x10 = Val. 10
| y_max = 3000
| y_min = 1000
| scale = yes
| interval_primary_scale = 1000
| interval_secondary_scale = 100
| S01V02 = 2200 | S01V03 = 2400 | S01V04 = 2500 | S01V05 = 2600 | S01V06 = 2500
| S02V01 = 1400 | S02V02 = 2000 | S02V03 = 1600 | S02V04 = 1800 | S02V05 = 2400 
| S02V06 = 2400 | S02V07 = 2500 | S02V08 = 2000 | S02V09 = 1600 | S02V10 = 1800
| S03V01 = 1800 | S03V04 = 2000 | S03V05 = 1600 | S03V06 = 1800 | S03V07 = 2400 
| S03V09 = 2400
| points = yes
}}
{{legend|red|Series 1}}
{{legend|blue|Series 2}}
{{legend|green|series 3}}

renders:
<timeline> ImageSize = width:500 height:350 PlotArea = left:40 right:15 top:10 bottom:20 TimeAxis = orientation:vertical AlignBars = justify DateFormat = x.y Colors =

 id:scaleprin   value:gray(0.3)
 id:scalesec    value:gray(0.8)  
 id:fond        value:white
 id:serie1      value:red
 id:serie2      value:blue
 id:serie3      value:green
 id:serie4      value:yelloworange
 id:serie5      value:purple
 id:serie6      value:magenta
 id:serie7      value:orange
 id:serie8      value:lavender
 id:serie9      value:powderblue
 id:serie10     value:brightgreen

Period = from:1000 till:3000 ScaleMajor = increment:1000 start:1000 gridcolor:scaleprin ScaleMinor = increment:100 start:1000 gridcolor:scalesec BackgroundColors = canvas:fond

BarData=

 bar:data1 text:Val. 1
 bar:data2 text:Val. 2
 bar:data3 text:Val. 3
 bar:data4 text:Val. 4
 bar:data5 text:Val. 5
 bar:data6 text:Val. 6
 bar:data7 text:Val. 7
 bar:data8 text:Val. 8
 bar:data9 text:Val. 9
 bar:data10 text:Val. 10

DEFINITION DES ABSCISSES
La première est confondue avec l'axe donc le pas "1" correspond à la seconde valeur
On fait des variables pour plus de lisibilité

Define $x1 = 40 Define $x2 = 89 Define $x3 = 138 Define $x4 = 188 Define $x5 = 237 Define $x6 = 287 Define $x7 = 336 Define $x8 = 386 Define $x9 = 435 Define $x10 = 485 Define $x11 = 534 Define $x12 = 583 Define $x13 = 633 Define $x14 = 682 Define $x15 = 732 Define $x16 = 781 Define $x17 = 831 Define $x18 = 880 Define $x19 = 930 Define $x20 = 979 Define $x21 = 1028 Define $x22 = 1078 Define $x23 = 1127 Define $x24 = 1177 Define $x25 = 1226

Define $xp1d = 38 Define $xp2d = 87 Define $xp3d = 136 Define $xp4d = 186 Define $xp5d = 235 Define $xp6d = 285 Define $xp7d = 334 Define $xp8d = 384 Define $xp9d = 433 Define $xp10d = 483 Define $xp11d = 532 Define $xp12d = 581 Define $xp13d = 631 Define $xp14d = 680 Define $xp15d = 730 Define $xp16d = 779 Define $xp17d = 829 Define $xp18d = 878 Define $xp19d = 928 Define $xp20d = 977 Define $xp21d = 1026 Define $xp22d = 1076 Define $xp23d = 1125 Define $xp24d = 1175 Define $xp25d = 1224

Define $xp1f = 42 Define $xp2f = 91 Define $xp3f = 140 Define $xp4f = 190 Define $xp5f = 239 Define $xp6f = 289 Define $xp7f = 338 Define $xp8f = 388 Define $xp9f = 437 Define $xp10f = 487 Define $xp11f = 536 Define $xp12f = 585 Define $xp13f = 635 Define $xp14f = 684 Define $xp15f = 734 Define $xp16f = 783 Define $xp17f = 833 Define $xp18f = 882 Define $xp19f = 932 Define $xp20f = 981 Define $xp21f = 1030 Define $xp22f = 1080 Define $xp23f = 1129 Define $xp24f = 1179 Define $xp25f = 1228

Dimensionnement des curseurs d'abscisse

Define $ycurdeb = 17 Define $ycurfin = 22

Ordonnées series 1

Define $yS01V01 = -140 Define $yS01V02 = 212 Define $yS01V03 = 244 Define $yS01V04 = 260 Define $yS01V05 = 276 Define $yS01V06 = 260 Define $yS01V07 = -140 Define $yS01V08 = -140 Define $yS01V09 = -140 Define $yS01V10 = -140 Define $yS01V11 = -140 Define $yS01V12 = -140 Define $yS01V13 = -140 Define $yS01V14 = -140 Define $yS01V15 = -140 Define $yS01V16 = -140 Define $yS01V17 = -140 Define $yS01V18 = -140 Define $yS01V19 = -140 Define $yS01V20 = -140 Define $yS01V21 = -140 Define $yS01V22 = -140 Define $yS01V23 = -140 Define $yS01V24 = -140 Define $yS01V25 = -140

Ordonnées series 2

Define $yS02V01 = 84 Define $yS02V02 = 180 Define $yS02V03 = 116 Define $yS02V04 = 148 Define $yS02V05 = 244 Define $yS02V06 = 244 Define $yS02V07 = 260 Define $yS02V08 = 180 Define $yS02V09 = 116 Define $yS02V10 = 148 Define $yS02V11 = -140 Define $yS02V12 = -140 Define $yS02V13 = -140 Define $yS02V14 = -140 Define $yS02V15 = -140 Define $yS02V16 = -140 Define $yS02V17 = -140 Define $yS02V18 = -140 Define $yS02V19 = -140 Define $yS02V20 = -140 Define $yS02V21 = -140 Define $yS02V22 = -140 Define $yS02V23 = -140 Define $yS02V24 = -140 Define $yS02V25 = -140

Ordonnées series 3

Define $yS03V01 = 148 Define $yS03V02 = -140 Define $yS03V03 = -140 Define $yS03V04 = 180 Define $yS03V05 = 116 Define $yS03V06 = 148 Define $yS03V07 = 244 Define $yS03V08 = -140 Define $yS03V09 = 244 Define $yS03V10 = -140 Define $yS03V11 = -140 Define $yS03V12 = -140 Define $yS03V13 = -140 Define $yS03V14 = -140 Define $yS03V15 = -140 Define $yS03V16 = -140 Define $yS03V17 = -140 Define $yS03V18 = -140 Define $yS03V19 = -140 Define $yS03V20 = -140 Define $yS03V21 = -140 Define $yS03V22 = -140 Define $yS03V23 = -140 Define $yS03V24 = -140 Define $yS03V25 = -140

Ordonnées series 4

Ordonnées series 5

Ordonnées series 6

Ordonnées series 7

Ordonnées series 8

Ordonnées series 9

Ordonnées series 10

Les curseurs d'axe x (EasyTimeline ne permettant pas de les intégrer)

LineData =

 color:black  layer:back
 width:0.1
 points:($x2, $ycurdeb)($x2, $ycurfin)
 points:($x3, $ycurdeb)($x3, $ycurfin)
 points:($x4, $ycurdeb)($x4, $ycurfin)
 points:($x5, $ycurdeb)($x5, $ycurfin)
 points:($x6, $ycurdeb)($x6, $ycurfin)
 points:($x7, $ycurdeb)($x7, $ycurfin)
 points:($x8, $ycurdeb)($x8, $ycurfin)
 points:($x9, $ycurdeb)($x9, $ycurfin)
 points:($x10, $ycurdeb)($x10, $ycurfin)

LineData =

 color:serie1
   layer:front
   width:0.5
   
   points:($x2,$yS01V02)($x3,$yS01V03)
   points:($x3,$yS01V03)($x4,$yS01V04)
   points:($x4,$yS01V04)($x5,$yS01V05)
   points:($x5,$yS01V05)($x6,$yS01V06)
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   width:5
   
   points:($xp2d,$yS01V02)($xp2f,$yS01V02)
   points:($xp3d,$yS01V03)($xp3f,$yS01V03)
   points:($xp4d,$yS01V04)($xp4f,$yS01V04)
   points:($xp5d,$yS01V05)($xp5f,$yS01V05)
   points:($xp6d,$yS01V06)($xp6f,$yS01V06)

LineData =

 color:serie2
   layer:front
   width:0.5
   points:($x1,$yS02V01)($x2,$yS02V02)
   points:($x2,$yS02V02)($x3,$yS02V03)
   points:($x3,$yS02V03)($x4,$yS02V04)
   points:($x4,$yS02V04)($x5,$yS02V05)
   points:($x5,$yS02V05)($x6,$yS02V06)
   points:($x6,$yS02V06)($x7,$yS02V07)
   points:($x7,$yS02V07)($x8,$yS02V08)
   points:($x8,$yS02V08)($x9,$yS02V09)
   points:($x9,$yS02V09)($x10,$yS02V10)
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   width:5
   points:($xp1d,$yS02V01)($xp1f,$yS02V01)
   points:($xp2d,$yS02V02)($xp2f,$yS02V02)
   points:($xp3d,$yS02V03)($xp3f,$yS02V03)
   points:($xp4d,$yS02V04)($xp4f,$yS02V04)
   points:($xp5d,$yS02V05)($xp5f,$yS02V05)
   points:($xp6d,$yS02V06)($xp6f,$yS02V06)
   points:($xp7d,$yS02V07)($xp7f,$yS02V07)
   points:($xp8d,$yS02V08)($xp8f,$yS02V08)
   points:($xp9d,$yS02V09)($xp9f,$yS02V09)
   points:($xp10d,$yS02V10)($xp10f,$yS02V10)

LineData =

 color:serie3
   layer:front
   width:0.5
   points:($x1,$yS03V01)($x4,$yS03V04)
   
   
   points:($x4,$yS03V04)($x5,$yS03V05)
   points:($x5,$yS03V05)($x6,$yS03V06)
   points:($x6,$yS03V06)($x7,$yS03V07)
   points:($x7,$yS03V07)($x9,$yS03V09)
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   width:5
   points:($xp1d,$yS03V01)($xp1f,$yS03V01)
   
   
   points:($xp4d,$yS03V04)($xp4f,$yS03V04)
   points:($xp5d,$yS03V05)($xp5f,$yS03V05)
   points:($xp6d,$yS03V06)($xp6f,$yS03V06)
   points:($xp7d,$yS03V07)($xp7f,$yS03V07)
   
   points:($xp9d,$yS03V09)($xp9f,$yS03V09)

</timeline>

Series 1

Series 2

Series 3

Limitations

The magic word formatnum cannot be used to format the x-axis values.
There is no alternate text for accessibility purposes.