Overview

Apache eCharts Widget for Mendix

Bring the power of Apache eCharts, a potent, interactive charting and visualization library, directly into your Mendix applications. This widget allows you to create highly customizable, performant, and beautiful data visualizations with ease.

Key Features:

• Full eCharts Power: Access the extensive library of chart types, including Bar, Line, Pie, Radar, Scatter, and more.
• Dynamic Data Binding: Configure your charts using attributes directly from your Mendix Domain Model.
• Responsive Design: Control the height and width to ensure your visualizations fit perfectly within your UI layout.
• High Performance: Built for speed and capable of rendering large datasets smoothly.

Documentation

Getting Started

1. Prerequisites

Before using the widget, we recommend familiarizing yourself with the eCharts configuration options.

Documentation Reference: Apache eCharts Official Website

2. Domain Model Setup

Create an entity in your Mendix Domain Model with a String (Unlimited) or JSON attribute. This attribute will store the eCharts "Option" object (the JSON configuration that defines what the chart looks like).

3. Widget Configuration

Place the Apache eCharts Widget inside a Data View linked to your entity.

• General Tab:
  • Data Attribute: Select the attribute containing your JSON configuration.
• Appearance Tab:
  • Width: Set the width (e.g., 100% or 600px).
  • Height: Set the height (e.g., 400px).

4. Populate Your Data

Use a Microflow or Nanoflow to generate the JSON string required by eCharts. This allows you to dynamically inject Mendix data into the chart configuration.

Example Configuration

A basic chart configuration in your Mendix attribute would look like this:

{ "title": { "text": "Mendix Data Overview" }, "xAxis": { "data": ["Mon", "Tue", "Wed", "Thu", "Fri"] }, "yAxis": {}, "series": [{ "type": "bar", "data": [23, 44, 55, 19, 32] }] }

Support & Contributions

For advanced configurations, interactive events, or theme customizations, please refer to the eCharts API Reference.