ActiveUI

ActiveUI

  • User Guide
  • Developer Documentation

Stacked Bars

Example

Illustration

Summary of settings

  • Type of chart: Columns
  • Mapping of x attribute: City
  • Mapping of y attribute: Profit
  • Common attributes → Split mapped to Desk dimension
  • Specific attributes → Columns → Column Type is set to Stacked

Step-by-step instruction

  1. Add new Chart Widget

  2. Select Columns

  3. If there are multiple cubes connected to your application, you must select the cube you want for the chart.

  4. To map x attribute, select the groups you would like to see on the horizontal axis, in this case the dimension City.

  5. To map the y attribute, select the value (measure) corresponding to the vertical axis, in this case Profit.

    The chart displays with axes mapped:

    Illustration

  6. Set Split to allocate columns to members of another dimension. In the example, Profit in each City broken down by Desk. First, click Options in the Legend area of the chart:

    Illustration

    In the Options popup, find the Split attribute and map it to the desired dimension, Desk.

    Illustration

    Now each City shows up as a group of Desks columns.

    Illustration

  7. In the Options popup, scroll down to the Specific attributes section. Click the Columns icon and find the Column type setting. By default it is set to Clustered. Change it to Stacked to obtain the desired result:

    Illustration

The example is complete:

Illustration

Back to Legacy Chart Gallery

Appendix

The appendix contains code snippets for advanced users.

MDX:

SELECT
  NON EMPTY Crossjoin(
    [Booking].[Desk].[Desk].Members,
    [Geography].[City].[City].Members
  ) ON ROWS,
  {
    [Measures].[Profit]
  } ON COLUMNS
  FROM [EquityDerivativesCube]

JSON:

{
  "configurations": [
    {
      "handlers": {
        /* ... */
      },
      "type": "combo-histogram",
      "mapping": {
        "x": {
          "from": ["[Geography].[City].[City]"]
        },
        "y": {
          "from": "[Measures].[Profit]"
        },
        "split": {
          "from": ["[Booking].[Desk].[Desk]"]
        }
      },
      "histogramSplit": "stack"
    }
  ]
}
  • Example
  • Summary of settings
  • Step-by-step instruction
  • Appendix
Copyright © 2023 ActiveViam