Interactive EChart

Introduction

In this tutorial, you will learn how to create an interactive EChart that responds to user interactions, such as clicking on a chart bar to open another chart or redirecting to a different webpage. Interactive charts enhance user experience by making your data visualizations dynamic and engaging.

How does it work?

To add advanced functionalities to UI components, you can insert custom code into their Custom Footer section, typically in most components' Advanced section. This section allows you to include HTML and JavaScript code to extend the capabilities of your charts.

Declaring your EChart

It needs to be declared to edit or add any functionalities to your EChart. The Echart UI component will have an ID created for you that 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:

Right-Clicking the chart → Inspect
Ctrl + Shift + I → Scroll through the developer tool and find the chart

Once you've identified the ID, you can initialize the chart and declare it in your code. Here's an example of how to do that:

<script>
$(document).ready(function() {
    //Declare the eChart
    var theChart = echarts.init(document.getElementById('echarts_3C18B399268D4E4593DED6E06FF03376'));
    });
});
</script>

Detecting a click

To make your EChart interactive, start by detecting user clicks on the chart. The following code demonstrates how to log a message when the chart is clicked:

theChart.on('click', function(params) {
    console.log("Click!");
});

By combining the click detection with the initialization code, you can make your chart respond to user interactions:

<script>
$(document).ready(function() {
    //Declare the eChart
    var theChart = echarts.init(document.getElementById('echarts_3C18B399268D4E4593DED6E06FF03376'));
    });
 
    //Detect click
     theChart.on('click', function(params) {
        console.log("Click!");
    });
});
</script>

Examples

Redirecting

You can make the EChart redirect users to another website when they click on the chart. The following code shows how to implement this functionality:

<script>
$(document).ready(function() {
    //Declare the eChart
    var theChart = echarts.init(document.getElementById([ID HERE]));
    });
 
    //Redirect after click
     theChart.on('click', function(params) {
      url = "google.com";
        document.location.href = url;
    });
});
</script>

Opening a chart in a chart

You can also create an interactive experience by redirecting the user to another chart when they click on the current chart. The new chart can dynamically change based on the part of the EChart that was clicked.

<script>
$(document).ready(function() {
    //Declare the eChart
    var theChart = echarts.init(document.getElementById([ID HERE]));
    });
 
    //Redirect after click
    theChart.on('click', function(params) {
        url = [OTHER CHART'S URL LINK] + "?" + params.name;
        document.location.href = url;
    });
});
</script>

To pass information between charts, you must bring it through the URL. The property name containing the data name the user clicked on will be displayed by accessing the params' properties. You can send this information through the URL as a parameter and retrieve it in the following chart using the #request.queryString# hash variable.

Below is an example code of using the hash variable.

SELECT
    a.c_email as "Email",
    COUNT(a.c_email) as "Amount"
FROM
    app_fd_book_meeting_room a
JOIN
    app_fd_create_meeting_room b
ON
    a.c_room_id = b.id
WHERE
    b.c_room_ID = "#request.queryString#" and
    a.c_status = "accept"
GROUP BY
    a.c_email, b.c_room_id