User:Zache/graph

From mediawiki.org
Documentation
<graph>
{
  //
  // ATTENTION: This code is maintained at https://www.mediawiki.org/wiki/Template:Graph:Population_history
  //            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:Population_history
  //

  "version": 2,
  "width": 400,
  "height": 200,

  // The population data for this graph comes from Wikidata.
  "data": [
    {
      "name": "table",
      "url": "wikidatasparql:///?query=SELECT%20%28MAX%28%3Felorating%29%20as%20%3Felorating%29%20%3Fyear%20WHERE%20%7B%0A%20%20%20%20%23%20set%20the%20item%20here%20-%20e.g.%20city%2C%20country%0A%09BIND%28wd%3AQ2193599%20as%20%3Fitem%29%0A%20%20%20%20%3Fitem%20p%3AP1087%20%3Felostatement%20.%0A%20%20%20%20%3Felostatement%20ps%3AP1087%20%3Felorating%20.%0A%20%20%20%20OPTIONAL%20%7B%0A%20%20%20%20%20%20%3Felostatement%20pq%3AP585%20%3Fdate%20.%0A%20%20%20%20%20%20BIND%28year%28%3Fdate%29%20as%20%3Fyear%29%0A%20%20%20%20%7D%0A%7D%20GROUP%20BY%20%3Fyear%20ORDER%20BY%20ASC%28%3Fyear%29",
      "format": {
        "type": "json"
      },

      // Convert year integer (2016) into a date object (2016-01-01)
      "transform": [{ "type": "formula", "field": "date", "expr": "datetime(datum.year,0,1)" }]
    }
  ],

  "scales": [
    // The dates are scaled to the "x" axis - the width of the graph
    {
      "name": "x",
      "type": "time",
      "range": "width",
      "domain": {"data": "table","field": "date"}
    },
    // The population are scaled to the "y" axis - the height of the graph
    // Optional scale parameter can change "linear" to other scales like log
    // Optional max parameter can fix the upper bound of the graph
    {
      "name": "y",
      "type": "linear",
      "range": "height",
      "domain": {"data": "table","field": "elorating"},
      "clamp": true,

      "nice": true
    }
  ],

  // Simple axis with horizontal grid lines
  "axes": [
    {"type": "x", "scale": "x", "ticks": 5},
    {"type": "y", "scale": "y", "ticks": 5, "grid": true, "orient":"right"}
  ],

  // The graph is drawn with two elements a thick line at the top, and a semi-transparent area below
  "marks": [
    {
      "type": "area",
      "from": {"data": "table"},
      "properties": {
        "enter": {
          "x": {"scale": "x","field": "date"},
          "y": {"scale": "y","value": 0},
          "y2": {"scale": "y","field": "elorating"},
          "fill": {"value": "#99B2CC"},
          "fillOpacity": {"value": 0.35},
          "interpolate": {"value": "monotone"}
        }
      }
    },
    {
      "type": "line",
      "from": {"data": "table"},
      "properties": {
        "enter": {
          "x": {"scale": "x","field": "date"},
          "y": {"scale": "y","field": "elorating"},
          "stroke": {"value": "#99B2CC"},
          "strokeWidth": {"value": 3},
          "interpolate": {"value": "monotone"}
        }
      }
    },
    {
      "type": "symbol",
      "from": {"data": "table"},
      "properties": {
        "enter": {
          "x": {"scale": "x","field": "date"},
          "y": {"scale": "y","field": "elorating"},
          "stroke": {"value": "#99B2CC"},
          "fill": {"value": "#fff"},
          "size": {"value": 30}
        }
      }
    }
  ]
}
</graph>