Template talk:Graph:Chart

This page shows some examples of what Graph extension can produce. Graphs use Vega grammar (documentation) as underlying technology. Vega team is working on other tools to make Graphs easier to use. For interactive graphs this tutorial will explain building graphs step by step. For other graph ideas, see Vega examples.

Graph templates

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:

{{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}}

{{Graph:Chart|width=100|height=100|type=pie|legend=Legende
 |x=A,B,C,D,E,F,G,H,I|y1=100,200,150,300,100,100,150,50,200
 |y2=7,8,9,8,8,9,10,9,5|showValues=}}

{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y
 |legend=Legend|type=stackedarea|x=1,2,3,4,5,6|y1=10,12,6,14,2,10
 |y2=2,4,6,8,13,11|interpolate=monotone|colors=seagreen,orchid}}

Using RESTBase API

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

Current page and en.wikipedia.org's main page for the last 30 days

{{Template:Graph:PageViews}}
{{Template:Graph:PageViews|30|Main Page|en.wikipedia.org}}

Current page and en.wikipedia main page for the last 30 days - per type Template talk:Graph:Chart/Pageviews2 Template talk:Graph:Chart/Pageviews2

Using MediaWiki API

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

Current Page	Albert Einstein from en.wikipedia.org

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

Category:Extensions by category.	Category:People from en.wikipedia.org

Embedded directly with <graph>

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

Horizontal bar graph

/HorizontalBarGraphSample

Editing graph data

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.

Samples from ruwiki

Source

source

Sample from nlwiki

From nlwiki