Overview

The Scaletech Chart Widget is a powerful and versatile tool for creating dynamic and interactive data visualizations within your Mendix applications. Leveraging the capabilities of Chart.js, this widget offers a wide range of chart types, including:

• Bar charts
• Line charts
• Pie charts
• Doughnut charts
• Polar area charts
• Radar charts
• Scatter charts
• Bubble charts

Key Features:

• Multiple Chart Types: Easily switch between different chart types to suit your specific visualization needs.
• Dynamic Data Binding: Connect to your Mendix data sources for real-time data representation.
• Interactive Tooltips: Hover over chart elements to reveal detailed information.
• Customizable Appearance: Tailor the appearance of your charts with customizable titles, labels, and colors.
• Onclick Event Handling: Trigger custom actions when a chart element is clicked.
• Performance Optimization: Efficient rendering for smooth performance, even with large datasets.

Ideal Use Cases:

• Comparing Data Trends: Analyze data trends over time or across categories.
• Displaying Proportions: Visualize percentages and distributions.
• Exploring Multidimensional Data: Understand relationships between multiple variables.
• Visualizing Categories: Compare category performance.

Easy to Use:

1. Download and Import: Obtain the widget package from the Mendix Marketplace and import it into your app.
2. Add to Page: Drag and drop the widget onto your page.
3. Configure: Connect to your data source, select the chart type, and customize the appearance.

Elevate Your Data Visualizations Today!

Documentation

The Scaletech Chart Widget utilizes the Chart.js library to deliver a variety of dynamic chart types, such as Bar, Line, Pie, Doughnut, Polar Area, Radar, Scatter, and Bubble charts. This widget is crafted to provide flexible and customizable data visualizations with interactive features, making it an essential tool for Mendix applications.

Typical Usage Scenarios

The Scaletech Chart Widget is ideal for various data visualization needs, such as:

• Comparing Data Trends: Use bar or line charts to showcase data trends over time or categories.
• Displaying Proportions: Use pie or doughnut charts to illustrate percentages or distributions.
• Exploring Multidimensional Data: Use scatter or bubble charts to visualize relationships between multiple variables.
• Visualizing Categories: Compare category performance using polar area or radar charts.

Features and Limitations

1. Features

   1. Support for Multiple Chart Types: Easily switch between chart types for diverse visualization needs.
   2. Dynamic Data Binding: Connects to Mendix data sources for real-time representation.
   3. Interactive Tooltips and Hover Effects: Hovering over chart elements reveals custom tooltip information, enhancing interactivity.
   4. Customizable Titles and Labels: Adjust font styles, colors, and sizes to match your app's theme.
   5. Onclick Event Handling: Trigger custom actions when a chart element is clicked, such as navigation or data retrieval.
   6. Dropdown for Chart Selection: Users can dynamically select chart types from a dropdown.
   7. Performance Optimization: Efficient rendering ensures smooth operation with medium to large datasets.

2. Limitations

   1. Customization: Individual colors for specific chart elements cannot be set dynamically.
   2. Readability for Dense Data: Large datasets with many points may impact visual clarity.
   3. Specific Attributes: Certain properties, such as bubbleRadius, apply only to particular chart types.

Installation

• Download the widget: Obtain the widget package from the Mendix Marketplace.
• Import into your app: Import the widget .mpk file into your Mendix application.
• Add to a page: Drag and drop the widget onto a page where you want to display charts.

Configuration

• Data Source:- Connect the chart to your desired data source, specifying the list of objects that represent the data to be visualized. This is a required property that defines the data structure.
• Chart Type:- Select the chart type you wish to display (e.g., "bar", "line", "pie", "doughnut", "polar area", "radar", "scatter", "bubble"). This is a required property.
• X-axis Data:- This property defines the attribute used for the X-axis values. It is a required field.
• Y-axis Data:- This property defines the attribute used for the Y-axis values. It is a required field.
• Bubble Radius:- For Bubble charts, this optional property defines the size of each bubble. You can link it to an attribute in your data.
• Data Key:- A required property specifying the attribute representing the value of each item in the data source. It is used to calculate and display the value for each chart element.
• Label Key:- A required property specifying the attribute used as the label for each item in the data source. These labels will appear in the chart to describe each data point.
• Tooltip Template:- An optional property that allows you to customize the information displayed in the tooltip when hovering over chart elements. You can use this to provide more dynamic or detailed information about the data points.
• Show Chart Selection:- Enable this property to allow users to dynamically switch between different chart types during runtime.
• Selection Box Label:- This property sets the selection box label. You can customize this string to display any title you prefer for the selection box.
• Width: This required property sets the width of the chart in pixels. The default value is 900.
• Height: This required property sets the height of the chart in pixels. The default value is 600.
• Show Chart Title: This property enables or disables the display of the chart title. If set to true, the title will be visible; otherwise, it will not be shown.
• Chart Title: This property sets the chart title. You can customize the string to display any preferred title.
• Font Color: This optional property sets the font color for the chart title. Define the color using a valid hex code, such as #000000 for black.
• Font Family: This optional property defines the font family for the chart title, such as Arial, Times New Roman, or sans-serif.
• Font Size: This required property sets the font size for the chart title in pixels. The default value is 12.
• Font Style: This optional property sets the font style for the chart title, such as normal, italic, or oblique.
• Font Weight: This required property sets the font weight for the chart title. Common values are 100 for light, 400 for normal, and 700 for bold. The default value is 100.
• X-Axis Line Color: This optional property sets the color of the X-axis line.
• Y-Axis Line Color: This optional property sets the color of the Y-axis line.
• X-Axis Border Width: This required property defines the border width for the X-axis in pixels. The default value is 1 pixel.
• Y-Axis Border Width: This required property defines the border width for the Y-axis in pixels. The default value is 1 pixel.
• Labels Font Color: This optional property sets the font color for the labels. Define the color using a valid hex code, such as #000000 for black.
• Labels Font Family: This optional property defines the font family for the labels, such as Arial or Times New Roman.
• Labels Font Size: This required property defines the font size for the labels in pixels. The default value is 12 pixels.
• Labels Font Style: This optional property sets the font style for the labels, such as normal or italic.
• Labels Font Weight: This required property sets the font weight for the labels. Common values include 100 for light and 700 for bold. The default value is 100.
• Point Border Color: This optional property sets the border color for points in line, scatter, and bubble charts.
• Point Background Color: This optional property sets the background color for points in line, scatter, and bubble charts.
• Hover Effect Color:- The Hover Effect Color specifies the color displayed when hovering over chart elements. This is an optional property, and it is not required for the widget to function.
• Chart Border Width: This required property sets the border width for the chart elements in pixels. The default value is 1 pixel
• Border Color:- The Border Color specifies the border color for the chart elements. This is an optional property, and it is not required for the widget to function.
• Onclick Action: This property triggers an event when a chart element is clicked, enabling you to define custom actions. It allows you to specify what happens when a user interacts with the chart element.

Frequently Asked Questions

Q1: What chart types can I use?

A: The widget supports Bar, Line, Pie, Doughnut, Polar Area, Radar, Scatter, and Bubble charts.

Q2: Can I dynamically change the chart type?

A: Yes, enable the Show Chart Selection property to allow users to select the chart type from a dropdown.

Q3: How can I customize tooltips?

A: Use the Tooltip Template property to define a custom tooltip template using attributes from the data source.

User credentials for Demo App: 

User id:- demo_administrator

Password:- IwxAj7bqOuys

Contributors:- Avinash Pansuriya