Open main menu


Graph templatesEdit

The easiest way to use graphs is via pre-built templates such as the Graph:Chart (available on many Wikipedias), or more specialized PieChart. Graph:Chart supports many common graph types such as line, area, and pie charts:




Vega 2.0 interactive examplesEdit

Using RESTBase APIEdit

Show pageview graphs for a range of dates, using pageview analytics API. See Template:Graph:PageViews .

Current page and's main page for the last 30 days

{{Template:Graph:PageViews|30|Main Page|}}

Current page and en.wikipedia main page for the last 30 days - per type


Using MediaWiki APIEdit

This graph shows edit history for a wiki page. See {{Graph:PageHistory}}.

Current Page Albert Einstein from

This graph shows the number of pages in each subcategory. See graph source code.

Category:Extensions by category. Category:People from

Using Wikidata Query Service APIEdit

See more examples.



Timeline / lifelineEdit


More maps examplesEdit

This transcludes the page Extension:Graph/Demo/Map. The <graph> tag's JSON data on that page specifies that its countries data comes from a separate URL, Extension:Graph/Demo/RawData:WorldMap-iso2-json, that contains map data in JSON format. (MediaWiki doesn't know this wiki page should be formatted as JSON yet, it will eventually use a JSON content handler.)

One of the elements in the <graph> tag's JSON data specifies a highlight color for each country, in the format "country-code":"highlight-color":


Vega usually works with data in the format [{"id":"country-code", "v":"highlight-color"}, ...], so I created a helper Lua function to convert the data:

{{#invoke:Graph:Utils|expandDict|{"BR":"pink","US":"blue","CN":"red","DZ":"green","AU":"purple"} }}

The Lua function's output is data in Vega's format:


Here is a more complex data processing example: MapTemplate is expanded with the data from Lua which takes it from the 2010 population distribution in the world (data based on UN data). To generate this graph, I use Lua module Graph:Utils's function parseCsv to extract the year 2010 column from the Extension:Graph/Demo/RawData:PopulationByCountryHistoric-csv page (in csv format), and pass that data as the first unnamed parameter to the MapTemplate graph. Additional optional parameter specifies that it should be scaled to 80%.


Note how the legend it wrongly positioned. That won't happen at lower scales.

Passing MediaWiki template parametersEdit

If you're using a wiki page as a template, you can pass parameters to it, like any other MediaWiki template.

As an example, the graph specification in TemplateSample does not hardcode a fill color for; instead it sets the fill color to {{{1|#ccc}}}. So if you visit that page or transclude it with no parameter, the graph fills with color #ccc; but if you transclude that page you can specify the fill color as the first template parameter.

{{Extension:Graph/Demo/TemplateSample | blue}}
{{Extension:Graph/Demo/TemplateSample | #f00dee}}

Using a template for repeated graphsEdit

This is very useful if you have multiple graphs of the same form: you can put the verbose graph JSON and additional repetive wikitext in a template and only pass the parameters to it that vary, such as title and values. See a sample of this approach.

Overlaying two types of dataEdit

Falkensee graph sample, see code.

Copied from vega demo, which was modeled on this graph.


Embedded directly with <graph>Edit

This example is a <graph> tag containing the graph JSON inside the current page.


Horizontal bar graphEdit

Editing graph dataEdit

Editing JSON by hand is fiddly and prone to error. so you should use a JSON checker such as JSONLint or a JSON editor such as the Vega Live Editor to edit JSON before you copy and paste it into the wiki page. If the <graph> tag's data is directly embedded in the page such as the example above, then if you use VisualEditor to edit the page you can directly edit graph data.