(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)

Dynamic Box Plot Chart User Manual

The Dynamic Box Plot Chart component visualizes statistical data using box plot diagrams, allowing users to analyze distributions, outliers, and summary statistics. It supports both mock and real data sources, and can be customized visually and functionally for various use cases.

Properties

Visual Properties

  • customTooltipTemplate
    Enables a custom tooltip template for the chart. When set to true, you can provide a custom Angular component to display additional information on hover.
    Example:
    customTooltipTemplate: true will use a custom tooltip component for each box plot item.

Data Source Properties

  • useMockData
    Determines whether the chart displays mock data or fetches real data from a data source. When true, the chart uses predefined mock data for demonstration or development purposes.
    Example:
    useMockData: true will show sample box plot data instead of live data.

  • chartConfiguration
    Configures the box plot chart’s settings, such as axis, series, and constant lines. This property is required and should match the expected configuration model.
    Example: 

  {
    "dataPathExpression": "seriesData",
    "constantLinesExpression": "constantLines",
    "constantLines": [
      { "label": { "text": "Median" }, "value": 50 }
    ]
  }

  • dataSourceId
    Specifies the ID of the data source from which the chart fetches its data. This should match a configured data source in your system.
    Example:
    dataSourceId: "salesDataSource"

  • getEntityCollectionHttpRequestParametersMap
    Configures HTTP request parameters for fetching data from the data source. This allows mapping of query, path, or body parameters as needed by the backend API.
    Example: 

  {
    "QUERY": { "year": 2025 },
    "PATH": {},
    "BODY": {}
  }

Event Actions

  • events
    Configures the events that the component can trigger. Supported events include ON_INIT (when the chart is initialized) and ON_DESTROY (when the chart is destroyed).
    Example: 
  {
    "ON_INIT": [{ "action": "log", "params": { "message": "Chart initialized" } }],
    "ON_DESTROY": [{ "action": "cleanup" }]
  }

Elements

  • elements
    Contains child dynamic elements to be rendered within the chart component. This allows for extensibility, such as adding overlays or annotations.
    Example: 
  [
    { "type": "DynamicBoxPlotChartTooltipTemplateComponent", "props": { "text": "Custom Tooltip" } }
  ]

General Properties (Inherited)

  • displayName
    Sets the display name of the component, shown in the structure panel.
    Example:
    displayName: "Monthly Sales Box Plot"

  • id
    Specifies a unique identifier for the component.
    Example:
    id: "boxPlotChart1"

Data Example

The chart expects an array of box plot series data, each with fields for name, high, low, median, q1, and q3.
Example data:

[
  {
    "name": "Q1",
    "high": 100,
    "low": 20,
    "median": 60,
    "q1": 40,
    "q3": 80
  },
  {
    "name": "Q2",
    "high": 120,
    "low": 30,
    "median": 70,
    "q1": 50,
    "q3": 90
  }
]

If using mock data, the chart will display a predefined set of such objects.

Property Sections

Visual

  • customTooltipTemplate

Data Source

  • useMockData
  • chartConfiguration
  • dataSourceId
  • getEntityCollectionHttpRequestParametersMap

Event Actions

  • events

Elements

  • elements

General

  • displayName
  • id

This manual provides a structured overview of the Dynamic Box Plot Chart component, with each property explained, categorized, and accompanied by usage examples.

  • No labels