Extension:Graph

The Graph extension allows a  tag or entire page to describe data visualization in a JSON format that renders a Vega-based graph.

Guide

 * TechTalk Video - a tech talk discussing Graph extension, including a great demo of Lyra editor (Also installed on labs)
 * /Guide - work in progress, will contain general recommendations on how to use graphs.

Demo

 * This sample transcludes the   graph, but it could have also been embedded directly with the  . The example is from Vega editor example.
 * see /Demo subpage for other samples and approaches

Known bugs & limitations

 * T98656 Edit Preview does not show graphs if you have "Use live preview" editing option enabled.
 * T98689 Graph does not support IE8 and throws JS errors.

Internals
When parsing, graph extension expands all template parameters/expressions, and stores the complete graph definitions in the graph_specs page property, using graph hashes for IDs. This way graphs can be easily located on the wiki with propname=graph_specs the special page (or via API). The client browser receives graph definitions as JSON MW values. Additionally, HTML contains empty &lt;div> elements in place where graphs should go: Once everything is loaded into the browser, vega populates each &lt;div> with a graph canvas.

Additionally, graph extension inserts an &lt;img> tag with the HREF pointing to the. The image tag will only execute in case of the &lt;noscript> browser, or legacy browser that MediaWiki does not support by using document.write(...).

Alternativelly, Graph extension may be configured to always use just the &lt;img> tag, without adding the Vega libraries or graph definition JSON. This mode will not work during editing, since page_props do not get updated until after the save. Once saved, Graphoid service will be able to access the new definition via MW API.

Security Features
can be configured to disallow referencing untrusted data sources (e.g. Wikimedia only allows data from the Wikimedia sites). It can also send extra headers whenever accessing external data, e.g. Treat-as-Untrusted header that MediaWiki uses to prevent CSRF attacks.

wgGraphDataDomains
A list of domains (strings) that the vega code is allowed to pull data from, or false for no restrictions. An empty list disables any external data (inline only). Empty list by default.
 * NOTE: Setting this value to anything other than 'false' will also enable safe mode formula/filter evaluation

wgGraphUrlBlacklist
A list of regular expressions (JavaScript regex). All data URLs will be matched against this list, and the URL will be used only if it does not match any of the given regexes. false (default) to disable.

wgGraphIsTrusted
If false (default), passes Treat-as-Untrusted:1 header with all graph data requests

wgGraphImgServiceUrl
A format string to form a backend service request URL for the &lt;img> tag. For example: Would produce this URL: //graphoid.wikimedia.org/mediawiki.org/v1/png/Extension:Graph/0/be66c7016b9de3188ef6a585950f10dc83239837.png /{domain}/v1/png/{title}/{revid}/{hash}.png

Parameters will be supplied in this order: 1=server, 2=title, 3=revid, 4=graph-hash-id. All parameters will be escaped with rawurlencode. If the value is false (default), no urls will be generated

wgGraphImgServiceAlways
If true, and wgGraphImgServiceUrl</tt> is set, renders all graphs on the backend if possible.

Enabling Graph namespace
To store graph definitions as standalone pages in their own namespace, configure JsonConfig.

Graphoid service
Graphoid is a node.js  service that converts a graph definition into a PNG image using the same Vega library code that runs in advanced browsers. The service is available on the Wikimedia cluster at graphoid.wikimedia.org.

You can install it yourself: The service URLs contain the domain of the page (for example mediawiki.org), service version (v1), the title of the page with the graph (PageTitle), revision ID of the page (12345, but could be 0 for current), and a hash ID of the graph itself (also used in HTML page to identify graph definition), for example: http://localhost:19000/mediawiki.org/v1/PageTitle/12345/a64b022a8fa5b7fc5e40a2c95cd0a114b2ae1174.png http://graphoid.wikimedia.org/mediawiki.org/v1/png/Extension:Graph/0/be66c7016b9de3188ef6a585950f10dc83239837.png You configure the Graph extension to use the Graphoid service in LocalSettings.php with a line like You can further configure the service via its config file.