[OutSystems Charts] Charts Version 3.3 Mouse Over Event Functions not working in JS

Back to Forums

Aarathi S

Solved

Question

JavaScript

Reactive

1-Click Publish

Charts

Forge

Application Type

Reactive

Service Studio Version

11.54.42 (Build 63111)

I have added a JS Code in the Pie Chart Initialized Action, where I want to control the opacity of a series on mouse hover. However the event functions in JS code is not working. Can anyone please suggest me the right way of calling it? Even a console.log() inside the function is not executing correctly. In the end I tried with customizeChartObject Action also. Please find the event section below and the entire JS Code is added as an attachment.

const chartEvent = {

plotOptions: {

series: {

point:{

events: {

mouseOver: function ()

{

var chart = this.series.chart;

var innerLen = chart.series[1].data.length

for (var i = 0; i < innerLen; i++)

{

chart.series[1].data[i].update({visible: false})

if(this.id == chart.series[1].data[i].id)

{

console.log(this.id)

chart.series[1].data[i].update({visible: true})

chart.series[1].update({visible: true})

}} },

mouseOut: function () {

var chart = this.series.chart;

chart.series[1].update({visible: false})

}}}}}};

//OutSystems.ChartAPI.ChartManager.GetChartById($parameters.ChartWidgetId).customizeChartObject(chartEvent;

OutSystems.ChartAPI.Chart.SetProviderConfigs($parameters.ChartWidgetId, JSON.stringify(chartEvent));

JS.txt

25 Jan 2024

Gonçalo Martins

Staff

Solution

Replying to You's comment on 30 Jan 2024 08:57:33

Hi again @Aarathi S ,

I did a quick test and first of all I would like to understand what's the use case you're trying to achieve with those two events, but that part of the event's functions implementation I just ignored and focused on what I found that was not correct.

In terms of code there were two main issues:

there were syntax errors on the JSON object that would make it fail consistently since it was not a valid HighChart object.
you were using the API provided by OutSystems Charts through the client action SetHighchartsChartConfigs but as mentioned in the client action's description, this API doesn't support callback functions for security reasons.
- However, through extensibility and by exploring the HighChart APIs we can still make it work by calling the update method like you did on your functions but applying it to the Chart instance, being something like:
```
OutSystems.ChartAPI.Chart.GetById($parameters.ChartWidgetId).provider.update(chartEvent, true, true);

//where $parameters.ChartWidgetId is the Chart block identifier
```

So the final solution looks like this (ignoring once again the implementation of your functions, but making some optimizations):

Hope it helps!

Cheers,
GM

See solution in context

30 Jan 2024

Aarathi S

Hi @Gonçalo Martins , Could you please help me on this?

30 Jan 2024

3 replies

Last reply 31 Jan 2024

Show thread

Hide thread

Gonçalo Martins

Staff

Hi @Aarathi S

Can you please provide a sample oml with that use case so we can take a look?
Btw, next time please tag the post to the Forge Component so it can be easier to be seen.

Cheers,
GM

30 Jan 2024

Gonçalo Martins

Staff

Solution

Replying to You's comment on 30 Jan 2024 08:57:33

Hi again @Aarathi S ,

In terms of code there were two main issues:

there were syntax errors on the JSON object that would make it fail consistently since it was not a valid HighChart object.
you were using the API provided by OutSystems Charts through the client action SetHighchartsChartConfigs but as mentioned in the client action's description, this API doesn't support callback functions for security reasons.
- However, through extensibility and by exploring the HighChart APIs we can still make it work by calling the update method like you did on your functions but applying it to the Chart instance, being something like:
```
OutSystems.ChartAPI.Chart.GetById($parameters.ChartWidgetId).provider.update(chartEvent, true, true);

//where $parameters.ChartWidgetId is the Chart block identifier
```

So the final solution looks like this (ignoring once again the implementation of your functions, but making some optimizations):

Hope it helps!

Cheers,
GM

30 Jan 2024

Aarathi S

Replying to Gonçalo Martins' comment on 30 Jan 2024 14:21:09

Thank you so much @Gonçalo Martins . It worked after calling the update method in chart instance. I have changed the code of event logics too. The goal was to display the corresponding inner hierarchical ring on hover of any segment in the outer ring. Thanks a lot! Will make sure to use the Forge Component Tags in future for Chart Related Queries!!

ChartsTest.oml

31 Jan 2024

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.

See the full guidelines