Template:Graph:Lines/testcases
 | This is the template test cases page for the sandbox of Template:Graph:Lines. to update the examples. |
Testing sandbox versionEdit
See or edit raw graph data.
Log scaledEdit
With |replaceZerosWith=1Edit
See or edit raw graph data.
Without |replaceZerosWith=Edit
See or edit raw graph data.
Testing main templateEdit
See or edit raw graph data.
Testing for inverted y-axisEdit
See or edit raw graph data.
See or edit raw graph data.
Test dataset optional filtering (e.g. for limiting x-axis displayed range)Edit
without filtering (default width)Edit
See or edit raw graph data.
filter = 1995 <= datum.year && datum.year <= 2002Edit
See or edit raw graph data.
filter = datum.year <= 2002Edit
See or edit raw graph data.
Test optional arbitrary ("raw") data transformsEdit
dataTransforms = { "type": "filter", ... }, { "type": "filter", ... }Edit
See or edit raw graph data.
Test chart sizing (enabling/disabling chart width grows)Edit
without explicit `chartSizing` (default chart sizing model)Edit
See or edit raw graph data.
chartSizing=fit | chartSizing=padding-boxEdit
See or edit raw graph data.
See or edit raw graph data.
chartSizing=pad | chartSizing=content-boxEdit
See or edit raw graph data.
See or edit raw graph data.
Test chart title positioningEdit
default chart title positioning | default chart sizing modeEdit
See or edit raw graph data.
See or edit raw graph data.
default chart title positioning | chartSizing=pad | xMin=1982 | xMax=2002 | xAxisClamp=falseEdit
See or edit raw graph data.
titleXAlign=leftEdit
See or edit raw graph data.
See or edit raw graph data.
titleXAlign=rightEdit
See or edit raw graph data.
See or edit raw graph data.
titleXAlign=centerEdit
See or edit raw graph data.
See or edit raw graph data.
titleXAlign=center | titleXOffset=80Edit
See or edit raw graph data.
Test axis domain min/max values values + clampingEdit
It is possible to extend axis scales. And it is possible to shrink axis scale by manually providing scale domain min/max values, however without having "clamp":true it will not crop data plotting itself, but only affect axis positioning on graph, while adding "clamp":true actually applies data plotting cropping.
type=yearEdit
xAxisMin=1994 | xAxisMax=2020 | yAxisMax=120 | yAxisMin=20 | yZero=falseEdit
See or edit raw graph data.
See or edit raw graph data.
xMin=1982 | xMax=2002 | yAxisMin=60 | yAxisMax=90| (without clamping)Edit
See or edit raw graph data.
Syntax error
See or edit raw graph data.
xMin=1982 | xMax=2002 | yAxisMin=60 | yAxisMax=90| xAxisClamp=true | yAxisClamp=trueEdit
See or edit raw graph data.
See or edit raw graph data.
Test axis marks font size, angle + test legend labels transformEdit
xAxisAngle = -25 | xAxisFontSize = 20 | yAxisAngle = 25 | yAxisFontSize = 20 | labelsTransforms = { ... }Edit
See or edit raw graph data.
Test annotationsEdit
type=yearEdit
hAnnotationsValues = {"text": "v 92.5", "y": 92.5} | vAnnotationsValues = {"text": "v 93", "x": 1983}Edit
See or edit raw graph data.
hAnnotationsTable = ... | hAnnotationsTransforms = ... | vAnnotationsTable = ... | vAnnotationsTransforms = ...Edit
See or edit raw graph data.
type=linearEdit
hAnnotationsValues = {"text": "v 92.5", "y": 92.5} | vAnnotationsValues = {"text": "v 93", "x": 1983}Edit
See or edit raw graph data.
hAnnotationsTable = ... | hAnnotationsTransforms = ... | vAnnotationsTable = ... | vAnnotationsTransforms = ...Edit
See or edit raw graph data.
Checking the JSON outputEdit
{
//
// 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:///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": [
]
},
],
"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": ["#0000aa","#ff8000"],
"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 (sandbox)",
"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}
}
}
}
],
},
// 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"}
}
}
}
]
}See or edit raw graph data.
<templatedata>