Extension:Graph/Demo

These examples using the Graph extension will help you understand how you can use it.

See Vega JS for tutorial and other documentation

Maps
This transcludes the page Extension:Graph/Demo/Map. The graph data specifies that its  data comes from a separate file, RawData:WorldMap-json. (MediaWiki doesn't know this wiki page should be formatted as JSON yet, it will eventually use a JSON content handler.) A second data source (part of the graph definition, but it could be template parameters or another page) drives how to highlight each country.

Maps can be transcluded with parameters. Here's 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 60%. The code to invoke it is

Other graphs
Contributions counts - Douglas Adams is a count of user contributions, with top 20 shown. The spike was due to Google Doodle.

Contributions by diff - Barack Obama graphs edits that changed article size, excluding vandalism/rollbacks.

Passing MediaWiki template parameters
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 Graph:Examples:Template does not hardcode a fill color for ; instead it sets the fill color to. So if you visit that page or transclude it with no parameter, the graph fills with color  ; but if you transclude that page you can specify the fill color as the first template parameter. Thus the wiki markup:
 *    

produces:

Using a template for repeated graphs
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.

Embedded directly with
This example is a  tag containing the graph JSON inside the current page.

{ "width": 400, "height": 200, "padding": {"top": 10, "left": 30, "bottom": 30, "right": 10}, "data": [ {     "name": "table", "values": [ {"x": 1, "y": 28}, {"x": 2,  "y": 55}, {"x": 3, "y": 43}, {"x": 4,  "y": 91}, {"x": 5, "y": 81}, {"x": 6,  "y": 53}, {"x": 7, "y": 19}, {"x": 8,  "y": 87}, {"x": 9, "y": 52}, {"x": 10, "y": 48}, {"x": 11, "y": 24}, {"x": 12, "y": 49}, {"x": 13, "y": 87}, {"x": 14, "y": 66}, {"x": 15, "y": 17}, {"x": 16, "y": 27}, {"x": 17, "y": 68}, {"x": 18, "y": 16}, {"x": 19, "y": 49}, {"x": 20, "y": 15} ]   }  ],  "scales": [ {     "name": "x", "type": "ordinal", "range": "width", "domain": {"data": "table", "field": "data.x"} },   {      "name": "y", "range": "height", "nice": true, "domain": {"data": "table", "field": "data.y"} } ],  "axes": [ {"type": "x", "scale": "x"}, {"type": "y", "scale": "y"} ], "marks": [ {     "type": "rect", "from": {"data": "table"}, "properties": { "enter": { "x": {"scale": "x", "field": "data.x"}, "width": {"scale": "x", "band": true, "offset": -1}, "y": {"scale": "y", "field": "data.y"}, "y2": {"scale": "y", "value": 0} },       "update": { "fill": {"value": "steelblue"} },       "hover": { "fill": {"value": "red"} }     }    }  ] }

Here's the JSON defining the above graph, from inside its  tag. 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 the JSON before you copy and paste it into the wiki page.