Dynamic ECharts with Clicks

Feature
1

Hi Team,

With Stadium 5 I was able to use the echarts head script (‘/VitalityPOC/Scripts/echarts.min.js’) to monitor clicks using JS:

var myChart = echarts.getInstanceById($('#StartPage_Chart').attr('_echarts_instance_'));

myChart.on('click', async function(params) {
	await ScriptClick(params.data.name);
});

myChart.on('dblclick', async function(params) {
	await ScriptDoubleClick(params.data.name);
});

This allowed me to create an application where one could click on the graphs and allow them to interact with each other. With Stadium 6, I see we are using Vue.js and thus the task becomes more complex without having access to the Vue scripts, furthermore, we no longer have access to the echarts library (I also couldn’t get the echarts to get the chart instance by copying ‘/VitalityPOC/Scripts/echarts.min.js’ to the Stadium6 application).

Is there a way to monitor clicking on the graph in Stadium 6, or is it something we could request to be added?

Kind regards,
Ethan

2

Hi Ethan

You should be able to add a library via the Application Head property.
For example, the echarts script can be added using the CloudFlare CDN by adding this tag to the Head:

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.3.1/echarts.min.js"></script>

If you don’t want to use a CDN you can also add a script in the Application EmbeddedFiles then include it using a Head tag like this:

<script src="{STADIUM_BASE_URL}/Content/EmbeddedFiles/echarts.min.js"></script>
3

Hi @Shaun,

Thanks for the prompt reply. I agree, adding this allows you to access the echarts library and functions such as echarts.getInstanceById().

var myChart = echarts.getInstanceById($('#StartPage_Chart').attr('_echarts_instance_'));

Unfortunately, from here I am unable to set the variable to the chart instance in Stadium 6 (myChart is always undefined). I don’t know whether it is due to the library being incompatible with vue-echarts?

Please will you try set var myChart in a Stadium 6 application to the chart instance and let me know if you can monitor clicks.

ie. params is not undefined in:

myChart.on('click', async function(params) {
	console.log(params);
});

Thanks,
Ethan

4

Hi. I gave it a try and was not able to get a hold of the chart instance either.
I’m not sure if the instance is still obtainable when vue-echarts is being used.
I’ll let @anton.platzoeder know about the change in Stadium 6 so he can decide on the course of action.

5

Awesome, thanks for the help @Shaun :muscle:t3:

6

Here are the steps on how to implement clickable charts

  1. Create a new application
  2. Include the eChart library in the Head of the application:
  3. <script src="https://cdn.jsdelivr.net/npm/echarts@latest/dist/echarts.min.js"></script>
  4. In the application’s “Http Header”, Add https://cdn.jsdelivr.net to the “script-src” field of Content-Security-Policy
  5. Switch on “Enable Stylesheet” in the application properties
  6. Drag a Container control to a page
  7. Add the class ‘chart’ to the Container control classes property
  8. Drag a Javascript action to the page.Load Event handler
  9. Paste the script below into the JS code property