Template:Graph:Stacked/core

Template documentation[view] [edit] [history] [purge]

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

{{Graph:Stacked	table=Bea.gov/GDP by state.tab	xField=year | barwidth=14	series="TX","NY","CA"	title=Per state GDP	chartSizing=fit }}	{{Graph:Stacked	table=Bea.gov/GDP by state.tab	xField=year | legend=States	series="TX","NY","CA"	title=Per state GDP	chartSizing=fit }}
<graph> { "version": 2, "width": 550, "height": 250, "padding": "strict", "data": [ { "name": "series_fields_names", "values": [ "TX","NY","CA" ], "transform": [ {"type": "formula", "field": "orderSrc", "expr": "datum._id"}, ] }, { "name": "chart", "url": "tabular:///Bea.gov/GDP by state.tab", "format": {"type": "json" , "property": "data" }, "transform": [ {"type": "formula", "field": "_xfield", "expr": "datetime(datum.year, 0, 1)" }, {"type": "sort", "by": ["_xfield"]}, {"type": "fold", "fields": ["TX","NY","CA"]}, {"type": "lookup", "on": "series_fields_names", "onKey": "data", "keys": ["key"], "as": ["keyItem"]}, {"type": "formula", "field": "keyOrder", "expr": "datum.keyItem.orderSrc"}, ] }, { "name": "labels", "url": "tabular:///Bea.gov/GDP by state.tab", "format": {"type": "json", "property": "fields"}, "transform": [ ] }, { "name": "stats", "source": "chart", "transform": [{ "type": "aggregate", "groupby": ["_xfield"], "summarize": [{"field": "value", "ops": ["sum"]}] }] } ], "scales": [ { "name": "x", "type": "time", "domain": {"data": "chart", "field": "_xfield"}, "range": "width", }, { "name": "y", "type": "linear", "range": "height", "domain": {"data": "stats", "field": "sum_value"}, }, { "name": "color", "type": "ordinal", "domain": {"data": "chart", "field": "key"}, "range": "category10", }, { "name": "labels", "type": "ordinal", "domain": {"data": "labels", "field": "name"}, "range": {"data": "labels", "field": "title"}, } ], "axes": [ { "scale": "x", "type": "x", "tickSizeEnd": 0, "ticks": 7, "properties": { "labels": { } }, }, { "scale": "y", "type": "y", "tickSizeEnd": 0, "offset": 8, "properties": { "labels": { } }, } ], "marks": [ { "type": "rect", "from": { "data": "chart", "transform": [ {"type": "stack", "groupby": ["_xfield"], "sortby": ["-keyOrder"], "field": "value"} ] }, "properties": { "hover": { "fill": { "value": "red" } }, "update": { "fill": {"scale": "color", "field": "key"} }, "enter": { "x": {"scale": "x", "field": "_xfield" ,"offset":-7 }, "width": {"value": 14 }, "y": {"scale": "y", "field": "layout_start"}, "y2": {"scale": "y", "field": "layout_end"}, "fill": {"scale": "color", "field": "key"} } } }, { "type": "text", "properties": { "enter": { "y": {"value": -15}, "x": {"signal": "width", "mult": 0.5, "offset": 30 }, "text": {"value": "Per state GDP"}, "fontWeight": {"value": "bold"}, "align": {"value": "center"}, "baseline": {"value": "bottom"}, "fill": {"value": "#000"} } } } ] } </graph> Per state GDP. .	<graph> { "version": 2, "width": 550, "height": 250, "padding": "strict", "data": [ { "name": "series_fields_names", "values": [ "TX","NY","CA" ], "transform": [ {"type": "formula", "field": "orderSrc", "expr": "datum._id"}, ] }, { "name": "chart", "url": "tabular:///Bea.gov/GDP by state.tab", "format": {"type": "json" , "property": "data" }, "transform": [ {"type": "formula", "field": "_xfield", "expr": "datetime(datum.year, 0, 1)" }, {"type": "sort", "by": ["_xfield"]}, {"type": "fold", "fields": ["TX","NY","CA"]}, {"type": "lookup", "on": "series_fields_names", "onKey": "data", "keys": ["key"], "as": ["keyItem"]}, {"type": "formula", "field": "keyOrder", "expr": "datum.keyItem.orderSrc"}, { "type": "impute", "groupby": ["key"], "orderby": ["_xfield"], "field": "value", "method": "value", "value": 0 }, ] }, { "name": "labels", "url": "tabular:///Bea.gov/GDP by state.tab", "format": {"type": "json", "property": "fields"}, "transform": [ ] }, { "name": "stats", "source": "chart", "transform": [{ "type": "aggregate", "groupby": ["_xfield"], "summarize": [{"field": "value", "ops": ["sum"]}] }] } ], "scales": [ { "name": "x", "type": "time", "domain": {"data": "chart", "field": "_xfield"}, "range": "width", }, { "name": "y", "type": "linear", "range": "height", "domain": {"data": "stats", "field": "sum_value"}, }, { "name": "color", "type": "ordinal", "domain": {"data": "chart", "field": "key"}, "range": "category10", }, { "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": [ { "type": "group", "from": { "data": "chart", "transform": [ {"type": "stack", "groupby": ["_xfield"], "sortby": ["-keyOrder"], "field": "value"}, {"type": "facet", "groupby": ["key"]} ] }, "marks": [ { "type": "area", "properties": { "hover": { "fill": {"value": "red"} }, "update": { "fill": {"scale": "color", "field": "key"} }, "enter": { "x": {"scale": "x", "field": "_xfield"}, "y": {"scale": "y", "field": "layout_start"}, "y2": {"scale": "y", "field": "layout_end"}, "fill": {"scale": "color", "field": "key"}, "interpolate": {"value": "monotone"} } } } ], }, { "type": "text", "properties": { "enter": { "y": {"value": -15}, "x": {"signal": "width", "mult": 0.5, "offset": 30 }, "text": {"value": "Per state GDP"}, "fontWeight": {"value": "bold"}, "align": {"value": "center"}, "baseline": {"value": "bottom"}, "fill": {"value": "#000"} } } } ] } </graph> Per state GDP. .
{{Graph:Stacked | 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) } GROUP BY ?decade ORDER BY ?decade	type=year | xField=decade	title=Paintings by decade }}	{{Graph:Stacked | tabletype=query | table= SELECT ?year (COUNT(?_genre) AS ?count ) (SAMPLE(?_genreLabel) AS ?label ) WHERE { ?item wdt:P31 wd:Q11424. ?item wdt:P577 ?_publication_date. ?item wdt:P136 ?_genre. ?_genre rdfs:label ?_genreLabel. BIND(str(YEAR(?_publication_date)) AS ?year) FILTER((LANG(?_genreLabel)) = "en") FILTER (?_publication_date >= "2000-00-00T00:00:00Z"^^xsd:dateTime) } GROUP BY ?_genreLabel ?year HAVING (?count > 30)	xField=year | group=label | value=count | legend=-	title=Number of films by year and genre	yGrid=y | colors="category20" | height=460 | barwidth=16 }}
<graph> { "version": 2, "width": 550, "height": 250, "data": [ { "name": "series_fields_names", "values": [ "count" ], "transform": [ {"type": "formula", "field": "orderSrc", "expr": "datum._id"}, ] }, { "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%7D%20GROUP%20BY%20%3Fdecade%20ORDER%20BY%20%3Fdecade", "format": {"type": "json" }, "transform": [ {"type": "formula", "field": "_xfield", "expr": "datetime(datum.decade, 0, 1)" }, {"type": "sort", "by": ["_xfield"]}, {"type": "fold", "fields": ["count"]}, {"type": "lookup", "on": "series_fields_names", "onKey": "data", "keys": ["key"], "as": ["keyItem"]}, {"type": "formula", "field": "keyOrder", "expr": "datum.keyItem.orderSrc"}, { "type": "impute", "groupby": ["key"], "orderby": ["_xfield"], "field": "value", "method": "value", "value": 0 }, ] }, { "name": "stats", "source": "chart", "transform": [{ "type": "aggregate", "groupby": ["_xfield"], "summarize": [{"field": "value", "ops": ["sum"]}] }] } ], "scales": [ { "name": "x", "type": "time", "domain": {"data": "chart", "field": "_xfield"}, "range": "width", }, { "name": "y", "type": "linear", "range": "height", "domain": {"data": "stats", "field": "sum_value"}, }, { "name": "color", "type": "ordinal", "domain": {"data": "chart", "field": "key"}, "range": "category10", }, { "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, "properties": { "labels": { } }, } ], "marks": [ { "type": "group", "from": { "data": "chart", "transform": [ {"type": "stack", "groupby": ["_xfield"], "sortby": ["-keyOrder"], "field": "value"}, {"type": "facet", "groupby": ["key"]} ] }, "marks": [ { "type": "area", "properties": { "hover": { "fill": {"value": "red"} }, "update": { "fill": {"scale": "color", "field": "key"} }, "enter": { "x": {"scale": "x", "field": "_xfield"}, "y": {"scale": "y", "field": "layout_start"}, "y2": {"scale": "y", "field": "layout_end"}, "fill": {"scale": "color", "field": "key"}, "interpolate": {"value": "monotone"} } } } ], }, { "type": "text", "properties": { "enter": { "y": {"value": -15}, "x": {"signal": "width", "mult": 0.5, "offset": 30 }, "text": {"value": "Paintings by decade"}, "fontWeight": {"value": "bold"}, "align": {"value": "center"}, "baseline": {"value": "bottom"}, "fill": {"value": "#000"} } } } ] } </graph> Paintings by decade. .	<graph> { "version": 2, "width": 550, "height": 460, "data": [ { "name": "chart", "url": "wikidatasparql:///?query=SELECT%20%20%20%3Fyear%20%20%28COUNT%28%3F_genre%29%20AS%20%3Fcount%20%29%20%28SAMPLE%28%3F_genreLabel%29%20AS%20%3Flabel%20%29%20WHERE%20%7B%0A%20%20%3Fitem%20wdt%3AP31%20wd%3AQ11424.%0A%20%20%3Fitem%20wdt%3AP577%20%3F_publication_date.%0A%20%20%3Fitem%20wdt%3AP136%20%3F_genre.%0A%20%20%3F_genre%20rdfs%3Alabel%20%3F_genreLabel.%0A%20%20BIND%28str%28YEAR%28%3F_publication_date%29%29%20AS%20%3Fyear%29%0A%20%20FILTER%28%28LANG%28%3F_genreLabel%29%29%20%3D%20%22en%22%29%0A%20%20%0A%20FILTER%20%28%3F_publication_date%20%3E%3D%20%222000-00-00T00%3A00%3A00Z%22%5E%5Exsd%3AdateTime%29%0A%7D%0AGROUP%20BY%20%3F_genreLabel%20%3Fyear%0AHAVING%20%28%3Fcount%20%3E%2030%29", "format": {"type": "json" }, "transform": [ {"type": "formula", "field": "_xfield", "expr": "datetime(datum.year, 0, 1)" }, {"type": "sort", "by": ["_xfield"]}, ] }, { "name": "stats", "source": "chart", "transform": [{ "type": "aggregate", "groupby": ["_xfield"], "summarize": [{"field": "count", "ops": ["sum"]}] }] } ], "scales": [ { "name": "x", "type": "time", "domain": {"data": "chart", "field": "_xfield"}, "range": "width", }, { "name": "y", "type": "linear", "range": "height", "domain": {"data": "stats", "field": "sum_count"}, }, { "name": "color", "type": "ordinal", "domain": {"data": "chart", "field": "label"}, "range": "category20", }, ], "legends": [{ "fill": "color", "stroke": "color", }], "axes": [ { "scale": "x", "type": "x", "tickSizeEnd": 0, "ticks": 7, "grid": true, "properties": { "labels": { } }, }, { "scale": "y", "type": "y", "tickSizeEnd": 0, "offset": 9, "grid": true, "properties": { "labels": { } }, } ], "marks": [ { "type": "rect", "from": { "data": "chart", "transform": [ {"type": "stack", "groupby": ["_xfield"], "sortby": ["label"], "field": "count"} ] }, "properties": { "hover": { "fill": { "value": "red" } }, "update": { "fill": {"scale": "color", "field": "label"} }, "enter": { "x": {"scale": "x", "field": "_xfield" ,"offset":-8 }, "width": {"value": 16 }, "y": {"scale": "y", "field": "layout_start"}, "y2": {"scale": "y", "field": "layout_end"}, "fill": {"scale": "color", "field": "label"} } } }, { "type": "text", "properties": { "enter": { "y": {"value": -15}, "x": {"signal": "width", "mult": 0.5, "offset": 30 }, "text": {"value": "Number of films by year and genre"}, "fontWeight": {"value": "bold"}, "align": {"value": "center"}, "baseline": {"value": "bottom"}, "fill": {"value": "#000"} } } } ] } </graph> Number of films by year and genre. .

Other examples available at testcases page: Template:Graph:Stacked/testcases.

The above documentation is transcluded from Template:Graph:Stacked/core/doc. (edit | history)
Editors can experiment in this template's sandbox (create | mirror) and testcases (create) pages.
Add categories to the /doc subpage. Subpages of this template.

<graph>

{
  //
  // ATTENTION: This code is maintained at https://www.mediawiki.org/wiki/Template:Graph:Stacked
  //            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:Graph:Stacked
  //
  // Template translation is in https://commons.wikimedia.org/wiki/Data:Original/Template:Graphs.tab
  //

  "version": 2,
  "width": 550,
  "height": 250,
  // Parameter to controls how width/height should be interpreted.
  // See Vega 2.x "padding" https://vega.github.io/vega/docs/porting-guide/#layout
  // and Vega x.x "autosize" https://vega.github.io/vega-lite/docs/size.html#autosize
  // and CSS attribute "box-sizing" https://developer.mozilla.org/docs/Web/CSS/box-sizing
  // for references


  "data": [

    {
      "name": "chart",

"url": "tabular:///{{{table}}}",
      "format": {"type": "json"
, "property": "data"

      },
    "transform": [



      // Convert xField parameter into a field "_xfield"
      {"type": "formula", "field": "_xfield", "expr":
"datum.{{{xField}}}"
      },
      {"type": "sort", "by": ["_xfield"]},

      // For non-bar graph, ensure that all missing values still present as zeros to avoid area breaks
      // We might need to allow other, non-0 values to be imputed.
{
        "type": "impute",
        "groupby": ["key"],
        "orderby": ["_xfield"],
        "field": "value",
        "method": "value",
        "value": 0
      },
    ]
  },



    {
      "name": "stats",
      "source": "chart",
      "transform": [{
        "type": "aggregate",
        "groupby": ["_xfield"],
        "summarize": [{"field": "value", "ops": ["sum"]}]
      }]
    }
  ],
  "scales": [
    {
      "name": "x",
      "type": "{{{type}}}",
      "domain": {"data": "chart", "field": "_xfield"},

      "range": "width",
      

      
    },
    {
      "name": "y",
      "type": "linear",
      "range": "height",
      "domain": {"data": "stats", "field": "sum_value"},
      
      
      
      
    },
    {
      "name": "color",
      "type": "ordinal",
      "domain": {"data": "chart", "field": "key"},
      "range": 
"category10", 

    },

  ],

  "axes": [
    {
      "scale": "x", "type": "x", "tickSizeEnd": 0,
      "ticks": 7,
      
      
      "properties": { 
        "labels": { 
          
          
        } 
      },
    },
    {
      "scale": "y", "type": "y", "tickSizeEnd": 0,
      // When drawing "type=year" (or "type=ordinal") bars with the given width, shift y axis left by half the width
      
      
      
      
      "properties": { 
        "labels": { 
          
          
        } 
      },
    }
  ],

  "marks": [
    // Group data by the "key", and draw lines, one line per key
    {
"type": "group",
      "from": {
        "data": "chart",
        "transform": [
          {"type": "stack", "groupby": ["_xfield"], "sortby": ["key"], "field": "value"},
          {"type": "facet", "groupby": ["key"]}
        ]
      },
      "marks": [
        {
          "type": "area",
          "properties": {
            "hover": {
              "fill": {"value": "red"}
            },
            "update": {
              "fill": {"scale": "color", "field": "key"}
            },
            "enter": {
              "x": {"scale": "x", "field": "_xfield"},
              "y": {"scale": "y", "field": "layout_start"},
              "y2": {"scale": "y", "field": "layout_end"},
              "fill": {"scale": "color", "field": "key"},
              "interpolate": {"value": "monotone"}
            }
          }
        }
      ],
    },



  ]
}

</graph>