Шаблон:Graph:Chart: различия между версиями
Перейти к навигации
Перейти к поиску
Admin (обсуждение | вклад) Нет описания правки |
Admin (обсуждение | вклад) Нет описания правки Метка: отменено |
||
| Строка 126: | Строка 126: | ||
], | ], | ||
} | } | ||
</graph> | |||
== @ uhfabr == | |||
<graph> | |||
{ | |||
"width": 650, | |||
"height": 300, | |||
"padding": "strict", | |||
"signals": [ | |||
{ | |||
"name": "indexDate", | |||
"init": {"expr": "time('Jan 1 2005')"}, | |||
"streams": [{ | |||
"type": "mousemove", | |||
"expr": "clamp(eventX(), 0, eventGroup('root').width)", | |||
"scale": {"name": "x", "invert": true} | |||
}] | |||
}, | |||
{"name": "maxDate", "init": {"expr": "time('Mar 1 2010')"}} | |||
], | |||
"data": [ | |||
{ | |||
"name": "stocks", | |||
"url": "data/stocks.csv", | |||
"format": {"type": "csv", "parse": {"price":"number", "date":"date"}} | |||
}, | |||
{ | |||
"name": "index", | |||
"source": "stocks", | |||
"transform": [{ | |||
"type": "filter", | |||
"test": "month(datum.date) == month(indexDate) && year(datum.date) == year(indexDate)" | |||
}] | |||
}, | |||
{ | |||
"name": "indexified_stocks", | |||
"source": "stocks", | |||
"transform": [{ | |||
"type": "lookup", | |||
"on": "index", "onKey": "symbol", | |||
"keys": ["symbol"], "as": ["index_term"], | |||
"default": {"price": 0} | |||
}, { | |||
"type": "formula", | |||
"field": "indexed_price", | |||
"expr": "datum.index_term.price > 0 ? (datum.price - datum.index_term.price)/datum.index_term.price : 0" | |||
}] | |||
} | |||
], | |||
"scales": [ | |||
{ | |||
"name": "x", | |||
"type": "time", | |||
"domain": {"data": "stocks", "field": "date"}, | |||
"range": "width" | |||
}, | |||
{ | |||
"name": "y", | |||
"type": "linear", | |||
"domain": {"data": "indexified_stocks", "field": "indexed_price"}, | |||
"range": "height", | |||
"nice": true | |||
}, | |||
{ | |||
"name": "color", | |||
"type": "ordinal", | |||
"domain": {"data": "stocks", "field": "symbol"}, | |||
"range": "category10" | |||
} | |||
], | |||
"axes": [ | |||
{"type": "y", "scale": "y", "grid": true, "layer": "back", "format": "%"} | |||
], | |||
"marks": [ | |||
{ | |||
"type": "group", | |||
"from": { | |||
"data": "indexified_stocks", | |||
"transform": [{"type": "facet", "groupby": ["symbol"]}] | |||
}, | |||
"marks": [ | |||
{ | |||
"type": "line", | |||
"properties": { | |||
"update": { | |||
"x": {"scale": "x", "field": "date"}, | |||
"y": {"scale": "y", "field": "indexed_price"}, | |||
"stroke": {"scale": "color", "field": "symbol"}, | |||
"strokeWidth": {"value": 2} | |||
} | |||
} | |||
}, | |||
{ | |||
"type": "text", | |||
"from": { | |||
"transform": [{"type": "filter", "test": "datum.date == maxDate"}] | |||
}, | |||
"properties": { | |||
"update": { | |||
"x": {"scale": "x", "field": "date", "offset": 2}, | |||
"y": {"scale": "y", "field": "indexed_price"}, | |||
"fill": {"scale": "color", "field": "symbol"}, | |||
"text": {"field": "symbol"}, | |||
"baseline": {"value": "middle"} | |||
} | |||
} | |||
} | |||
] | |||
}, | |||
{ | |||
"type":"rule", | |||
"properties": { | |||
"update": { | |||
"x": {"field": {"group": "x"}}, | |||
"x2": {"field": {"group": "width"}}, | |||
"y": {"scale": "y", "value": 0}, | |||
"stroke": {"value": "black"}, | |||
"strokeWidth": {"value": 1} | |||
} | |||
} | |||
}, | |||
{ | |||
"type":"rule", | |||
"properties": { | |||
"update": { | |||
"x": {"scale": "x", "signal": "indexDate"}, | |||
"y": {"value": 0}, | |||
"y2": {"field": {"group": "height"}}, | |||
"stroke": {"value": "red"} | |||
} | |||
} | |||
}, | |||
{ | |||
"type":"text", | |||
"properties": { | |||
"update": { | |||
"x": {"scale": "x", "signal": "indexDate"}, | |||
"y2": {"field": {"group": "height"}, "offset": 15}, | |||
"align": {"value": "center"}, | |||
"text": {"template": "{{indexDate | time: '%b %Y'}}"}, | |||
"fill": {"value": "red"} | |||
} | |||
} | |||
} | |||
] | |||
} | |||
</graph> | </graph> | ||