Template:Graph:Lines/testcases

From mediawiki.org
Jump to navigation Jump to search

Testing sandbox version[edit]

See or edit raw graph data.


Log scaled[edit]

With |replaceZerosWith=1[edit]

See or edit raw graph data.


Without |replaceZerosWith=[edit]

See or edit raw graph data.


Testing main template[edit]

See or edit raw graph data.


Testing for inverted y-axis[edit]

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 <= 2002[edit]

See or edit raw graph data.


filter = datum.year <= 2002[edit]

See or edit raw graph data.


Test optional arbitrary ("raw") data transforms[edit]

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-box[edit]

See or edit raw graph data.

See or edit raw graph data.


chartSizing=pad | chartSizing=content-box[edit]

See or edit raw graph data.

See or edit raw graph data.


Test chart title positioning[edit]

default chart title positioning | default chart sizing mode[edit]

See or edit raw graph data.

See or edit raw graph data.

default chart title positioning | chartSizing=pad | xMin=1982 | xMax=2002 | xAxisClamp=false[edit]

See or edit raw graph data.


titleXAlign=left[edit]

See or edit raw graph data.

See or edit raw graph data.


titleXAlign=right[edit]

See or edit raw graph data.

See or edit raw graph data.


titleXAlign=center[edit]

See or edit raw graph data.

See or edit raw graph data.


titleXAlign=center | titleXOffset=80[edit]

See or edit raw graph data.


Test axis domain min/max values values + clamping[edit]

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=year[edit]

xAxisMin=1994 | xAxisMax=2020 | yAxisMax=120 | yAxisMin=20 | yZero=false[edit]

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.

See or edit raw graph data.


xMin=1982 | xMax=2002 | yAxisMin=60 | yAxisMax=90| xAxisClamp=true | yAxisClamp=true[edit]

See or edit raw graph data.

See or edit raw graph data.


Test axis marks font size, angle + test legend labels transform[edit]

xAxisAngle = -25 | xAxisFontSize = 20 | yAxisAngle = 25 | yAxisFontSize = 20 | labelsTransforms = { ... }[edit]

See or edit raw graph data.


Test annotations[edit]

type=year[edit]

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=linear[edit]

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 output[edit]

{
  //
  // 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"}],
  "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" }

    ]
  },
{
    "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"}
  }
  ],
  "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"


},
    {"scale": "y", "type": "y", "tickSizeEnd": 0

, "title": "Percentage"

, "grid": true
}
  ],

  "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": {
            "enter": {
              "y": {"scale": "y", "field": "_yfield"},
              "x": {"scale": "x", "field": "_xfield"},
              "stroke": {"scale": "color", "field": "key"},
              "interpolate": {"value": "monotone"},
              "strokeWidth": {"value": 2.5}
            }
          }
        }
      ],
    }

// Draw title at the top of the graph
,   {
      "type": "text",
      "properties": {
        "enter": {
          "x": {"signal": "rightwidth", "mult": 0.5},
          "y": {"value": -15},
          "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.