Search code examples
powerbipowerbi-desktopvega-litevegadeneb

Connect smoothly Actual + Forecast line in Vega


I'm dealing with a common business scenario where I want to showcase both actual and forecasted values on a chart. However, I'm having difficulties in smoothly connecting these two lines in my visualization. Could you please advise on techniques I could use to achieve this in Vega/Vega-Lite?

Many thanks!

Code sample:

    {
      "$schema": "https://vega.github.io/schema/vega/v5.json",
      "width": 400,
      "height": 200,
      "padding": 5,
    
      "data": [
        {
          "name": "table",
          "values": [
            {"x": "A", "y": 28, "type":"Actual"},
            {"x": "B", "y": 55, "type":"Actual"},
            {"x": "C", "y": 43, "type":"Actual"},
            {"x": "D", "y": 91, "type":"Forecast"},
            {"x": "E", "y": 81, "type":"Forecast"},
            {"x": "F", "y": 53, "type":"Forecast"},
            {"x": "G", "y": 19, "type":"Forecast"},
            {"x": "H", "y": 87, "type":"Forecast"},
            {"x": "I", "y": 52, "type":"Forecast"},
            {"x": "J", "y": 48, "type":"Forecast"}
          ],
          "transform": [
           
            {
              "type": "formula",
              "expr": "datum.type==='Actual'?datum.y:null",
              "as": "actual"
            },
            {
              "type": "formula",
              "expr": "datum.type==='Forecast'?datum.y:null",
              "as": "forecast"
            }
          ]
        }
      ],
    
      "scales": [
        {
          "name": "x",
          "type": "band",
          "range": "width",
          
          "domain": {"data": "table", "field": "x"}
        },
        {
          "name": "y",
          "type": "linear",
          "range": "height",
          "nice": true,
          "zero": true,
          "domain": {"data": "table", "field": "y"}
        }
      ],
    
      "axes": [
        {"orient": "bottom", "scale": "x"},
        {"orient": "left", "scale": "y"}
      ],
    
      "marks": [
        {
          "type": "line",
          "from": {"data": "table"},
          "encode": {
            "enter": {
              "x": {"scale": "x", "field": "x"},
              "y": {"scale":"y","field": "actual"},
              "stroke": {"value": "black"},
              "strokeWidth": {"value": 2}
            }
          }
        },
        {
          "type": "line",
          "from": {"data": "table"},
          "encode": {
            "enter": {
              "x": {"scale": "x", "field": "x"},
              "y": {"scale":"y","field": "forecast"},
              "stroke": {"value": "gray"},
              "strokeWidth": {"value": 2},
              "strokeDash": {"value": [3,5]}
            }
          }
        }
 ]
}

Solution

  • This is the technique but you have to duplicate your last actual to get the lines to join. You can do this anywhere though.

    enter image description here

    {
      "$schema": "https://vega.github.io/schema/vega/v5.json",
      "width": 400,
      "height": 200,
      "padding": 5,
      "data": [
        {
          "name": "table",
          "values": [
            {"x": "A", "y": 28, "type": "Actual"},
            {"x": "B", "y": 55, "type": "Actual"},
            {"x": "C", "y": 43, "type": "Actual"},
            {"x": "C", "y": 43, "type": "Forecast"},
            {"x": "D", "y": 91, "type": "Forecast"},
            {"x": "E", "y": 81, "type": "Forecast"},
            {"x": "F", "y": 53, "type": "Forecast"},
            {"x": "G", "y": 19, "type": "Forecast"},
            {"x": "H", "y": 87, "type": "Forecast"},
            {"x": "I", "y": 52, "type": "Forecast"},
            {"x": "J", "y": 48, "type": "Forecast"}
          ]
        },
        {
          "name": "a",
          "source": "table",
          "transform": [{"type": "filter", "expr": "datum.type == 'Actual'"}]
        },
        {
          "name": "b",
          "source": "table",
          "transform": [{"type": "filter", "expr": "datum.type == 'Forecast'"}]
        }
      ],
      "scales": [
        {
          "name": "x",
          "type": "band",
          "range": "width",
          "domain": {"data": "table", "field": "x"}
        },
        {
          "name": "y",
          "type": "linear",
          "range": "height",
          "nice": true,
          "zero": true,
          "domain": {"data": "table", "field": "y"}
        }
      ],
      "axes": [
        {"orient": "bottom", "scale": "x"},
        {"orient": "left", "scale": "y"}
      ],
      "marks": [
        {
          "type": "line",
          "from": {"data": "a"},
          "encode": {
            "enter": {
              "x": {"scale": "x", "field": "x"},
              "y": {"scale": "y", "field": "y"},
              "stroke": {"value": "black"},
              "strokeWidth": {"value": 2}
            }
          }
        },
        {
          "type": "line",
          "from": {"data": "b"},
          "encode": {
            "enter": {
              "x": {"scale": "x", "field": "x"},
              "y": {"scale": "y", "field": "y"},
              "stroke": {"value": "gray"},
              "strokeWidth": {"value": 2},
              "strokeDash": {"value": [3, 5]}
            }
          }
        }
      ]
    }