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.

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.

LocalSettings.php
To allow  in wiki markup:

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

Graphoid Service
The Graphoid service is a node.js service that converts a graph definition into a PNG image using Vega library. The service URLs contain the domain of the page (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 with The service can be further configured with additional settings in the config file.