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

Question

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:

But I don't know in Deneb it's being displayed like this :

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

Hi @DavideBacci I may have not understood you very well. What should I exactly do ? Should I only put "type": "temporal" ? or use "MOnth" and "Year" of dim_dates instead of the hierarchy? — userrr, Jul 20 '23 at 08:37
@DavideBacci if you could provide me with detailed steps I can arrange in my case please — userrr, Jul 20 '23 at 08:58
See here for some good examples: https://vega.github.io/vega-lite/docs/type.html and search the docs for "temporal". — Davide Bacci, Jul 20 '23 at 09:48
yes i knnow , then what should i do ? it's still very blurry to me please! @DavideBacci — userrr, Jul 20 '23 at 10:12
I'll show you how to fix the axis in an update below. You will need to fix your measure on your own. Please upvote and mark as solved if you found it helpful. — Davide Bacci, Jul 20 '23 at 10:55

Davide Bacci · Accepted Answer · 2023-07-20T10:57:54.437

UPDATE

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

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:

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

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:

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.

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

1 Answers1