Skip to content

Custom Chart

The Custom Chart component allows users to integrate their custom charts to the ChartFactor ecosystem as microservices. Custom charts can be implemented using any technology or framework.

The simplest Custom Chart can be obtained using the following code:

1
2
3
4
let aktive = cf.create();
let myChart = aktive.graph("Custom Chart")
                    .set("url", "http://localhost:3000")
                    .execute();

The previous code will embedd the web application running on localhost port 3000. The following image shows a custom chart example within ChartFactor Studio:

KPI

Implementing two-way interactions in your custom chart

Two-way interaction means that:

  • Your custom chart is notified when users perform actions on other ChartFactor visualizations within your application. This allows your custom chart to react in a specific way.
  • Other ChartFactor visualizations are notified when users perform an action on your custom chart. This allows them to react appropriately, by drilling-in for example.

The component that adds interactivity in ChartFactor is the Interaction Manager. You need to make sure you add that component in your application. The way for your custom chart to share information with the Interaction Manager is through the postMessage method.

Receiving Interaction Manager filter notifications

In order for your custom chart to receive Interaction Manager filter notifications, you need to register a handler function as shown below:

1
window.addEventListener('message', receiveMessage, false);

Your event handler receives an "event" object. You need to check that the event object contains a data attribute with a stringified object containing a config object with the filters array. Example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
function receiveMessage(event) {
    if (event.data && isValidJSONString(event.data)) {
        let data = JSON.parse(event.data);

        if (data.config && data.config.filters) {
            // Your logic to implement the filters received
            if (data.config.filters.length > 0) {
                window.notify(
                    `Reviced sucessfuly: ${data.config.filters.length} filters.`, {'variant': 'info'}
                );
            } else {
                window.notify('Removed sucessfuly all filters.');
            }
        }
    }
}

Sending filter notifications to the Interaction Manager

To send a filter notification to the Interaction Manager, you need to create the groups and values for the filters that wou want to send. Example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
groups = [
    {
        name: str_your_group_name,
        label: str_your_group_label // Mandatory and will be used to match with other filters.
    }, ...
];
values = [
    value_for_first_group,
    ...
];

Then you can post the message to the window object that contains the Interaction Manager in the following way:

1
window.parent.postMessage(JSON.stringify({groups: groups, values: values}), '*');