Mall:Graph:Chart

Dokumentation

Denna mall använder sig av Modul:Graph och Extension:Graphs, som inaktiverades den 18 april 2023 på grund av tekniska problem. De erbjöd datavisualisering och baserades på en äldre version av biblioteket Vega 2 som renderar diagrammen i webbläsaren, baserat på javascript-kod. Versionen var föråldrad och svår att uppgradera, och Graph hade säkerhetsbrister relaterade till möjlig cross-site scripting (XSS).

Alternativ till Graph

Extension:Chart

Som ersättning för Graph initierade Wikimedia Foundation under sommaren 2024 utvecklingen av ett nytt diagramtillägg, vilket dokumenteras på Extension:Chart och Extension:Chart/Project. En första försöksversion aktiverades den 5 december 2024 på tre språkversioner av Wikipedia, däribland den svenskspråkiga.

Diagrammen kräver två komponenter: (1) Rådata som extraherats från Graph:Data eller konverterats från exempelvis Excel- eller CSV-format och lagras som en .tab-fil. (2) En diagramdefinition i form av en .chart-fil. Båda filtyperna är JSON-baserade och lagras i namnrymden Data: på Wikimedia Commons.

För användningsexempel, se:

Kategori:Sidor på som använder diagramtillägget på svenskspråkiga Wikipedia.
Tillgängliga .tab-filer på commons.
Tillgängliga .chart-filer på Commons.

För att halvautomatiskt konvertera gamla graph-diagram till det nya diagramtillägget kan du använda detta skript.

Det nya tillägget använder Apache ECharts som grafikmotor, men har ett eget förenklat JSON-baserat format för diagramdefinition. Diagrammen av renderas på serversidan till SVG-kod inbäddad i sidans HTML-kod, vilket möjliggör interaktiva tooltips, men undviker säkerhetsproblem.

Äldre alternativ

Äldre alternativ till Graph är istället:

{{#invoke:Chart}} (Lua-modul)
{{#invoke:Table}} (Lua-modul. Sätt output=chart)
{{Stolpdiagram}}
{{Stapeldiagram}}
{{Stapeldiagram2}}
{{Cirkeldiagram}}

Dessa genererar enklare statiska diagram på serversidan, som enbart bygger på wikitext och HTML/CSS och saknar interaktivitet. De använder inte JavaScript eller grafikmotorer.

Omdirigeringar / alternativa namn

{{Graf:Diagram}}
{{Graph:Chart}}

Försvenskningar

Mallen utgår från engelskspråkig matematisk formatering. I grundläget visar den exempelvis heltal med kommatecken (,) som tusentalsavgränsare och månadsförkortningar enligt månadsnamnen på engelska. Det går dock att försvenska detta genom följande:^[1]

Med | yAxisFormat=d slipper man kommatecken som tusentalsavgränsare.
Med | xAxisFormat=%Y-%m blir det exempelvis 2021-05 i stället för 1-May.

CSV2Chart

If you have data from a spreadsheet document (e.g. LibreOffice Calc) or in a statistics software R/R-Studio, you can export them to CSV file. The CSV file can be loaded with an v:en:AppLSAC, that is able to convert the CSV in chart for the data. The column should have headers in the first row. The column of the CSV file contain float or integer values. CSV2WikiChart was created as support tool for Wikipedia and for Wikiversity learning resources that contain data.

Exempel

Basexempel

Linjediagram (graf):

{{Graph:Chart
 | width = 450
 | height = 150
 | type = line
 | x = 1,2,3,4,5,6,7,8,9
 | y = 10,12,6,14,2,10,7,9,12
}}

Diagrammet är avstängt. Grafer inaktiverades den 18 april 2023 på grund av programvaruproblem. Nya diagram kan skapas sedan december 2024.

Note: The y-axis starts from the smallest y value, though this can be overridden with the yAxisMin parameter.

Ytdiagram:

{{Graph:Chart
 | width=400
 | height=100
 | type=area
 | x=1,2,3,4,5,6,7,8
 | y=10,12,6,14,2,10,7,9
}}

Diagrammet är avstängt. Grafer inaktiverades den 18 april 2023 på grund av programvaruproblem. Nya diagram kan skapas sedan december 2024.

Note: The y-axis starts from zero

Stapeldiagram:

{{Graph:Chart
 | width=400
 | height=100
 | xAxisTitle=The X axis
 | yAxisTitle=The Y axis
 | type=rect
 | x=1,2,3,4,5,6,7,8
 | y=10,12,6,14,2,10,7,9
}}

Diagrammet är avstängt. Grafer inaktiverades den 18 april 2023 på grund av programvaruproblem. Nya diagram kan skapas sedan december 2024.

Multipla dataserier

Linjedigrama med flera dataserier, i olika färger:

{{Graph:Chart
 | width=400
 | height=150
 | xGrid=
 | yGrid=
 | xAxisTitle=X
 | yAxisTitle=Y
 | legend=Legend
 | type=line
 | x=1,2,3,4,5,6,7,8
 | y1=10,12,6,14,2,10,7,9
 | y1Title=Y1 Series
 | y2=2,4,6,8,13,11,9,2
 | y2Title=Y2 Series
 | colors=#0000aa,#ff8000
}}

Diagrammet är avstängt. Grafer inaktiverades den 18 april 2023 på grund av programvaruproblem. Nya diagram kan skapas sedan december 2024.

Ytdiagram med mer än en dataserie, inskjuten överlappning:

{{Graph:Chart
 | width=400
 | height=100
 | xAxisTitle=X
 | yAxisTitle=Y
 | legend=Legend
 | type=area
 | x=1,2,3,4,5,6,7,8
 | y1=10,12,6,14,2,10,7,9
 | y2=2,4,6,8,13,11,9,2
 | colors=#800000aa,#80ff8000
}}

Diagrammet är avstängt. Grafer inaktiverades den 18 april 2023 på grund av programvaruproblem. Nya diagram kan skapas sedan december 2024.

Stapeldiagram med flera dataserier:

{{Graph:Chart
 | width=400
 | height=100
 | xAxisTitle=X
 | yAxisTitle=Y
 | legend=Legend
 | type=rect
 | x=1,2,3,4,5,6,7,8
 | y1=10,12,6,14,2,10,7,9
 | y2=2,4,6,8,13,11,9,2
 |colors=#800000aa,#80ff8000
}}

Diagrammet är avstängt. Grafer inaktiverades den 18 april 2023 på grund av programvaruproblem. Nya diagram kan skapas sedan december 2024.

Ytdiagram med avrundade datavärden:

{{Graph:Chart
 | width=400
 | height=150
 | xAxisTitle=X
 | yAxisTitle=Y
 | legend=Legend
 | type=stackedarea
 | x=1,2,3,4,5,6,7,8
 | y1=10,12,6,14,2,10,7,9
 | y2=2,4,6,8,13,11,9,2
 | interpolate=monotone
 | colors=seagreen, orchid
}}

Diagrammet är avstängt. Grafer inaktiverades den 18 april 2023 på grund av programvaruproblem. Nya diagram kan skapas sedan december 2024.

Stapeldiagram med kumulerade dataserier:

{{Graph:Chart
 | width=400 | height=150
 | xAxisTitle=X
 | yAxisTitle=Y
 | legend=Legend
 | type=stackedrect
 | x=1,2,3,4,5,6,7,8
 | y1=10,12,6,14,2,10,7,9
 | y2=2,4,6,8,13,11,9,2
 | y1Title=Data A
 | y2Title=Data B
 | colors=seagreen, orchid
}}

Diagrammet är avstängt. Grafer inaktiverades den 18 april 2023 på grund av programvaruproblem. Nya diagram kan skapas sedan december 2024.

Tårtdiagram

{{Graph:Chart
 | width=100
 | height=100
 | type=pie
 | legend=Letter
 | x=A,B,C,D,E,F,G,H,I
 | y1=100,200,150,300,100,100,150,50,200
}}

Diagrammet är avstängt. Grafer inaktiverades den 18 april 2023 på grund av programvaruproblem. Nya diagram kan skapas sedan december 2024.

{{Graph:Chart
 | width=100
 | height=100
 | type=pie
 | legend=Letter
 | x=A,B,C,D,E,F,G,H,I
 | y1=100,200,150,300,100,100,150,50,200
 | showValues=
}}

Diagrammet är avstängt. Grafer inaktiverades den 18 april 2023 på grund av programvaruproblem. Nya diagram kan skapas sedan december 2024.

{{Graph:Chart
 | width=100
 | height=100
 | type=pie
 | legend=Letter
 | x=A,B,C,D,E,F,G,H,I
 | y1=100,200,150,300,100,100,150,50,200
 | y2=7,8,9,8,8,9,10,9,5
 | showValues=
}}

Diagrammet är avstängt. Grafer inaktiverades den 18 april 2023 på grund av programvaruproblem. Nya diagram kan skapas sedan december 2024.

{{Graph:Chart
 | width=100
 | height=100
 | type=pie
 | innerRadius=40
 | legend=Letter
 | x=A,B,C,D,E,F,G,H,I
 | y1=100,200,150,300,100,100,150,50,200
}}

Diagrammet är avstängt. Grafer inaktiverades den 18 april 2023 på grund av programvaruproblem. Nya diagram kan skapas sedan december 2024.

Sambandsdiagram

Genom att använda en linjeplottning med linewidth=0, kan man skapa ett sambandsdiagram:

{{Graph:Chart
|width=500
|height=200
|type=line
|x=15.7,10.8,68.5,33.4,23.8,42.2,27.1,38.2,13.5,74.3
|y1=1517,970,4075,3819,2106,2919,2428,2164,1393,7603
|showSymbols=1
|linewidth=0
|yGrid= |xGrid= 
}}

Diagrammet är avstängt. Grafer inaktiverades den 18 april 2023 på grund av programvaruproblem. Nya diagram kan skapas sedan december 2024.

Användning av procent

When xAxisFormat or yAxisFormat is set to %, a percentage sign will be added to the scale of the corresponding axis.
A value of 1 equals 100%. A decimal point should be added in front of percentages between 0 and 100, for instance .25 for 25%.
Including the code | yAxisMin=0 | yAxisMax=1 will force the y axis scale to run from 0% to 100%.

{{Graph:Chart
| width = 450
| height = 350
| x = 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23
| yAxisMin = 0
| yAxisMax = 1
| yAxisFormat = %
| showSymbols = 
| y1 = , , , .43, , , , .39, .43, .38, .38, .40, .48, .54 , .42, .47, .45, .48, .44, .41, .41, .45, .46
| y2 = .40, .377, .38, , .39, .38, .419, .55, .60, .63
| y3 = .27, .311, .31, , .26, .28, .285
| y4 = {{repeat|, |7}} .40, .44, .42, .47, .44, .43, .42
}}

Diagrammet är avstängt. Grafer inaktiverades den 18 april 2023 på grund av programvaruproblem. Nya diagram kan skapas sedan december 2024.

En graf som visar värden större än 100% samt negativa värden:

{{Graph:Chart
| width = 450
| height = 350
| x = 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23
| yAxisFormat = %
| showSymbols = 
| y1 = 2, .43, 1.20, .39, .43, .0, -.38, -.20, .18, .54 , 0
}}

Diagrammet är avstängt. Grafer inaktiverades den 18 april 2023 på grund av programvaruproblem. Nya diagram kan skapas sedan december 2024.

Bildtexter

En bildtext kan infogas i samband med multipla dataserier:

{{Graph:Chart
 | width=400
 | height=150
 | xAxisTitle=X
 | yAxisTitle=Y
 | legend=Legend
 | y1Title=Blue
 | y2Title=Orange
 | type=line
 | x=1,2,3,4,5,6,7,8
 | y1=10,12,6,14,2,10,7,9
 | y2=2,4,6,8,13,11,9,2
}}

Diagrammet är avstängt. Grafer inaktiverades den 18 april 2023 på grund av programvaruproblem. Nya diagram kan skapas sedan december 2024.

Diagramtiteln kan utelämnas genom att lämna parametern tom:

{{Graph:Chart
 | width=400
 | height=150
 | xAxisTitle=X
 | yAxisTitle=Y
 | legend=
 | y1Title=Blue
 | y2Title=Orange
 | type=line
 | x=1,2,3,4,5,6,7,8
 | y1=10,12,6,14,2,10,7,9
 | y2=2,4,6,8,13,11,9,2
}}

Diagrammet är avstängt. Grafer inaktiverades den 18 april 2023 på grund av programvaruproblem. Nya diagram kan skapas sedan december 2024.

Long legend entries can look clumsy. It may be better to omit the legend parameter and use {{Legend}} (or a similar template) instead:

{{Graph:Chart
 | width=400
 | height=150
 | xAxisTitle=X
 | yAxisTitle=Y
 | colors=darkred, gold
 | type=line
 | x=1,2,3,4,5,6,7,8
 | y1=10,12,6,14,2,10,7,9
 | y2=2,4,6,8,13,11,9,2
}}
{{legend|darkred|This is a long legend entry and wouldn't look so good if it was part of the graph itself.}}
{{legend|gold|This is another fairly long entry.}}

Diagrammet är avstängt. Grafer inaktiverades den 18 april 2023 på grund av programvaruproblem. Nya diagram kan skapas sedan december 2024.

This is a long legend entry and wouldn't look so good if it was part of the graph itself.

This is another fairly long entry.

This method also allows the use of wiki formatting and the insertion of links. Graphs using the default colors need to specify the hex values in the legend templates:

#1f77b4

#ff7f0e

#2ca02c

#d62728

#9467bd

#8c564b

#e377c2

#7f7f7f

#bcbd22

#17becf

Alternatively, CSS color names (or hex values) can be specified in the graph and the legend templates.

Kommentarer

Line Chart with horizontal annotations only:

{{Graph:Chart
|hannotatonslabel=label4, label5, label6
|hannotatonsline=4, 5, 6
|linewidths=2,4,0
|showSymbols=3,3,3
|symbolsShape=triangle_up, cross, cross
|type=line
|x=0,1,2,3
|y1=0,3.342,2.3423,5.32423|y2=1,2.342,4.63,2.32423|y3=3,1.342,2.63,6.32423}}

Diagrammet är avstängt. Grafer inaktiverades den 18 april 2023 på grund av programvaruproblem. Nya diagram kan skapas sedan december 2024.

Area chart with vertical annotations only

{{Graph:Chart
|vAnnotatonsLine=1, 2, 3 
|vAnnotatonsLabel=label1, label2, label3
|colors=#ffff5ba0, #641050ff, #ffaaff00
|type=area
|x=0,1,2,3
|y3=0,3.342,2.3423,5.32423|y2=1,2.342,4.63,2.32423|y1=3,1.342,2.63,6.32423}}

Diagrammet är avstängt. Grafer inaktiverades den 18 april 2023 på grund av programvaruproblem. Nya diagram kan skapas sedan december 2024.

Presentation

Putting a Chart in an {{image frame}} allows the graph to float and text may wrap around it:

{{Image frame 
 | caption=Line chart 
 | content = {{Graph:Chart
   | width=400
   | height=150
   | type=line
   | yAxisMin = -1
   | x=1,2,3,4,5,6,7,8|y=10,12,6,14,2,10,7,9
  }} 
}}

Diagrammet är avstängt. Grafer inaktiverades den 18 april 2023 på grund av programvaruproblem. Nya diagram kan skapas sedan december 2024.

Line chart

To add a title above the chart and source links below the chart, an option is to use a chart in a {{side box}}.

{{Side box |metadata=No<!--This makes the box display on the mobile site-->
 | above = '''A graph of something'''
 | abovestyle = text-align:center
 | text = {{Graph:Chart
  |height = 150
  |width = 200
  |xAxisTitle = Year
  |xAxisAngle = -40
  |yAxisTitle = Units of something
  |yAxisMin = 0
  |type = rect
  |showValues = offset:4
  |x = 2011, 2012, 2013, 2014, 2015, 2016
  |y1 = 1326, 145, 203, 377, 639, 306
  |y2 =   ,     ,     , 226, 208, 276
  |colors = blue,grey
  }}
 | below = Caption & source links here
}}

A graph of something

Diagrammet är avstängt. Grafer inaktiverades den 18 april 2023 på grund av programvaruproblem. Nya diagram kan skapas sedan december 2024.

Caption & source links here

Referenser

^ Diskussion om lösning

Ovanstående dokumentation transkluderas från sidan ”Mall:Graph:Chart/dok”. Kategorier ska placeras på den dokumentationssidan.

[1] Diskussion om lösning

[1]