Template:Graph:Lines

Template documentation

Editors can experiment in this template's sandbox (create | mirror) and testcases (create) pages.
Please add categories to the /doc subpage. Subpages of this template.

<graph mode="interactive" title="">

{
  //
  // 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:///{{{table}}}",
    "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": "formula", "field": "_yfield", "expr": "datum.value" }

    ]
  },

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

  ],

  "axes": [
    {"scale": "x", "type": "x", "tickSizeEnd": 0
, "ticks": 7



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




}
  ],

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


  ]
}

</graph>