Joget DX 8 Stable Released
The stable release for Joget DX 8 is now available, with a focus on UX and Governance.
In this article, we will share how to start making an interactive EChart where one can click a chart's bar to open another chart.
Advanced functionalities for userview components are done by adding code in their "Custom Footer". Usually placed in the "Advanced" section of most components.
In order to edit or add any functionalities to your EChart, it needs to be declared. The Echart userview component will have an ID created for you which can be referred to, and this ID can be found in the HTML element of the chart when launching the app, which is opened by:
After finding the ID, you can then initialize it and declare it to a variable and only then you will have access to many of the chart's functionality and properties.
A good starting point to make something interactable is to make it be able to detect a click!
The code above is one way to make the chart react to being clicked!
And simply combine the two code blocks and now the chart reacts to being clicked!
One simple interactive feature would be to make the user redirect to another site when they click on the EChart. The code below is an implementation of such.
An interactive EChart also has the ability to redirect the user to another chart, where the information in the other chart will dynamically change depending on which part of the EChart the user clicked.
A way to make the other chart receive information is to bring it through the URL. By accessing params' properties, it will have the property "name" which includes the name of the data the user has clicked on. This information can then be brought to the URL as a parameter (usually separated with a '?') which then the other chart can access.
To access the parameter in the URL, we can use hash variables to do so, more specifically, the hash variable #request.queryString#.
Below is an example code of using the hash variable, to see its full functionality and purpose, download the demo app