Search code examples
jsonpowerbivega-litevegadeneb

X AXIS Date in Area Chart using Deneb visual in Power BI

I'm trying to display turnover rate evolution by Date hierarchy (I took in account on month (Mois) and Year (Année) )

Before trying with Deneb , I tried with Normal line chart , working fine: enter image description here enter image description here

But I don't know in Deneb it's being displayed like this : enter image description here

This is my Deneb Code :

{
  "data": {"name": "dataset"},
  "transform": [
    {
      "calculate": "format(datum['Turnover Rate']/100, '0.1%')",
      "as": "turnover_rate_percentage"
    },
    {
      "calculate": "datum['Mois'] + ' ' + datum['Année']",
      "as": "MONTH_YEAR"
    }
  ],
  "mark": {
    "type": "area",
    "line": {"color": "#063970"},
    "color": {
      "x1": 1,
      "y1": 1,
      "gradient": "linear",
      "stops": [
        {
          "offset": 0,
          "color": "white"
        },
        {
          "offset": 1,
          "color": "#063970"
        }
      ]
    }
  },
  "encoding": {
    "x": {
      "field": "MONTH_YEAR",
      "type": "ordinal",
      "axis": {"labelPadding": 0},
      "title": "Year + Month"
    },
    "y": {
      "field": "turnover_rate_percentage",
      "type": "quantitative",
      "axis": {"format": "%", "title": "Turnover Rate"}
    }
  }
}

Can anybody help me solve the issue please?

Here's the PBIX file

Solution

  • UPDATE

    In the field well, click the down arrow and select DATES instead of hierarchy.

    enter image description here

    Update your spec as follows:

    {
  "data": {"name": "dataset", "format": {"parse": {"Date": "date:'%d/%m/%Y'"}}},
  "transform": [
    {
      "calculate": "format(datum['Turnover Rate'], '0.1%')",
      "as": "turnover_rate_percentage"
    }
  ],
  "mark": {
    "type": "area",
    "line": {"color": "#063970"},
    "color": {
      "x1": 1,
      "y1": 1,
      "gradient": "linear",
      "stops": [
        {
          "offset": 0,
          "color": "white"
        },
        {
          "offset": 1,
          "color": "#063970"
        }
      ]
    }
  },
  "encoding": {
    "x": {
      "field": "DATES",
      "type": "temporal",
      "axis": {"labelPadding": 0},
      "title": ""
    },
    "y": {
      "field": "turnover_rate_percentage",
      "type": "quantitative",
      "axis": {"format": "%", "title": "Turnover Rate"}
    }
  }
}

    This is the end product:

    enter image description here

    There's a few things going wrong here. The main problem is that you're supplying MONTH_YEAR on the x axis as follows:

    enter image description here

    These are just strings and you have specified that the values are ordinal so VL is plotting 32,000 separate ordinal values on that axis which is why it looks a mess.

    You're also using inbuilt date hierarchies which should really be disabled so you can craft your own date.

    Disable this:

    enter image description here

    Your x axis should be of type temporal so it is continuous but you need to clean up your data first as it has a few dates in there which VL won't accept. See here for some good examples: https://vega.github.io/vega-lite/docs/type.html and search the docs for "temporal".

    When you have an axis, it can be either discrete/ordinal (every single label is plotted) or continuous (temporal or quantitative) where VL decides how many labels to display for you.