{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"usermeta": {
"deneb": {
"build": "1.0.0.157",
"metaVersion": 1,
"provider": "vegaLite"
},
"interactivity": {
"tooltip": true,
"contextMenu": true,
"selection": true,
"dataPointLimit": 50
},
"information": {
"name": "Forecast Patterned",
"description": "[No Description Provided]",
"author": "Kerry Kolosko",
"uuid": "b633efcf-e8f1-46ff-baac-c4672aa06342",
"generated": "2022-02-02T12:19:48.898Z"
},
"dataset": [
{
"key": "__0__",
"name": "Date",
"description": "",
"type": "dateTime",
"kind": "column"
},
{
"key": "__1__",
"name": "ActualForecast",
"description": "",
"type": "text",
"kind": "column"
},
{
"key": "__2__",
"name": "Value",
"description": "",
"type": "numeric",
"kind": "measure"
}
]
},
"config": {
"autosize": {
"type": "fit",
"contains": "padding"
},
"view": {"stroke": "transparent"},
"axisX": {
"grid": false,
"ticks": false,
"domain": false,
"title": false
},
"axisY": {
"grid": false,
"labels": false,
"ticks": false,
"domain": false,
"title": false,
"offset": 0
},
"legend": {"title": false}
},
"data": {"name": "dataset"},
"layer": [
{
"transform": [
{
"filter": {
"field": "__1__",
"equal": "ACTUAL"
}
}
],
"mark": {
"type": "area",
"interpolate": "monotone",
"area": true,
"tooltip": true,
"color": "lightgrey"
},
"encoding": {
"x": {
"field": "__0__",
"type": "temporal",
"timeUnit": "month"
},
"y": {
"aggregate": "max",
"field": "__2__",
"type": "quantitative"
},
"opacity": {
"condition": {
"test": {
"field": "__selected__",
"equal": "off"
},
"value": 0.3
}
}
}
},
{
"transform": [
{
"filter": {
"field": "__1__",
"equal": "FORECAST"
}
}
],
"mark": {
"type": "area",
"interpolate": "monotone",
"area": true,
"tooltip": true,
"fill": {
"expr": "pbiPatternSVG('diagonal-stripe-1', 'lightgrey', 'white')"
}
},
"encoding": {
"x": {
"field": "__0__",
"type": "temporal",
"timeUnit": "month"
},
"y": {
"aggregate": "max",
"field": "__2__",
"type": "quantitative"
},
"opacity": {
"condition": {
"test": {
"field": "__selected__",
"equal": "off"
},
"value": 0.3
}
}
}
},
{
"mark": {
"type": "line",
"interpolate": "monotone",
"area": true,
"tooltip": true,
"color": "black"
},
"encoding": {
"x": {
"field": "__0__",
"type": "temporal",
"timeUnit": "month"
},
"y": {
"field": "__2__",
"type": "quantitative"
},
"strokeDash": {
"field": "__1__",
"type": "nominal"
},
"opacity": {
"condition": {
"test": {
"field": "__selected__",
"equal": "off"
},
"value": 0.3
}
}
}
},
{
"mark": {
"type": "circle",
"size": 50,
"stroke": "black",
"opacity": 1,
"tooltip": true
},
"encoding": {
"x": {
"field": "__0__",
"type": "temporal",
"timeUnit": "month"
},
"y": {
"field": "__2__",
"type": "quantitative"
},
"strokeDash": {
"field": "__1__",
"type": "nominal"
},
"color": {
"condition": [
{
"test": "datum['__1__'] === 'FORECAST'",
"value": "white"
}
],
"value": "black"
},
"opacity": {
"condition": {
"test": {
"field": "__selected__",
"equal": "off"
},
"value": 0.3
}
}
}
},
{
"transform": [
{
"window": [
{"op": "rank", "as": "rank"}
],
"sort": [
{
"field": "__2__",
"order": "descending"
}
]
},
{"filter": "datum.rank <= 2"}
],
"mark": {
"type": "text",
"tooltip": true,
"color": "black",
"opacity": 0.9,
"dy": -15
},
"encoding": {
"text": {
"field": "__2__",
"format": ".0%"
},
"x": {
"field": "__0__",
"type": "temporal",
"timeUnit": "month"
},
"y": {
"field": "__2__",
"type": "quantitative"
},
"opacity": {
"condition": {
"test": {
"field": "__selected__",
"equal": "off"
},
"value": 0.3
}
}
}
},
{
"transform": [
{
"window": [
{"op": "rank", "as": "rank"}
],
"sort": [
{
"field": "__2__",
"order": "ascending"
}
]
},
{"filter": "datum.rank <= 2"}
],
"mark": {
"type": "text",
"tooltip": true,
"color": "black",
"opacity": 0.9,
"dy": 15
},
"encoding": {
"text": {
"field": "__2__",
"format": ".0%"
},
"x": {
"field": "__0__",
"type": "temporal",
"timeUnit": "month"
},
"y": {
"field": "__2__",
"type": "quantitative"
},
"opacity": {
"condition": {
"test": {
"field": "__selected__",
"equal": "off"
},
"value": 0.3
}
}
}
}
]
}
Thank you very much Kerry. I tried myself but could not figure how to get rid of the gap between actual and forecast.
https://github.com/PBIQueryous/Deneb/tree/main/Deneb_Showcases/Actual_Forecast_Line