Extension:Graph/fr

**Manuel des extensions MediaWiki**
File:OOjs UI icon advanced-invert.svg Graph; État de la version : non-maintenu
Implémentation	Balise, ContentHandler
Description	Graphes contrôlés par les données
Auteur(s)	Yuri Astrakhan (Yurik talk),; Dan Andreescu,; Frédéric Bolduc;
MediaWiki
Licence	Aucune licence spécifiée
Téléchargement	<translate> Download extension</translate> ; <translate> Git</translate> [?]: <translate> Download Git master</translate>; <translate> browse repository</translate> (Phabricator · GitHub); <translate> commit history</translate>; <translate> repository contributors (GitHub)</translate>; <translate> code review</translate>;
Téléchargements trimestriels	Lua error in Module:Extension at line 172: bad argument #1 to 'inNamespace' (unrecognized namespace name 'skin').
Utilisé par les wikis publics	Lua error in Module:Extension at line 172: bad argument #1 to 'inNamespace' (unrecognized namespace name 'skin').
	Traduire l’extension Graph sur translatewiki.net si elle y est disponible
Problèmes	Tâches ouvertes · Signaler un bogue

L'extension Graph permet, au moyen de la balise ‎<graph>, la description de graphiques comme les diagrammes en barre, les camemberts, les frises chronologiques et les histogrammes (voir les démonstrations), dans un format JSON utilisé pour afficher un graphique basé sur la grammaire de visualisation Vega.

Informations générales

L'extension Graph permet d'intégrer dans les pages wiki des graphiques puissants basés sur la grammaire Vega. Les graphiques peuvent aussi bien être interactifs.

Le moyen le plus simple pour intégrer un graphique est d'utiliser un modèle tout prêt comme {{Graph:Chart}}. Ces modèles dissimulent toutes les complexités de Vega. Les utilisateurs avancés peuvent utiliser le bac à sable de Graph pour développer leurs graphiques. Le bac à sable de Graph permet d'utiliser la syntaxe du modèle wiki et JSON. L'extension s'intègre avec VisualEditor et fournit ainsi un outil et un assistant simple pour générer les graphiques de base, en entrant les valeurs directement dans l'éditeur.

Liens utiles

Documentation Vega 2 – pages de documentation Vega 2 restaurées sur nyurik/vega/wiki.
Guide - Recommandations générales sur la façon d'utiliser les graphiques dans un Wiki.
Tutoriel interactif -Instructions étape par étape pour construire un graphique interactif complexe à partir de zéro.
Page de démo - pour de nombreux exemples et astuces d'utilisation.
TechTalk Video - une discussion technique de la WMF à propos de l'extension Graph, comprenant une grande démonstration de l'éditeur Lyra (également installé sur labs).
Pour découvrir quelques fonctionnalités à venir de Vega (Keynote de Jeffrey Heer).
Vega pour les développeurs - meilleur emplacement des ressources Vega
Migrer vers Vega 2.0
Vidéo d'introduction à Vega interactif

Installation

Requiert l'extension JsonConfig
<translate> [[<tvar name=2>Special:ExtensionDistributor/Graph/fr</tvar>|Download]] and move the extracted <tvar name=name>Graph/fr</tvar> folder to your <tvar name=ext>extensions/</tvar> directory.</translate>
<translate> Developers and code contributors should install the extension [[<tvar name=git>Special:MyLanguage/Download from Git</tvar>|from Git]] instead, using:</translate>cd extensions/ git clone https://gerrit.wikimedia.org/r/mediawiki/extensions/Graph%2Ffr
<translate> Add the following code at the bottom of your <tvar name=1>LocalSettings.php </tvar> file:</translate>
```
wfLoadExtension( 'Graph/fr' );
```
File:OOjs UI icon check-constructive.svg <translate> Done</translate> – <translate> Navigate to <tvar name=special>Special:Version</tvar> on your wiki to verify that the extension is successfully installed.</translate>

<translate> Vagrant installation:</translate>

<translate> If using <tvar name=vagrant>Vagrant </tvar>, install with <tvar name=code>vagrant roles enable graph --provision</tvar></translate>

Paramètres de configuration supplémentaires

Si vous envisagez de répliquer un environnement de production tel que en.wiki vous devrez réaliser les étapes suivantes :

Installez Scribunto , Imagemap et TemplateStyles , et autorisez les téléversements SVG
- si vous employez Vagrant, vous pouvez utiliser vagrant roles enable --provision scribunto imagemap templatestyles svg
Importez de mediawiki.org : Module:Graph, Module:Graph/doc, Template:Nowrap et Template:Nowrap/styles.css (lien d'export)
Importez de la Wikipedia anglophone Module:Chart et Module:Chart/Default colors (lien d'export)
importez le fichier File:Circle_frame.svg

Débogage des graphiques et portage des graphes de Vega 2 vers Vega 5

Un bac à sable est fourni sur Special:GraphSandbox; il fonctionne de manière similaire à l'éditeur graphique Vega. L'outil MediaWiki comprend le code compatible qui fait correspondre les anciens schémas Vega à la version active actuellement. L'insertion d'un ancien schéma dans la zone textuelle principale affiche le schéma modifié et modernisé en-dessous du graphique lorsque c'est possible.

Similaire à vega.github.io/editor, l'objet Vega peut être inspecté avec le JavaScript global VEGA_DEBUG. Voir le guide de débogage de Vega pour son utilisation.

Migration des schémas à partir des anciennes versions de Vega

Initialement, Graph prenait en charge Vega 2. Vous pouvez coller le code JSON des graphiques dans http://vega.github.io/vega-editor/?mode=vega pour voir la manière dont ils étaient rendus, en comparaison avec Vega 5.

Special:GraphSandbox (pour le code le plus récent, voir la version bêta de grappe du bac à sable) peut être utilisé pour faire correspondre les anciens schémas aux nouveaux. Copiez l'ancien schéma dans la zone textuelle principale et le schéma mis à jour apparaîtra dans la zone de texte sous le graphique. Copiez le nouveau schéma dans votre code.

Exemples de diagrammes

Voir la page de démonstration pour plus d'exemples et d'astuces d'utilisation.

<graph fallback="" fallbackWidth="">{"legends":[],"scales":[{"type":"band","name":"x","domain":{"data":"chart","field":"x"},"padding":0.2,"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"chart","field":"y"},"zero":true,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":{"scheme":"category10"}}],"marks":[{"encode":{"hover":{"fill":{"value":"red"}},"update":{"fill":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"y2":{"scale":"y","value":0},"width":{"scale":"x","offset":-1,"band":true},"fill":{"scale":"color","field":"series"}}},"type":"rect","from":{"data":"chart"}}],"data":[{"transform":[],"format":{"parse":{"y":"number","x":"number"},"type":"json"},"name":"chart","values":[{"y":10,"series":"y","index":1,"x":1},{"y":12,"series":"y","index":1,"x":2},{"y":6,"series":"y","index":1,"x":3},{"y":14,"series":"y","index":1,"x":4},{"y":2,"series":"y","index":1,"x":5},{"y":10,"series":"y","index":1,"x":6},{"y":7,"series":"y","index":1,"x":7},{"y":9,"series":"y","index":1,"x":8}]}],"height":100,"axes":[{"orient":"bottom","title":"X","encode":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"scale":"x","format":"d","tickMinStep":1,"grid":false},{"orient":"left","encode":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"title":"Y","tickCount":8,"scale":"y","format":"d","tickMinStep":1,"grid":false}],"$schema":"https://vega.github.io/schema/vega/v5.json","width":400} </graph> <graph fallback="" fallbackWidth="">{"legends":[{"orient":"top-right","title":"Légende","labelColor":"#54595d","stroke":"color","titleColor":"#54595d","fill":"color"}],"scales":[{"domain":{"data":"chart","field":"x"},"type":"ordinal","name":"color","range":{"scheme":"category10"}},{"range":[0,50],"type":"linear","name":"r","domain":{"data":"chart","field":"r"}}],"marks":[{"encode":{"enter":{"y":{"value":50},"x":{"value":50},"fill":{"scale":"color","field":"x"}},"update":{"endAngle":{"field":"endAngle"},"innerRadius":{"value":0},"outerRadius":{"scale":"r","value":50,"field":"r"},"startAngle":{"field":"startAngle"},"stroke":{"value":"white"},"fill":{"scale":"color","field":"x"},"strokeWidth":{"value":1}},"hover":{"fill":{"value":"red"}}},"type":"arc","from":{"data":"chart"}},{"encode":{"enter":{"theta":{"signal":"(datum.startAngle + datum.endAngle)/2"},"baseline":{"value":"middle"},"align":{"value":"center"},"text":{"field":"y"},"y":{"value":50},"x":{"value":50},"fontSize":{"value":5},"angle":{"mult":57.29577951308232,"field":"layout_mid"},"radius":{"scale":"r","offset":-15,"field":"r"},"fill":{"value":"white"}}},"type":"text","from":{"data":"chart"}}],"data":[{"transform":[{"type":"pie","field":"y"}],"format":{"parse":{"y":"number","x":"string","r":"number"},"type":"json"},"name":"chart","values":[{"y":100,"x":"A","r":7},{"y":200,"x":"B","r":8},{"y":150,"x":"C","r":9},{"y":300,"x":"D","r":8},{"y":100,"x":"E","r":8},{"y":100,"x":"F","r":9},{"y":150,"x":"G","r":10},{"y":50,"x":"H","r":9},{"y":200,"x":"I","r":5}]}],"height":100,"axes":[],"$schema":"https://vega.github.io/schema/vega/v5.json","width":200} </graph> <graph fallback="" fallbackWidth="">{"legends":[{"title":"Légende","labelColor":"#54595d","stroke":"color","titleColor":"#54595d","fill":"color"}],"scales":[{"type":"linear","name":"x","domain":{"data":"chart","field":"x"},"zero":false,"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"chart","field":"y1"},"zero":true,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":["seagreen","orchid"]}],"marks":[{"type":"group","marks":[{"encode":{"hover":{"fill":{"value":"red"}},"update":{"fill":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y1"},"interpolate":{"value":"monotone"},"y2":{"scale":"y","field":"y0"},"x":{"scale":"x","field":"x"},"fill":{"scale":"color","field":"series"}}},"type":"area","from":{"data":"facet"}}],"from":{"facet":{"name":"facet","data":"chart","groupby":"series"}}}],"data":[{"transform":[{"field":"y","type":"stack","sort":{"field":"index"},"groupby":["x"]}],"format":{"parse":{"y":"number","x":"number"},"type":"json"},"name":"chart","values":[{"y":10,"series":"y1","index":1,"x":1},{"y":12,"series":"y1","index":1,"x":2},{"y":6,"series":"y1","index":1,"x":3},{"y":14,"series":"y1","index":1,"x":4},{"y":2,"series":"y1","index":1,"x":5},{"y":10,"series":"y1","index":1,"x":6},{"y":2,"series":"y2","index":2,"x":1},{"y":4,"series":"y2","index":2,"x":2},{"y":6,"series":"y2","index":2,"x":3},{"y":8,"series":"y2","index":2,"x":4},{"y":13,"series":"y2","index":2,"x":5},{"y":11,"series":"y2","index":2,"x":6}]}],"height":100,"axes":[{"orient":"bottom","title":"X","encode":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"scale":"x","format":"d","tickMinStep":1,"grid":false},{"orient":"left","encode":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"title":"Y","tickCount":8,"scale":"y","format":"d","tickMinStep":1,"grid":false}],"$schema":"https://vega.github.io/schema/vega/v5.json","width":400} </graph>

<graph mode=interactive title="Historical Fertility Rates"> {

   "$schema": "https://vega.github.io/schema/vega/v5.json",
   "description": "An interactive scatter plot of global health statistics by country and year.",
   "width": 800,
   "height": 600,
   "padding": 5,
 
   "data": [
     {
       "name": "gapminder",
       "url": "https://www.mediawiki.org/wiki/Extension:Graph/data/gapminder-json?action=raw"
     },
     {
       "name": "clusters",
       "values": [
         {"id": 0, "name": "South Asia"},
         {"id": 1, "name": "Europe & Central Asia"},
         {"id": 2, "name": "Sub-Saharan Africa"},
         {"id": 3, "name": "America"},
         {"id": 4, "name": "East Asia & Pacific"},
         {"id": 5, "name": "Middle East & North Africa"}
       ]
     },
     {
       "name": "country_timeline",
       "source": "gapminder",
       "transform": [
         {"type": "filter", "expr": "timeline && datum.country == timeline.country"},
         {"type": "collect", "sort": {"field": "year"}}
       ]
     },
     {
       "name": "thisYear",
       "source": "gapminder",
       "transform": [
         {"type": "filter", "expr": "datum.year == currentYear"}
       ]
     },
     {
       "name": "prevYear",
       "source": "gapminder",
       "transform": [
         {"type": "filter", "expr": "datum.year == currentYear - stepYear"}
       ]
     },
     {
       "name": "nextYear",
       "source": "gapminder",
       "transform": [
         {"type": "filter", "expr": "datum.year == currentYear + stepYear"}
       ]
     },
     {
       "name": "countries",
       "source": "gapminder",
       "transform": [
         {"type": "aggregate", "groupby": ["country"]}
       ]
     },
     {
       "name": "interpolate",
       "source": "countries",
       "transform": [
         {
           "type": "lookup",
           "from": "thisYear", "key": "country",
           "fields": ["country"], "as": ["this"],
           "default": {}
         },
         {
           "type": "lookup",
           "from": "prevYear", "key": "country",
           "fields": ["country"], "as": ["prev"],
           "default": {}
         },
         {
           "type": "lookup",
           "from": "nextYear", "key": "country",
           "fields": ["country"], "as": ["next"],
           "default": {}
         },
         {
           "type": "formula",
           "as": "target_fertility",
           "expr": "interYear > currentYear ? datum.next.fertility : (datum.prev.fertility||datum.this.fertility)"
         },
         {
           "type": "formula",
           "as": "target_life_expect",
           "expr": "interYear > currentYear ? datum.next.life_expect : (datum.prev.life_expect||datum.this.life_expect)"
         },
         {
           "type": "formula",
           "as": "inter_fertility",
           "expr": "interYear==2000 ? datum.this.fertility : datum.this.fertility + (datum.target_fertility-datum.this.fertility) * abs(interYear-datum.this.year)/5"
         },
         {
           "type": "formula",
           "as": "inter_life_expect",
           "expr": "interYear==2000 ? datum.this.life_expect : datum.this.life_expect + (datum.target_life_expect-datum.this.life_expect) * abs(interYear-datum.this.year)/5"
         }
       ]
     },
     {
       "name": "trackCountries",
       "on": [
         {"trigger": "active", "toggle": "{country: active.country}"}
       ]
     }
   ],
 
   "signals": [
     { "name": "minYear", "value": 1955 },
     { "name": "maxYear", "value": 2005 },
     { "name": "stepYear", "value": 5 },
     {
       "name": "active",
       "value": {},
       "on": [
         {"events": "@point:mousedown, @point:touchstart", "update": "datum"},
         {"events": "window:mouseup, window:touchend", "update": "{}"}
       ]
     },
     { "name": "isActive", "update": "active.country" },
     {
       "name": "timeline",
       "value": {},
       "on": [
         {"events": "@point:mouseover", "update": "isActive ? active : datum"},
         {"events": "@point:mouseout", "update": "active"},
         {"events": {"signal": "active"}, "update": "active"}
       ]
     },
     {
       "name": "tX",
       "on": [{
         "events": "mousemove!, touchmove!",
         "update": "isActive ? scale('x', active.this.fertility) : tX"
       }]
     },
     {
       "name": "tY",
       "on": [{
         "events": "mousemove, touchmove",
         "update": "isActive ? scale('y', active.this.life_expect) : tY"
       }]
     },
     {
       "name": "pX",
       "on": [{
         "events": "mousemove, touchmove",
         "update": "isActive ? scale('x', active.prev.fertility) : pX"
       }]
     },
     {
       "name": "pY",
       "on": [{
         "events": "mousemove, touchmove",
         "update": "isActive ? scale('y', active.prev.life_expect) : pY"
       }]
     },
     {
       "name": "nX",
       "on": [{
         "events": "mousemove, touchmove",
         "update": "isActive ? scale('x', active.next.fertility) : nX"
       }]
     },
     {
       "name": "nY",
       "on": [{
         "events": "mousemove, touchmove",
         "update": "isActive ? scale('y', active.next.life_expect) : nY"
       }]
     },
     {
       "name": "thisDist",
       "value": 0,
       "on":[{
         "events": "mousemove, touchmove",
         "update": "isActive ? sqrt(pow(x()-tX, 2) + pow(y()-tY, 2)) : thisDist"
       }]
     },
     {
       "name": "prevDist",
       "value": 0,
       "on":[{
         "events": "mousemove, touchmove",
         "update": "isActive ? sqrt(pow(x()-pX, 2) + pow(y()-pY, 2)): prevDist"
       }]
     },
     {
       "name": "nextDist",
       "value": 0,
       "on":[{
         "events": "mousemove, touchmove",
         "update": "isActive ? sqrt(pow(x()-nX, 2) + pow(y()-nY, 2)) : nextDist"
       }]
     },
     {
       "name": "prevScore",
       "value": 0,
       "on": [{
         "events": "mousemove, touchmove",
         "update": "isActive ? ((pX-tX) * (x()-tX) + (pY-tY) * (y()-tY))/prevDist || -999999 : prevScore"
       }]
     },
     {
       "name": "nextScore",
       "value": 0,
       "on": [{
         "events": "mousemove, touchmove",
         "update": "isActive ? ((nX-tX) * (x()-tX) + (nY-tY) * (y()-tY))/nextDist || -999999 : nextScore"
       }]
     },
     {
       "name": "interYear",
       "value": 1980,
       "on": [{
         "events": "mousemove, touchmove",
         "update": "isActive ? (min(maxYear, currentYear+5, max(minYear, currentYear-5, prevScore > nextScore ? (currentYear - 2.5*prevScore/sqrt(pow(pX-tX, 2) + pow(pY-tY, 2))) : (currentYear + 2.5*nextScore/sqrt(pow(nX-tX, 2) + pow(nY-tY, 2)))))) : interYear"
       }]
     },
     {
       "name": "currentYear",
       "value": 1980,
       "on":[{
         "events": "mousemove, touchmove",
         "update": "isActive ? (min(maxYear, max(minYear, prevScore > nextScore ? (thisDist < prevDist ? currentYear : currentYear-5) : (thisDist < nextDist ? currentYear : currentYear+5)))) : currentYear"
       }]
     }
   ],
 
   "scales": [
     {
       "name": "x",
       "type": "linear", "nice": true,
       "domain": {"data": "gapminder", "field": "fertility"},
       "range": "width"
     },
     {
       "name": "y",
       "type": "linear", "nice": true, "zero": false,
       "domain": {"data": "gapminder", "field": "life_expect"},
       "range": "height"
     },
     {
       "name": "color",
       "type": "ordinal",
       "domain": {"data": "gapminder", "field": "cluster"},
       "range": "category"
     },
     {
       "name": "label",
       "type": "ordinal",
       "domain": {"data": "clusters", "field": "id"},
       "range": {"data": "clusters", "field": "name"}
     }
   ],
 
   "axes": [
     {
       "title": "Fertility",
       "orient": "bottom", "scale": "x",
       "grid": true, "tickCount": 5
     },
     {
       "title": "Life Expectancy",
       "orient": "left", "scale": "y",
       "grid": true, "tickCount": 5
     }
   ],
 
   "legends": [
     {
       "fill": "color",
       "title": "Region",
       "orient": "right",
       "encode": {
         "symbols": {
           "enter": {
             "fillOpacity": {"value": 0.5}
           }
         },
         "labels": {
           "update": {
             "text": {"scale": "label", "field": "value"}
           }
         }
       }
     }
   ],
 
   "marks": [
     {
       "type": "text",
       "encode": {
         "update": {
           "text": {"signal": "currentYear"},
           "x": {"value": 300},
           "y": {"value": 300},
           "fill": {"value": "grey"},
           "fillOpacity": {"value": 0.25},
           "fontSize": {"value": 100}
         }
       }
     },
     {
       "type": "text",
       "from": {"data": "country_timeline"},
       "interactive": false,
       "encode": {
         "enter": {
           "x": {"scale": "x", "field": "fertility", "offset": 5},
           "y": {"scale": "y", "field": "life_expect"},
           "fill": {"value": "#555"},
           "fillOpacity": {"value": 0.6},
           "text": {"field": "year"}
         }
       }
     },
     {
       "type": "line",
       "from": {"data": "country_timeline"},
       "encode": {
         "update": {
           "x": {"scale": "x", "field": "fertility"},
           "y": {"scale": "y", "field": "life_expect"},
           "stroke": {"value": "#bbb"},
           "strokeWidth": {"value": 5},
           "strokeOpacity": {"value": 0.5}
         }
       }
     },
     {
       "name": "point",
       "type": "symbol",
       "from": {"data": "interpolate"},
       "encode": {
         "enter": {
           "fill": {"scale": "color", "field": "this.cluster"},
           "size": {"value": 150}
         },
         "update": {
           "x": {"scale": "x", "field": "inter_fertility"},
           "y": {"scale": "y", "field": "inter_life_expect"},
           "fillOpacity": [
             {
               "test": "datum.country==timeline.country || indata('trackCountries', 'country', datum.country)",
               "value": 1
             },
             {"value": 0.5}
           ]
         }
       }
     },
     {
       "type": "text",
       "from": {"data": "interpolate"},
       "interactive": false,
       "encode": {
         "enter": {
           "fill": {"value": "#333"},
           "fontSize": {"value": 14},
           "fontWeight": {"value": "bold"},
           "text": {"field": "country"},
           "align": {"value": "center"},
           "baseline": {"value": "bottom"}
         },
         "update": {
           "x": {"scale": "x", "field": "inter_fertility"},
           "y": {"scale": "y", "field": "inter_life_expect", "offset": -7},
           "fillOpacity": [
             {
               "test": "datum.country==timeline.country || indata('trackCountries', 'country', datum.country)",
               "value": 0.8
             },
             {"value": 0}
           ]
         }
       }
     }
 ]

} </graph>

Replis définis par l'utilisateur

Lorsque le rendu se fait côté client, il est possible d'utiliser Wikimedia Commons pour fournir une image statique de repli aux utilisateurs noscript. Ceci est une solution temporaire le temps qu'un nouveau service soit mis en place pour fournir la génération du côté serveur.

L'utilisateur doit d'abord téléverser le graphe statique dans Wikimedia Commons.

Les images de repli ont deux variables fallback et fallbackWidth.

fallback est relatif à un nom de fichier de Wikimedia Commons.

fallbackWidth est la largeur de repli des images, en pixels.

Ces variables sont passées au graphique de la manière suivante :

<graph fallback="Graph test seddon.png" fallbackWidth=450>

Là où les modules lua sont utilisés comme Module:Graph, ces variables peuvent être fournies par la fonction de la balise. Si on avait choisi Template:Graph:Chart , cela ressemblerait à :

{{safesubst:#tag:graph|{{safesubst:#invoke:Graph|chartWrapper}} | fallback = {{{fallback|''}}} |  fallbackWidth= {{{fallbackWidth|''}}} }}

Il peut être ensuite utilisé dans un modèle de la manière suivante :

{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y
 |type=rect|x=1,2,3,4,5,6,7,8|y=10,12,6,14,2,10,7,9|fallback=Graph test seddon.png|fallbackWidth=450}}

Si la largeur de repli fallbackWidth n'est pas fournie, mais qu'une image est définie, alors l'extension dérive la largeur à partir de celle du graphe fourni. La raison de ceci est qu'il existe souvent une différence entre la largeur de l'image générée et la largeur actuelle de l'image.

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

Données externes

Le protocole HTTP(S) ne peut pas être utilisé pour obtenir les données du graphique. À la place, utilisez un protocole wiki personnalisé tel que wikiraw:, wikiapi: ou autre.

L'extension Graph utilise le paramètre GraphAllowedDomains pour contrôler la résolution de ces protocoles : Notez que parce que les requêtes sont basées sur la structures des éléments wikibase, elles peuvent brusquement s'arrêter de fonctionner quand des données sous-jacentes sont mises à jour et modifiées. C'est parce que les données fournies alors pour créer le graphique sont incomplètes, vides, ou non valides et ne peuvent pas être utilisées. Dans ces cas, le graphe sera vide en sortie (voir phab:T168601).

$wgGraphAllowedDomains = [
    # clés http et https; liste tous les domaines autorisés pour l'accès aux données externes.
    # Tout domaine listé ici autorise aussi automatiquement tous les sous-domaines.
    # Protocoles personnalisés tels que 'wikiraw' ; définit le protocole à utiliser.
    # De cette manière, wikiraw://en.wikipedia.org/Page devient une requête d'API pour https://en.wikipedia.org/w/api.php?action=query&titles=Page&...
    'https' => [ 'wikipedia.org', 'wikimedia.org', ... ],
    'http' => [ 'wmflabs.org', ... ],
    
    # liste des domaines autorisés pour le wikirawupload : protocole d'accès.
    # Correspondance exacte seulement, sans les sous-domaines.
    'wikirawupload' => [ 'upload.wikimedia.org' ],
    
    # même chose que wikirawupload mais pour les requêtes Sparql de Wikidata
    'wikidatasparql' => [ 'query.wikidata.org' ],
];

Fonctionnement interne

Lors de l'analyse syntaxique, l'extension Graph développe tous les paramètres et les expressions du modèle et range les définitions complètes du graphique dans la propriété de page ParserOutput en utilisant le hachage du graphe pour l'ID.

L'extension graph ajoute du code HTML à la page où il y a des graphes : un ‎<div> comportant l'attribut graph-id. Exemple :

<div class="mw-graph" data-graph-id="72edc224f0a10b343c1e84f63dbfc97cac9bc957">
</div>

L'extension Graph ajoute un module JavaScript ResourceLoader ext.graph à la page qui inclut la bibliothèque Vega, et place le JSON des définitions du graphique dans une variable mediawiki.config nommée wgGraphSpecs. Une fois que le client a chargé ce module, la bibliothèque JavaScript Vega remplit chaque ‎<div> avec un canevas HTML et dessine le graphique à l'intérieur qui remplace l'image statique.

Fonctions de sécurité

‎<graph> peut être configuré pour interdire le référencement de sources de données non fiables (Wikimedia par exemple, n'autorise les données que provenant des sites Wikimedia).

Licence

La bibliothèque Vega est distribuée sous une license BSD modifiée acceptable, ce qui nous permet de l'utiliser.

“	Ceci ressemble à une copie de la licence BSD, avec quelques modifications mineures (acceptables). Ce n'est pas gênant pour nous de l'utiliser bien que, idéalement, on ne doit pas faire de telles modifications dans la licence. C'est mieux lorsque l'on ne fait pas ce type de modification dans la licence que l'on utilise car cela évite toute confusion (comme ici) pour savoir si elle reste valable pour les sources libres.	”
—Stephen LaPorte

Configuration

wgGraphAllowedDomains

Voir la section sur les données externes.

Module de l'Éditeur Visuel

Depuis l'été 2015, l'extension Graph est également associée au module ext.graph.VisualEditor qui permet l'édition de graphique dans l'Éditeur Visuel.

Ce module est le fruit d'un projet du Google Summer of Code 2015. Voir phab:T89287 pour plus de détails.

File:Ve-graph-showcase.png

Ce module permet aux utilisateurs de visualiser les graphiques dans l'Éditeur Visuel, contrairement à certaines extensions. De plus, les utilisateurs peuvent ouvrir une boîte de dialogue pour éditer le type de graphique, ses données et l'espacement. L'interface utilisateur offre aussi un moyen d'éditer les paramètres bruts JSON d'un graphe dans l'éditeur visuel, sans passer par l'éditeur de wikitexte classique, donnant la possibilité aux utilisateurs plus avancés d'ajuster les paramètres qui ne sont pas pris en compte par l'interface.

Cette première étape sert de tremplin au développement de l'édition de graphiques dans l'Éditeur Visuel, et les possibilités d'amélioration et d'extension du module sont nombreuses.

Corriger des graphiques erronés

Les erreurs avec les graphiques seront consignées dans la console développeur.

Erreur : Arguments de constructeur incorrects (page : T277906)

Pour corriger : remplacez filepath:Earthmap1000x500compac.jpg par filepath:Earthmap1000x500.jpg

Exemple.

TypeError: undefined is not an object (evaluating 'datum.firstYear.value')

Correctif: assurez-vous de ne pas avoir intialisé la valeur par défaut à null

Exemple.

Voir aussi

Diagram extensions
Plotly — la bibliothèque de graphes à source libre JavaScript (avec des possibilité de représentation en 3D)
D3 — documents sur le contrôle par les données

File:OOjs UI icon information-progressive.svg

<translate> This extension is included in the following wiki farms/hosts and/or packages:</translate>

<translate> This is not an authoritative list.</translate> <translate> Some wiki farms/hosts and/or packages may contain this extension even if they are not listed here.</translate> <translate> Always check with your wiki farms/hosts or bundle to confirm.</translate>

File:OOjs UI icon advanced-invert.svg Graph État de la version : non-maintenu
Implémentation	Balise , ContentHandler
Description	Graphes contrôlés par les données
Auteur(s)	Yuri Astrakhan (Yurik ^talk), Dan Andreescu, Frédéric Bolduc
MediaWiki
Licence	Aucune licence spécifiée
Téléchargement	<translate> Download extension</translate> <translate> Git</translate> ^[?]: <translate> Download Git master</translate> <translate> browse repository</translate> (Phabricator · GitHub) <translate> commit history</translate> <translate> repository contributors (GitHub)</translate> <translate> code review</translate>
Téléchargements trimestriels	Lua error in Module:Extension at line 172: bad argument #1 to 'inNamespace' (unrecognized namespace name 'skin').
Utilisé par les wikis publics	Lua error in Module:Extension at line 172: bad argument #1 to 'inNamespace' (unrecognized namespace name 'skin').
Traduire l’extension Graph sur translatewiki.net si elle y est disponible
Problèmes	Tâches ouvertes · Signaler un bogue