Advanced Column Chart

Content Type: Widget
Categories: Extensions,Visualization,Data

Overview

The Custom Column Chart pluggable widget is designed to bring rich, interactive column charting capabilities to your Mendix applications. Built using Highcharts, this widget allows you to visualize dynamic data from Mendix entities in a clean, responsive, and fully interactive chart.

 

With support for JSON data input, click-driven actions, and optional parameter updates, the widget is perfect for dashboards, reporting pages, and analytical applications. It provides developers with an easy-to-use solution to display data effectively, while giving end-users an engaging and interactive experience.

 

Key advantages include:

  • Dynamic Data Handling – Parse JSON arrays directly from Mendix attributes.
  • Interactive Charts – Trigger microflows or nanoflows on column clicks.
  • Responsive & Flexible – Works seamlessly across devices and screen sizes.
  • Customizable Styling – Control colors, labels, padding, and grid lines.
  • High Performance – Optimized for large datasets without breaking the layout.

 

Whether you’re building dashboards or analytical tools in Mendix, the Custom Column Chart Widget simplifies data visualization, increases interactivity, and enhances user engagement.

Documentation

Typical Usage Scenario

The Custom Column Chart Widget is ideal for Mendix applications that require interactive data visualization. Customers can use it to:

  • Display dynamic data from Mendix entities in a visually appealing column chart.
  • Create dashboards where clicking on a column triggers a microflow/nanoflow for drill-downs, filtering, or parameter updates.
  • Visualize sales, inventory, performance metrics, survey results, or any numeric dataset dynamically.
  • Handle large datasets in a responsive layout without breaking the user interface.

It is particularly useful in analytical apps, management dashboards, KPI monitoring, and reporting pages where interactivity and dynamic updates enhance user decision-making.

 

Features and Limitations

Features:

  • Supports dynamic JSON input from Mendix string attributes.
  • Fully responsive and adapts to container size and screen resolution.
  • Displays interactive data labels for each column.
  • Optional click actions to trigger Mendix microflows/nanoflows.
  • Stores clicked bar details in helper attributes for further use.
  • Handles large datasets without performance degradation.
  • Robust error handling for invalid JSON input.

Limitations:

  • Only numeric values are supported for column heights (y).
  • JSON must strictly follow the { "name": "Category", "y": number } structure.
  • Custom styling beyond Mendix properties requires CSS knowledge.

 

Dependencies [Optional]

  • Mendix 9.x or higher
  • Highcharts (bundled with the widget; no separate installation required)

 

Installation [Optional]

  1. Download the widget package from Mendix Marketplace.
  2. Import the .mpk file into your Mendix project via App Store > Import Module Package.
  3. Restart the Mendix Studio Pro for the widget to appear in the toolbox.

 

Configuration 

  1. Place the widget inside a Data View bound to a helper entity.
  2. Map the following attributes:
    • chartData → String attribute containing JSON array.
    • paramBarName and paramBarValue → Attributes for storing click details (optional).
  3. Configure On Bar Click action (Microflow/Nanoflow) if required.
  4. Adjust styling using Mendix properties or custom CSS.

Frequently Asked Questions [Optional]

Q: Can I use this widget with non-numeric values?

A: No, only numeric values (y) are supported for chart columns.

Q: Can I customize the chart’s colors?

A: Yes, basic styling is configurable via Mendix properties. Advanced styling can be done using CSS.

Q: How does the widget handle large datasets?

A: The widget is optimized for large datasets, but extremely large arrays may have slight rendering delays depending on the browser.

Q: Do I need High charts license separately?

A: No, the widget includes Highcharts for usage within Mendix applications.

Releases

Version: 1.0.0
Framework Version: 10.24.8
Release Notes:

The Custom Column Chart widget brings interactive, dynamic column charting capabilities to your Mendix applications using Highcharts. It allows developers to visualize data directly from Mendix entities with full interactivity, dynamic categories, and optional click actions for drill-downs or parameter updates.

Designed to handle large datasets and fully responsive layouts, this widget enhances dashboards, reporting pages, and analytical applications in Mendix with minimal setup.

 

Purpose

  • Render a fully interactive column chart in Mendix.
  • Support dynamic data input via Mendix attributes (JSON).
  • Enable click-driven actions for drill-downs, updates, or navigation.
  • Maintain robust performance for large datasets.

 

Key Features

  • Dynamic Data Input: Accepts JSON arrays from Mendix string attributes, allowing flexible data binding without additional transformations.
  • Automatic Parsing & Validation: Validates input JSON structure to prevent UI breaks and logs errors gracefully.
  • Responsive & Flexible Design: Automatically adjusts to parent container size and device type.
  • Rich Styling Options: Customize grid lines, data labels, column padding, and more for visually appealing charts.
  • Interactive Behavior:
    • Click any bar to trigger a Mendix microflow/nanoflow.
    • Optionally store clicked bar’s category name and numeric value in helper attributes.
  • High Performance: Optimized to handle large datasets efficiently without breaking layout.

 

Inputs

  1. Chart Data (JSON) (Required)
    • A Mendix string attribute containing a JSON array of objects.
    • Each object must include:
      • name: Category label (X-axis)
      • y: Numeric value for the column
  2. On Bar Click (Action) (Optional)
    • A Mendix microflow or nanoflow executed when a column is clicked.
  3. Parameter Attributes (Optional)
    • Bar Name: String attribute to store clicked bar’s name.
    • Bar Value: Decimal attribute to store clicked bar’s numeric value.

 

Outputs

  • paramBarName → Clicked bar’s category name.
  • paramBarValue → Clicked bar’s numeric value.

 

Behavior & Functionality

  • Parses JSON input and validates structure to prevent errors.
  • Dynamically computes X-axis categories from name fields.
  • Displays data labels on each column for quick readability.
  • Executes configured Mendix action on bar click, updating relevant attributes.
  • Handles invalid JSON gracefully, logging errors without breaking the UI.

 

Usage Instructions

  1. Place the widget inside a Data View bound to a helper entity.
  2. Map the following attributes:
    • chartData → String attribute containing JSON array.
    • paramBarName and paramBarValue → Attributes for storing click details.
  3. Configure On Bar Click action (Microflow/Nanoflow) if required.
  4. Customize widget styling using Mendix properties or additional CSS.

 

Example JSON Input

[ { "name": "Product A", "y": 120 }, { "name": "Product B", "y": 95 }, { "name": "Product C", "y": 150 } ]

Benefits

  • Simplifies creation of interactive dashboards in Mendix.
  • Reduces the need for custom JavaScript or third-party charting integration.
  • Enhances data-driven decision-making through interactive charts.
  • Robust and error-resilient for production-ready applications.