Wikipedia:Graphs and charts
A graph or chart is a diagrammatical illustration of a set of data. If the graph is uploaded as an image file, it can be placed within articles just like any other image.
Graphs must be accurate and convey information efficiently. They should be viewable at different computer screen resolutions. Ideally, graphs will also be aesthetically pleasing.
Please note: "graph" and "chart" are ambiguous terms, sometimes used equivalently.
Accuracy[edit]
Graphs that show a trend of data should illustrate the trend accurately in its context, rather than illustrating the trend in an exaggerated or sensationalized way. In short, don't draw misleading graphs.
Choose a type of graph that is appropriate for the data you are illustrating.
- Cartesian coordinates
- Pie chart — good for showing how a whole is divided up (e.g., how much money is spent on each thing in a budget)
- Bar graph — good for showing how things compare to each other (e.g., whether foo or bar is bigger) or how it has changed (e.g., sales of foo each year)
Creating graphs for Wikipedia[edit]
Methods using Wikipedia templates[edit]
Timeline[edit]
A variety of templates and styles are available to create timelines.
- The {{Graphical timeline}} template allows representations of extensive timelines. The template offers complex formatting and labeling options to control the output. Typically, each use is made into its own template, and the template is then transcluded into the article. See an example here, and an example of it being used in an article here.
- The {{Timeline}} template is designed to show three items in a simple timeline, representing past, present, and future. It is convenient for navigation through a series of articles, e.g., the succession of people holding an elected office. It looks like this:
| Foo 2009 | Bar 2010 |
Baz 2011 |
- The use of fixed images, such as File:Narnia Timeline.svg, was common in the past. However, these are difficult or impossible to adjust later, so this approach is frequently not the best option.
- In other cases, whole articles or sections present timelines in text as association (definition) lists. Timeline of chemistry is a featured list that uses this style to good effect.
Single statistic[edit]
70 / 100 |
70% of women with breast cancer have no known risk factors
|
{{Infobox political party/seats}} can be used to provide a single statistic.
This example shows 70% (70 out of 100), but the template is flexible and can show any positive integer out of any (equal or larger) integer. The template is 100 pixels wide, so the results are rounded to 1%.
The code for producing this, set in a one-column, two-row table with a caption in the second row, is shown here:
{| class="infobox" style="width: 10em;"|-| {{Infobox political party/seats|70|100|hex=red}}|-| {{Caption|70% of women with breast cancer have no known risk factors}}|}
To use this, copy the above and replace the values ("70" and "100" in the middle line) and the caption ("70% of women...") with your data. The color can also be changed, from "red" in this example to "blue", "green", or any hex color.
If you want to present multiple statistics, you can stack multiple copies of the template inside the first cell of the table.
Visualizer[edit]
| Task | Hours per Day |
|---|---|
| Work | 11 |
| Eat | 2 |
| Sleep | 7 |
{{Visualizer}} uses the Toolserver to produce gorgeous and complex charts. On Wikipedia, you create a normal table of data. Then add an extra line that says:
|+ {{visualizer| <Your table title goes here> |chart=pie |link=View graph}}
just before your first data/header column. This produces a link at the top of your table that takes readers to a pie chart on the Toolserver.
There are many possible types of graphs using this template; this example shoes a pie chart. You can change the chart parameter to bar, line, col, and other options. Some options require multiple columns of data.
This template does not work with heavily formatted tables (e.g., tables that specify column widths), and it does not work in preview: you must save the page before the link becomes functional.
Pie chart[edit]
{{Pie chart}} is an experimental graph-drawing template that produces an pie chart 200 pixels wide in the article.
Setting the other parameter to yes will pad the chart so that the values total to 100.
This example was created by typing the following code:
{{Pie chart- |other = yes
- |value1 = 27
- |label1 = One
- |value2 = 32
- |label2 = Two
- |value3 = 12
- |label3 = Three
- |value4 = 9
|label4 = Four}}
Up to nine wedges can be included.
Horizontal bar graph[edit]
Bar chart[edit]
{{Bar chart}} is a template that displays the data as a horizontal bar chart. The width of the graph can be changed.
| Country | Predicted median age at death |
|---|---|
| China | 71
|
| India | 60
|
| USA | 79
|
| Indonesia | 71
|
| Brazil | 67
|
Bar box[edit]
{{Bar box}} is a template that displays the data as a horizontal bar chart. The width of the chart can be changed, but care must be taken to make sure the bars stay within the box on many browsers.
Brick chart[edit]
Causes of death
{{Brick chart}} is a simple block-oriented chart template. It assumes that everything must add up to 100% in the end, and fills in any missing amounts with "other".
You can label (and optionally choose colors for) each item, and the labels can be wikilinks to relevant articles. However, you can only use whole numbers.
Methods outside Wikipedia[edit]
- Using the Scalable Vector Graphics (SVG) format is the recommended method.
- The R programming language can be used for creating Wikipedia graphs.
- Many spreadsheet, drawing, and desktop publishing programs allow you to create graphs and export them as images.
- Google's chart application programming interface allows a variety of graphs to be created. It can be found here.