Template:Graph:Lines/doc

This graph's main version resides at Template:Graph:Lines. Please make or suggest all the changes there, and copy it everywhere else (until the copying is automated)

This graph draws one or more independent numeric data series as lines. The data must be stored on Commons' Data namespace or come from Wikidata Query Service.

Gender pay gap

{{Graph:Lines | table=bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab | type=year | xField=year | series="age_16_24", "age_25_34", "age_35_44", "age_45_54" | title=Gender pay gap in the United States | yZero=false | xAxis=Year | yAxis=Percentage | yMax=100 | yGrid=y | width=500 | legend=Age group | vAnnotationsValues={"text": "Fictitious event", "x": 1990} }}

<graph> { // // ATTENTION: This code is maintained at https://www.mediawiki.org/wiki/Template:Graph:Lines // Please do not modify it anywhere else, as it may get copied and override your changes. // Suggestions can be made at https://www.mediawiki.org/wiki/Template_talk:Graph:Lines // // Template translation is in https://commons.wikimedia.org/wiki/Data:Original/Template:Graphs.tab // "version": 2, "width": 500, "height": 300, "padding": "strict", "signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"500"}], "data": [{ "name": "chart", "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab", "format": {"type": "json" , "property": "data" }, "transform": [ // Convert xField parameter into a field "_xfield" {"type": "formula", "field": "_xfield", "expr": "datetime(datum.year, 0, 1)" } , {"type": "sort", "by": ["_xfield"]} , {"type": "fold", "fields": ["age_16_24", "age_25_34", "age_35_44", "age_45_54"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" } ] }, // source of labels for `tabletype=tab` { "name": "labels", "url": "tabular:///bls.gov/US Women's weekly earnings as a percent of men's by age, annual averages.tab", "format": {"type": "json", "property": "fields"}, "transform": [ ] }, // Each vertical annotation is expected to be x-scale typed `x`, string `text`, // and optional string `color` (e.g. "#4d2800") { "name": "vAnnotations", "values": [{"text": "Fictitious event", "x": 1990}], "transform": [ // in case of `type=year` convert year number to UNIX timestamp {"type": "formula", "field": "x", "expr": "datetime(datum.x, 0, 1)"}, // expected item format `{"text": "...", "color": "#000", x: _ }` { "type": "formula", "field": "text", "expr": "datum.text || " }, { "type": "formula", "field": "color", "expr": "datum.color || '#54595d'" } ] }, ], "scales": [ { "name": "x", "type": "time", "domain": {"data": "chart", "field": "_xfield"}, "range": "width", }, { "name": "y", "type": "linear", "range": "height", "domain": {"data": "chart", "field": "_yfield"}, "zero": false, "domainMax": 100, }, { "name": "color", "type": "ordinal", "range": "category10", "domain": {"data": "chart", "field": "key"} }, { "name": "labels", "type": "ordinal", "domain": {"data": "labels", "field": "name"}, "range": {"data": "labels", "field": "title"}, } ], "legends": [{ "fill": "color", "stroke": "color", "title": "Age group", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } } }], "axes": [ { "scale": "x", "type": "x", "tickSizeEnd": 0, "ticks": 7, "title": "Year", "properties": { "labels": { } } }, { "scale": "y", "type": "y", "tickSizeEnd": 0, "title": "Percentage", "grid": true, "properties": { "labels": { } } } ], "marks": [ // Group data by the group parameter or "key", and draw lines, one line per group { "type": "group", "from": { "data": "chart", "transform": [{"type": "facet", "groupby": ["key"]}] }, "marks": [ { "type": "line", "properties": { "hover": { "stroke": {"value": "red"} }, "update": { "stroke": {"scale": "color", "field": "key"} }, "enter": { "y": {"scale": "y", "field": "_yfield"}, "x": {"scale": "x", "field": "_xfield"}, "stroke": {"scale": "color", "field": "key"}, "interpolate": {"value": "linear"}, "strokeWidth": {"value": 2.5} } } } ], }, // vertical annotations dashed line { "type": "rule", "properties": { "update": { "x": {"scale": "x", "field": "x"}, "y": {"value": 0}, "y2": {"field": {"group": "height"} }, "stroke": {"field": "color"}, "opacity": {"value": 0.75}, "strokeWidth": {"value": 1}, "strokeDash": {"value": [6,1]} } }, "from": {"data": "vAnnotations"} }, // vertical annotations text { "type": "text", "properties": { "update": { "x": {"scale": "x", "field": "x"}, "y": {"value": 0}, "align": {"value": "right"}, "dx": {"value": -3}, "dy": {"value": 3}, "baseline": {"value": "top"}, "text": {"field": "text"}, "angle": {"value": -90}, "opacity": {"value": 0.75}, "fill": {"field": "color"} } }, "from": {"data": "vAnnotations"} }, // Draw title at the top of the graph { "type": "text", "properties": { "enter": { "y": {"value": -15}, "x": {"signal": "rightwidth", "mult": 0.5, "offset": 0 }, "text": {"value": "Gender pay gap in the United States"}, "fontWeight": {"value": "bold"}, "align": {"value": "center"}, "baseline": {"value": "bottom"}, "fill": {"value": "#000"} } } } ] } </graph> Gender pay gap in the United States. .

Paintings per decades

{{Graph:Lines | tabletype=query | table=SELECT ?decade (COUNT(?decade) AS ?count) WHERE { ?item wdt:P31 wd:Q3305213 . ?item wdt:P571 ?inception . BIND( year(?inception) as ?year ). BIND( ROUND(?year/10)*10 as ?decade ) . FILTER( ?year > 1400) FILTER( ?year <= year(now())) } GROUP BY ?decade ORDER BY ?decade | series="count" | type=year | xField=decade |yAxisFormat=s | yZero=false | width=550 | title=Paintings by decade | hAnnotationsValues={"text": "Fictitious value", "y": 20000} }}

<graph> { // // ATTENTION: This code is maintained at https://www.mediawiki.org/wiki/Template:Graph:Lines // Please do not modify it anywhere else, as it may get copied and override your changes. // Suggestions can be made at https://www.mediawiki.org/wiki/Template_talk:Graph:Lines // // Template translation is in https://commons.wikimedia.org/wiki/Data:Original/Template:Graphs.tab // "version": 2, "width": 550, "height": 300, "padding": "strict", "signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"550"}], "data": [{ "name": "chart", "url": "wikidatasparql:///?query=SELECT%20%3Fdecade%20%28COUNT%28%3Fdecade%29%20AS%20%3Fcount%29%20WHERE%20%7B%0A%20%20%3Fitem%20wdt%3AP31%20wd%3AQ3305213%20.%0A%20%20%3Fitem%20wdt%3AP571%20%3Finception%20.%0A%20%20BIND%28%20year%28%3Finception%29%20as%20%3Fyear%20%29.%20%0A%20%20BIND%28%20ROUND%28%3Fyear%2F10%29%2A10%20as%20%3Fdecade%20%29%20.%0A%20%20FILTER%28%20%3Fyear%20%3E%201400%29%0A%20%20%20%20FILTER%28%20%3Fyear%20%3C%3D%20year%28now%28%29%29%29%0A%7D%20GROUP%20BY%20%3Fdecade%20ORDER%20BY%20%3Fdecade", "format": {"type": "json" }, "transform": [ // Convert xField parameter into a field "_xfield" {"type": "formula", "field": "_xfield", "expr": "datetime(datum.decade, 0, 1)" } , {"type": "sort", "by": ["_xfield"]} , {"type": "fold", "fields": ["count"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" } ] }, // Each horizontal annotation is expected to be numeric `y`, string `text`, // and optional string `color` (e.g. "#4d2800") { "name": "hAnnotations", "values": [{"text": "Fictitious value", "y": 20000}], "transform": [ // expected item format `{"text": "...", "color": "#000", y: 0}` { "type": "formula", "field": "text", "expr": "datum.text || " }, { "type": "formula", "field": "color", "expr": "datum.color || '#54595d'" } ] }, ], "scales": [ { "name": "x", "type": "time", "domain": {"data": "chart", "field": "_xfield"}, "range": "width", }, { "name": "y", "type": "linear", "range": "height", "domain": {"data": "chart", "field": "_yfield"}, "zero": false, }, { "name": "color", "type": "ordinal", "range": "category10", "domain": {"data": "chart", "field": "key"} }, { "name": "labels", "type": "ordinal", "domain": ["count"], "range": ["count"], } ], "axes": [ { "scale": "x", "type": "x", "tickSizeEnd": 0, "ticks": 7, "properties": { "labels": { } } }, { "scale": "y", "type": "y", "tickSizeEnd": 0, "format": "s", "properties": { "labels": { } } } ], "marks": [ // Group data by the group parameter or "key", and draw lines, one line per group { "type": "group", "from": { "data": "chart", "transform": [{"type": "facet", "groupby": ["key"]}] }, "marks": [ { "type": "line", "properties": { "hover": { "stroke": {"value": "red"} }, "update": { "stroke": {"scale": "color", "field": "key"} }, "enter": { "y": {"scale": "y", "field": "_yfield"}, "x": {"scale": "x", "field": "_xfield"}, "stroke": {"scale": "color", "field": "key"}, "interpolate": {"value": "linear"}, "strokeWidth": {"value": 2.5} } } } ], }, // horizontal annotations dashed line { "type": "rule", "properties": { "update": { "y": {"scale": "y", "field": "y"}, "x": {"value": 0 }, "x2": {"field": {"group": "width"} }, "stroke": {"field": "color"}, "opacity": {"value": 0.75}, "strokeWidth": {"value": 1}, "strokeDash": {"value": [6,1]} } }, "from": {"data": "hAnnotations"} }, // horizontal annotations text { "type": "text", "properties": { "update": { "y": {"scale": "y", "field": "y", "offset": 3}, "x": {"value": 0, "offset": 3}, "baseline": {"value": "top"}, "text": {"field": "text"}, "angle": {"value": 0}, "opacity": {"value": 0.75}, "fill": {"field": "color"} } }, "from": {"data": "hAnnotations"} }, // Draw title at the top of the graph { "type": "text", "properties": { "enter": { "y": {"value": -15}, "x": {"signal": "rightwidth", "mult": 0.5, "offset": 0 }, "text": {"value": "Paintings by decade"}, "fontWeight": {"value": "bold"}, "align": {"value": "center"}, "baseline": {"value": "bottom"}, "fill": {"value": "#000"} } } } ] } </graph> Paintings by decade. .

Population in countries bordering Germany

Wikidata query produces three columns - year, population size, and country name. This graph shows one line per country. {{Graph:Lines | tabletype=query | table= #Population of countries sharing a border with Germany SELECT ?year ?population ?countryLabel WHERE { { SELECT ?country ?year (AVG(?populations) AS ?population) WHERE { { SELECT ?country (YEAR(?date) AS ?year) ?populations WHERE { ?country wdt:P47 wd:Q183. ?country p:P1082 ?populationStatement. ?populationStatement ps:P1082 ?populations. ?populationStatement pq:P585 ?date. } } FILTER( ?year >= 1900) } GROUP BY ?country ?year } SERVICE wikibase:label { bd:serviceParam wikibase:language "en". } } | type=year | xField=year | group=countryLabel | value=population | colorscheme=category20 | yScale=log | legend=- | xGrid=y | yGrid=y | yTicks=7| width=600 | colorscheme=category20 |yAxisFormat=.1s }}

<graph> { // // ATTENTION: This code is maintained at https://www.mediawiki.org/wiki/Template:Graph:Lines // Please do not modify it anywhere else, as it may get copied and override your changes. // Suggestions can be made at https://www.mediawiki.org/wiki/Template_talk:Graph:Lines // // Template translation is in https://commons.wikimedia.org/wiki/Data:Original/Template:Graphs.tab // "version": 2, "width": 600, "height": 300, "padding": "strict", "signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"600"}], "data": [{ "name": "chart", "url": "wikidatasparql:///?query=%23Population%20of%20countries%20sharing%20a%20border%20with%20Germany%2C%20fixed%0ASELECT%20%3Fyear%20%3Fpopulation%20%3FcountryLabel%20WHERE%20%7B%0A%20%20%7B%0A%20%20%20%20SELECT%20%3Fcountry%20%3Fyear%20%28AVG%28%3Fpopulations%29%20AS%20%3Fpopulation%29%20WHERE%20%7B%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20SELECT%20%3Fcountry%20%28YEAR%28%3Fdate%29%20AS%20%3Fyear%29%20%3Fpopulations%20WHERE%20%7B%0A%20%20%20%20%20%20%20%20%20%20%3Fcountry%20wdt%3AP47%20wd%3AQ183.%0A%20%20%20%20%20%20%20%20%20%20%3Fcountry%20p%3AP1082%20%3FpopulationStatement.%0A%20%20%20%20%20%20%20%20%20%20%3FpopulationStatement%20ps%3AP1082%20%3Fpopulations.%0A%20%20%20%20%20%20%20%20%20%20%3FpopulationStatement%20pq%3AP585%20%3Fdate.%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%20%20%20FILTER%28%20%3Fyear%20%3E%3D%201900%29%0A%20%20%20%20%7D%0A%20%20%20%20GROUP%20BY%20%3Fcountry%20%3Fyear%0A%20%20%7D%0A%20%20SERVICE%20wikibase%3Alabel%20%7B%20bd%3AserviceParam%20wikibase%3Alanguage%20%22en%22.%20%7D%0A%7D", "format": {"type": "json" }, "transform": [ // Convert xField parameter into a field "_xfield" {"type": "formula", "field": "_xfield", "expr": "datetime(datum.year, 0, 1)" } , {"type": "sort", "by": ["_xfield"]} , {"type": "formula", "field": "_yfield", "expr": "datum.population" } , {"type": "filter", "test": "datum._yfield != 0"} ] }, ], "scales": [ { "name": "x", "type": "time", "domain": {"data": "chart", "field": "_xfield"}, "range": "width", }, { "name": "y", "type": "log", "range": "height", "domain": {"data": "chart", "field": "_yfield"}, }, { "name": "color", "type": "ordinal", "range": "category20", "domain": {"data": "chart", "field": "countryLabel"} }, ], "legends": [{ "fill": "color", "stroke": "color", }], "axes": [ { "scale": "x", "type": "x", "tickSizeEnd": 0, "ticks": 7, "grid": true, "properties": { "labels": { } } }, { "scale": "y", "type": "y", "tickSizeEnd": 0, "ticks": 7, "format": ".1s", "grid": true, "properties": { "labels": { } } } ], "marks": [ // Group data by the group parameter or "key", and draw lines, one line per group { "type": "group", "from": { "data": "chart", "transform": [{"type": "facet", "groupby": ["countryLabel"]}] }, "marks": [ { "type": "line", "properties": { "hover": { "stroke": {"value": "red"} }, "update": { "stroke": {"scale": "color", "field": "countryLabel"} }, "enter": { "y": {"scale": "y", "field": "_yfield"}, "x": {"scale": "x", "field": "_xfield"}, "stroke": {"scale": "color", "field": "countryLabel"}, "interpolate": {"value": "linear"}, "strokeWidth": {"value": 2.5} } } } ], }, // Draw title at the top of the graph { "type": "text", "properties": { "enter": { "y": {"value": -15}, "x": {"signal": "rightwidth", "mult": 0.5, "offset": 0 }, "text": {"value": "Population of countries bordering Germany"}, "fontWeight": {"value": "bold"}, "align": {"value": "center"}, "baseline": {"value": "bottom"}, "fill": {"value": "#000"} } } } ] } </graph> Population of countries bordering Germany. .

---

Wikipedia-specific options added to this template:

Parameter		Description	Type	Status
Thumbnail	thumb, 1	If set, will style the chart with a border that matches that used for image thumbnails	Boolean	optional
Location	align, 2	Implements the left, right, center, and none alignment options as described at image thumbnails. Defaults to right if |thumb=true, otherwise defaults to none	String	optional
Caption	caption, 3	hideSource=true, it should include a link to the source data. Otherwise, make sure to end the caption with a period so it will display correctly with the source data after it.	String	optional
Hide source text	hideSource	If set, hides the "See or edit source data" text under the chart. If set, make sure to include a link to the source data elsewhere (such as in the caption).	Boolean	optional

Template calls can use the parameters by name, or they can be formatted similarly to normal image syntax. For example:

{{Graph:Lines | thumb=true | align=left

caption=Per state GDP (via [[:Commons:Data:Bea.gov/GDP by state.tab]])

table=Bea.gov/GDP by state.tab

xField=year | legend=States

series="TX","NY","CA"

chartSizing=fit

hideSource=true }}

{{Graph:Lines | thumb | center | Per state GDP.

table=Bea.gov/GDP by state.tab

xField=year | legend=States

series="TX","NY","CA"

title=Per state GDP

chartSizing=fit }}

<graph> { // // ATTENTION: This code is maintained at https://www.mediawiki.org/wiki/Template:Graph:Lines // Please do not modify it anywhere else, as it may get copied and override your changes. // Suggestions can be made at https://www.mediawiki.org/wiki/Template_talk:Graph:Lines // // Template translation is in https://commons.wikimedia.org/wiki/Data:Original/Template:Graphs.tab // "version": 2, "width": 400, "height": 300, "padding": "strict", "signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"400"}], "data": [{ "name": "chart", "url": "tabular:///Bea.gov/GDP by state.tab", "format": {"type": "json" , "property": "data" }, "transform": [ // Convert xField parameter into a field "_xfield" {"type": "formula", "field": "_xfield", "expr": "datetime(datum.year, 0, 1)" } , {"type": "sort", "by": ["_xfield"]} , {"type": "fold", "fields": ["TX","NY","CA"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" } ] }, // source of labels for `tabletype=tab` { "name": "labels", "url": "tabular:///Bea.gov/GDP by state.tab", "format": {"type": "json", "property": "fields"}, "transform": [ ] }, ], "scales": [ { "name": "x", "type": "time", "domain": {"data": "chart", "field": "_xfield"}, "range": "width", }, { "name": "y", "type": "linear", "range": "height", "domain": {"data": "chart", "field": "_yfield"}, }, { "name": "color", "type": "ordinal", "range": "category10", "domain": {"data": "chart", "field": "key"} }, { "name": "labels", "type": "ordinal", "domain": {"data": "labels", "field": "name"}, "range": {"data": "labels", "field": "title"}, } ], "legends": [{ "fill": "color", "stroke": "color", "title": "States", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } } }], "axes": [ { "scale": "x", "type": "x", "tickSizeEnd": 0, "ticks": 7, "properties": { "labels": { } } }, { "scale": "y", "type": "y", "tickSizeEnd": 0, "properties": { "labels": { } } } ], "marks": [ // Group data by the group parameter or "key", and draw lines, one line per group { "type": "group", "from": { "data": "chart", "transform": [{"type": "facet", "groupby": ["key"]}] }, "marks": [ { "type": "line", "properties": { "hover": { "stroke": {"value": "red"} }, "update": { "stroke": {"scale": "color", "field": "key"} }, "enter": { "y": {"scale": "y", "field": "_yfield"}, "x": {"scale": "x", "field": "_xfield"}, "stroke": {"scale": "color", "field": "key"}, "interpolate": {"value": "linear"}, "strokeWidth": {"value": 2.5} } } } ], }, // Draw title at the top of the graph { "type": "text", "properties": { "enter": { "y": {"value": -15}, "x": {"signal": "rightwidth", "mult": 0.5, "offset": 0 }, "text": {"value": "Per state GDP"}, "fontWeight": {"value": "bold"}, "align": {"value": "center"}, "baseline": {"value": "bottom"}, "fill": {"value": "#000"} } } } ] } </graph> Per state GDP (via Commons:Data:Bea.gov/GDP by state.tab)

<graph> { // // ATTENTION: This code is maintained at https://www.mediawiki.org/wiki/Template:Graph:Lines // Please do not modify it anywhere else, as it may get copied and override your changes. // Suggestions can be made at https://www.mediawiki.org/wiki/Template_talk:Graph:Lines // // Template translation is in https://commons.wikimedia.org/wiki/Data:Original/Template:Graphs.tab // "version": 2, "width": 400, "height": 300, "padding": "strict", "signals": [{"name": "rightwidth", "expr": "width + padding.right", "init":"400"}], "data": [{ "name": "chart", "url": "tabular:///Bea.gov/GDP by state.tab", "format": {"type": "json" , "property": "data" }, "transform": [ // Convert xField parameter into a field "_xfield" {"type": "formula", "field": "_xfield", "expr": "datetime(datum.year, 0, 1)" } , {"type": "sort", "by": ["_xfield"]} , {"type": "fold", "fields": ["TX","NY","CA"]} , {"type": "formula", "field": "_yfield", "expr": "datum.value" } ] }, // source of labels for `tabletype=tab` { "name": "labels", "url": "tabular:///Bea.gov/GDP by state.tab", "format": {"type": "json", "property": "fields"}, "transform": [ ] }, ], "scales": [ { "name": "x", "type": "time", "domain": {"data": "chart", "field": "_xfield"}, "range": "width", }, { "name": "y", "type": "linear", "range": "height", "domain": {"data": "chart", "field": "_yfield"}, }, { "name": "color", "type": "ordinal", "range": "category10", "domain": {"data": "chart", "field": "key"} }, { "name": "labels", "type": "ordinal", "domain": {"data": "labels", "field": "name"}, "range": {"data": "labels", "field": "title"}, } ], "legends": [{ "fill": "color", "stroke": "color", "title": "States", "properties": { "labels": { "text": {"scale": "labels", "field": "data"} } } }], "axes": [ { "scale": "x", "type": "x", "tickSizeEnd": 0, "ticks": 7, "properties": { "labels": { } } }, { "scale": "y", "type": "y", "tickSizeEnd": 0, "properties": { "labels": { } } } ], "marks": [ // Group data by the group parameter or "key", and draw lines, one line per group { "type": "group", "from": { "data": "chart", "transform": [{"type": "facet", "groupby": ["key"]}] }, "marks": [ { "type": "line", "properties": { "hover": { "stroke": {"value": "red"} }, "update": { "stroke": {"scale": "color", "field": "key"} }, "enter": { "y": {"scale": "y", "field": "_yfield"}, "x": {"scale": "x", "field": "_xfield"}, "stroke": {"scale": "color", "field": "key"}, "interpolate": {"value": "linear"}, "strokeWidth": {"value": 2.5} } } } ], }, // Draw title at the top of the graph { "type": "text", "properties": { "enter": { "y": {"value": -15}, "x": {"signal": "rightwidth", "mult": 0.5, "offset": 0 }, "text": {"value": "Per state GDP"}, "fontWeight": {"value": "bold"}, "align": {"value": "center"}, "baseline": {"value": "bottom"}, "fill": {"value": "#000"} } } } ] } </graph> Per state GDP. .