Mendix

Mendix AnyChart : Retrieve more information from the chart event

AnyChart widget provides more flexibility than Basic Charts widget in Mendix. Particularly when we have to perform some task on click of a data point(x,y) in chart, AnyChart is the best option. By default, AnyChart widget provides few attributes associated with the data point we have clicked. In this blog, I would like to show how we can retrieve additional data along with the default attributes.

Data set up

Here, I am going to visualize some static data through scatter chart. As we have to pass the data in JSON format to AnyChart widget, I am passing a list of JSON objects as below.

Visualize the above data in UI 

1. Add an entity in the domain model with a String attribute. 

2. Create a microflow. Add an activity for creating an object of entity created above and assign above sample data to the attribute and enclose it in single quotes and finally return the same object at the end. 

3. In a page, add data view. Select above created microflow as data source. Add AnyChart widget inside data view. 

When we run the application, we can see the scatter chart with 4 data points. Let us add an on click event and see the default information it retrieves. 

Adding on click event 

1. Under Events tab of AnyChart widget, we have to select Event entity, Event data attribute to store the event data and on click microflow that will be executed on click. 

2. Here, I am selecting the ChartHelper entity and its attribute for Event entity and Event data attribute. I am creating a new microflow to be called on click. I just added Show message activity in that microflow to display the event data. 

Now, On click of any data point in chart, after running application, shows the default information as below. 

Retrieve additional information 

Along with this data, I want the category (here it is either A or B) to which the data point belongs to. 

1. To retrieve that, we have to add an attribute “ids” similar to x and y attributes in JSON object, which should be unique value to each data point(x,y). 

2. Here, I make sure that each id value contains the category name. To be unique, I am concatenating a number with the category name and incrementing the number for every data point. After implementing these changes data looks like: 

Now, if we run the application and click on any data point, we can see the additional attribute “id” associated with that data point. 

We need to use Import from JSON activity passing the above data(of type String) in order to utilize any of its attributes. 

Then we can apply split or substring operation on “id” attribute to get the actual category name and use it in further logic.