|
|
| (13 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| { | | {{GraphChart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=Legend|type=stackedrect|x=1,2,3,4,5,6,7,8|y1=10, 12, 6, 14, 2, 10, 7, 9 |y2=2,4,6,8,13,11,9,2|y1Title=Data A|y2Title=Data B|colors=seagreen, orchid}} |
| "width": 400,
| |
| "height": 200,
| |
| "padding": {"top": 10, "left": 30, "bottom": 20, "right": 10},
| |
| | |
| "data": [
| |
| {
| |
| "name": "table",
| |
| "values": [
| |
| {"category":"A", "amount":28},
| |
| {"category":"B", "amount":55},
| |
| {"category":"C", "amount":43},
| |
| {"category":"D", "amount":91},
| |
| {"category":"E", "amount":81},
| |
| {"category":"F", "amount":53},
| |
| {"category":"G", "amount":19},
| |
| {"category":"H", "amount":87},
| |
| {"category":"I", "amount":52}
| |
| ]
| |
| }
| |
| ],
| |
| | |
| "signals": [
| |
| {
| |
| "name": "tooltip",
| |
| "init": {},
| |
| "streams": [
| |
| {"type": "rect:mouseover", "expr": "datum"},
| |
| {"type": "rect:mouseout", "expr": "{}"}
| |
| ]
| |
| }
| |
| ],
| |
| | |
| "predicates": [
| |
| {
| |
| "name": "tooltip", "type": "==",
| |
| "operands": [{"signal": "tooltip._id"}, {"arg": "id"}]
| |
| }
| |
| ],
| |
| | |
| "scales": [
| |
| { "name": "xscale", "type": "ordinal", "range": "width",
| |
| "domain": {"data": "table", "field": "category"} },
| |
| { "name": "yscale", "range": "height", "nice": true,
| |
| "domain": {"data": "table", "field": "amount"} }
| |
| ],
| |
| | |
| "axes": [
| |
| { "type": "x", "scale": "xscale" },
| |
| { "type": "y", "scale": "yscale" }
| |
| ],
| |
| | |
| "marks": [
| |
| {
| |
| "type": "rect",
| |
| "from": {"data":"table"},
| |
| "properties": {
| |
| "enter": {
| |
| "x": {"scale": "xscale", "field": "category"},
| |
| "width": {"scale": "xscale", "band": true, "offset": -1},
| |
| "y": {"scale": "yscale", "field": "amount"},
| |
| "y2": {"scale": "yscale", "value":0}
| |
| },
| |
| "update": { "fill": {"value": "steelblue"} },
| |
| "hover": { "fill": {"value": "red"} }
| |
| }
| |
| },
| |
| {
| |
| "type": "text",
| |
| "properties": {
| |
| "enter": {
| |
| "align": {"value": "center"},
| |
| "fill": {"value": "#333"}
| |
| },
| |
| "update": {
| |
| "x": {"scale": "xscale", "signal": "tooltip.category"},
| |
| "dx": {"scale": "xscale", "band": true, "mult": 0.5},
| |
| "y": {"scale": "yscale", "signal": "tooltip.amount", "offset": -5},
| |
| "text": {"signal": "tooltip.amount"},
| |
| "fillOpacity": {
| |
| "rule": [
| |
| {
| |
| "predicate": {"name": "tooltip", "id": {"value": null}},
| |
| "value": 0
| |
| },
| |
| {"value": 1}
| |
| ]
| |
| }
| |
| }
| |
| }
| |
| }
| |
| ]
| |
| } | |