Das Element <graph> ist eine seit 2015 in den Wiki-Projekten verfügbare Möglichkeit, um Grafiken – insbesondere Diagramme und Karten – innerhalb der Wiki-Seite aus Rohdaten zu erstellen.

Mittels Hilfsvorlagen dargestellt werden können:

• Säulen-/Balkendiagramme, auch gestapelt oder gruppiert
• Tortendiagramme (etwa für die Sitzverteilung bei Wahlergebnissen oder prozentuale Verteilungen)
• Liniendiagramme, auch mit auffälligen Markern
• Flächendiagramme
• Baumdiagramme / Tree Maps (zur Darstellung hierarchischer Strukturen)
• Streudiagramme
• Schlagwortwolken
• Beliebige Konturen und Teilgebiete darauf, z. B. für:
  • Landkarten, spezifiziert im TopoJSON-Format (siehe z. B. Datenquelle Modul:Graph/WorldMap-iso2.json für Staaten) mit Unterstützung diverser kartografischer Projektionen
• interaktive Diagramme, siehe mw:Extension:Graph/Demo/HistoricalFertilityRates

• Direkt in enzyklopädische Artikel sollten derartige Konstrukte besser nicht hineingeschrieben werden; erst recht nicht in Pixel umgerechnet.
• Vielmehr ist eine Einbindung geeigneter Strukturen mit aktuellen Anwendungsdaten in Vorlagensyntax ratsam.
• Für die Realisierung dahinter ist ob der Komplexität allerdings keine Vorlagenprogrammierung mehr zu empfehlen.
• Die Aufbereitung der strukturierten Daten sollte stattdessen mittels Lua erfolgen.
  • Mit der Bibliotheksfunktion mw.text.jsonEncode() ist es dann auch möglich, die in Lua erarbeitete table direkt in ein JSON-Objekt zu konvertieren, das dann über ein <graph>-Tag dargestellt werden kann.

Zusammengefasst: Eine direkte Einbindung von Grafikdaten unmittelbar in Artikel ist somit weder zu empfehlen noch in größerem Umfang zu erwarten.

• Die grafischen Informationen sind recht umfangreich. Statt rein grafische Detailinformationen auf Wikiseiten auszubreiten, sollten besser echte Grafiken (möglichst als SVG) extern erstellt und hochgeladen werden, die dann klassisch als Bilder in Artikel eingebunden werden.
• Enzyklopädische Informationen (Anwendungsdaten aus der realen Welt) sind ansonsten an Vorlagen zu übergeben, die daraus die entsprechenden Diagramme generieren.

Die grafischen Daten werden als JSON-Objekt vereinbart. Inhaltlich wird die Struktur durch das Paket Vega vorgegeben.

Die JSON-Spezifikation wird in <graph>…</graph> eingeschlossen.

Die Daten werden an den Browser übertragen, der daraus die Grafik erstellt. Browser mit deaktiviertem JavaScript stellen keine Grafik dar.

Auswahl aus der Vega-Syntax (mehr):

axes

Array aus Objekten für x und y; Koordinatenachsen

• type
• scale

data

Array aus Objekten; Vereinbarung von Zahlenwerten oder Textelementen, auf die andere Komponenten dann zugreifen können

• name
• values

height

Integer; Höhe in Pixeln auf der Wiki-Seite

legends

Array

marks

Array; die eigentlich sichtbaren geometrischen Objekte

• type
• from
• properties

padding

[Number | Object | String]

top

left

bottom

right

scales

Array aus Objekten für x und y; Koordinatentransformationen

• name: "x"
• type
• range
• domain

width

Integer; Breite in Pixeln auf der Wiki-Seite

• mw:Extension:Graph/Demo

Mittels der Vorlagen {{Graph:Chart}}, {{Graph:Lines}} und {{Graph:Stacked}} können eigene Diagramme erzeugt werden, und {{Graph:Map}} hilft bei der Erstellung von eigenen Datenkarten, basierend auf vorhandenen Referenzkarten. {{WikidataChart}} stellt Wikidata-Daten mit Hilfe von Graph:Chart grafisch dar.

Die folgenden Teilabschnitte beschreiben die Vorgehensweise, falls Grafiken, die von diesen Vorlagen nicht unterstützt werden, erstellt werden sollen.

In der technischen Dokumentation wird darauf verwiesen, dass das händische Editieren von Daten für die Darstellung mittels <graph> fehleranfällig ist und es wird die Nutzung vom Vega Live Editor empfohlen, der beispielsweise auf http://trifacta.github.io/vega/editor/ erreichbar ist.^[1]

Um dessen Möglichkeiten zu erkunden, ist folgender Weg sinnvoll:

Nach dem Aufruf des Vega Live Editors finden sich oben im Fenster Bedienelemente, die zunächst folgende Beschriftungen haben:

Vega Custom Format Parse Visualization Renderer Canvas

Hinter Custom verbirgt sich eine Auswahlliste, die verschiedene Fähigkeiten von Vega präsentiert. Wähle also eine davon aus, beispielsweise bar und es erscheint im rechten Teil des Bildschirms ein Graph, der die Daten, die links dargestellt sind, präsentiert.

Um nun eigene Graphen zu erstellen, können die Daten auf der linken Seite manipuliert werden. Ein Klick auf die Schaltfläche Parse am oberen Rand sorgt dafür, dass der Graph auf der rechten Seite aktualisiert wird.

Der auf diese Weise erstellte Code für einen Graphen kann/sollte vor dem Einfügen in die Wikipedia noch überprüft werden (Entwickler sprechen vom Validieren). Dazu kann er auf der Website jsonlint.com eingefügt und mittels Validate auf formale Fehler überprüft werden.

Alternativ kann auch Spezial:GraphSandbox verwendet werden.

Alternativ können auch die Funktionen des Modul:Graph genutzt werden, deren Parameter identisch sind zu den Vorlagen GraphChart und GraphMap, um ein JSON-Objekt zu erzeugen. So würde {{#invoke:Graph|chart|type=area|x=1,2,3,4|y=8, 10, 2, 7}} (beispielsweise auf Spezial:Vorlagen expandieren eingegeben) ein Flächendiagramm mit vier Punkten zurückgeben.

Es gibt die Kategorie:Wikipedia:Seite mit Grafikfehlern, in die vom System Seiten mit falscher Definition eingeordnet werden (zurzeit: 0).

Außerdem gibt es eine zeitweilig erforderliche Kategorie:Wikipedia:Seite mit Grafikproblem (obsolete Syntax).

• Graph ist ein modernerer und mutmaßlich robusterer Ersatz für Hilfe:Zeitleisten (EasyTimeline).
• Inline SVG hatte sich nicht durchgesetzt; auch nicht Graphviz mittels mw:Extension:GraphViz, das nur Objektbeziehungen visualisiert, aber nicht beliebige Grafiken erstellen kann.

MediaWiki: Extension:Graph – Freie Wikisoftware (englisch)

• Spezial:GraphSandbox – Spielwiese für Graphen
• #MediaWiki-extensions-Graph
• Hilfe:Graph/VisualEditor – Beschreibung für die Bedienoberfläche VisualEditor
• Alle lokalen Einbindungen des graph-Elements
• Hilfe:Kartographer – interaktive Landkarten

Extern

• vega/vega/wiki – Wiki der Entwickler von Vega auf GitHub mit ausführlicher Dokumentation der Syntax (englisch)

1. ↑ “Editing JSON by hand is fiddly and prone to error, so you should use a JSON checker such as JSONLint or a JSON formatter such as https://jsonformatter.org or the Vega Live Editor to edit the JSON before you copy and paste it into the wiki page.” (Extension:Graph/Demo)