Search code examples
jsonpowerbivega-litedeneb

Data missing from basic visual in Deneb (vega-lite)


I am having an issue displaying data in a stacked var chart. I am using transform to fold two measures together. My assumption is that with null values this may be causing an issue, but that is a bit of guess.

vega-lite code:

 {
  "data": {
    "values":[
      {"Scheduled Event Class": "Inspection", "Booked": 0, "Not Booked": 1}, 
      {"Scheduled Event Class": "Loler Test", "Booked": 0, "Not Booked": 8}, 
      {"Scheduled Event Class": "MOT", "Booked": 0, "Not Booked": 2},
      {"Scheduled Event Class": "Pre-MOT Check", "Booked": 1, "Not Booked": 0},
      {"Scheduled Event Class": "Service", "Booked": 1, "Not Booked": 4}  
    ]
  },
  "transform": [
    {
      "fold": ["Booked", "Not Booked"],
      "as": ["Booking Status", "value"]
    }
  ],
  "layer": [
    {
      "mark": {
        "type": "bar",
        "tooltip": true,
        "cornerRadiusEnd": 10
      },
      "encoding": {
        "x": {
          "field": "Scheduled Event Class",
          "type": "nominal",
          "title": null,
          "sort": "-y",
          "axis": {
            "labelAngle": 0
          }
        },
        "y": {
          "field": "value",
          "aggregate": "sum",
          "type": "quantitative",
          "title": null
        },
        "color": {
          "field": "Booking Status",
          "type": "nominal",
          "legend": {
            "labelAlign": "left",
            "orient": "top",
            "title": null
          },
          "scale": {
            "domain": ["Booked", "Not Booked"],
            "range": ["#BBD4FF", "#FAF26E"]
          }
        }
      }
    },
    {
      "mark": {
        "type": "text",
        "align": "center",
        "baseline": "middle",
        "dx": 0,
        "dy": -5,
        "color": "white",
        "size": 8
      },
      "encoding": {
        "x": {
          "field": "Scheduled Event Class",
          "type": "nominal",
          "title": null,
          "sort": "-y"
        },
        "y": {
          "field": "value",
          "aggregate": "sum",
          "type": "quantitative",
          "title": null
        },
        "text": {
          "field": "value",
          "aggregate": "sum",
          "type": "quantitative"
        }
      }
    },
    {
      "mark": {
        "type": "bar",
        "tooltip": true,
        "cornerRadiusEnd": 10,
        "color": {
          "x1": 1,
          "y1": 0,
          "x2": 0,
          "y2": 0,
          "gradient": "linear",
          "stops": [
            {
              "offset": 0,
              "color": "rgba(0, 0, 0, 0.5)"
            },
            {
              "offset": 1,
              "color": "rgba(0, 0, 0, 0)"
            }
          ]
        }
      },
      "encoding": {
        "x": {
          "field": "Scheduled Event Class",
          "type": "nominal",
          "title": null,
          "sort": "-y",
          "axis": {
            "labelAngle": 0
          }
        },
        "y": {
          "field": "value",
          "aggregate": "sum",
          "type": "quantitative",
          "title": null
        },
        "tooltip": [
          {"field": "Booking Status"},
          {"field": "value", "aggregate": "sum", "type": "quantitative"}
        ]
      }
    }
  ]
}

Picture here, showing data and the chart itself: Stacked Bar screenshot

As you can see above, the data isn't being displayed in the chart itself where there are values.

See below CSV for data:

Scheduled Event Class,Booked,Not Booked
Inspection,null,1
Loler Test,null,8
MOT,null,2
Pre-MOT Check,1,null
Service,1,4

Solution

  • Yes, the nulls are breaking the viz. Use a calculate transform to replace the nulls with 0 if you're going to stack them. Something like:

    {"calculate": "datum.Booked == null?0:datum.Booked", "as": "Booked"}