Introduction

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.

Getting Started

Advanced functionalities for userview components are done by adding code in their "Custom Footer". Usually placed in the "Advanced" section of most components. 

The code these sections accept are HTML code which has script tags that usually holds JavaScript code.

Declaring your EChart

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:

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

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.

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

Detecting a click

A good starting point to make something interactable is to make it be able to detect a click!

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

The code above is one way to make the chart react to being clicked!

<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>

And simply combine the two code blocks and now the chart reacts to being clicked!

Examples

Redirecting

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.

<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

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.

<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>

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

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

Download Demo App

• Meeting Room Booking app (Chart in chart example)