Template:Graph:Lines
Jump to navigation
Jump to search
<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", "init":"400"}],
"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,
"properties": {
"labels": {
}
}
},
{
"scale": "y", "type": "y", "tickSizeEnd": 0,
"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": "monotone"},
"strokeWidth": {"value": 2.5}
}
}
}
],
},
]
}
</graph>