High Charts On Click

  

Hi,

I have implemented couple of high charts into OutSystems. I was wondering if we can set an On_Click function for a high chart. I have set the clickable property to true but it doesnt trigger the action it has been linked to. Does the clickable property need to be set within the JSON query for the high charts?


Thank you,

Regards,
Archit

Hello Archit, 

No need to do anything in json.
Just set the Clickable property to True and set the OnChange property to a new screen action.

It will create the screen action for you and will add an action to retrieve the point it was clicked:

It works out of the box.

What exactly is not working?

Cheers,
Eduardo Jauch

Hi Eduardo,
Thanks for your reply. I have already done that but the action never triggers. Since this is not a normal chart and is using Highcharts, I am not sure if I can use the above method.


Archit Yadav wrote:

Hi Eduardo,
Thanks for your reply. I have already done that but the action never triggers. Since this is not a normal chart and is using Highcharts, I am not sure if I can use the above method.


How are you creating the Highcharts graphics? Through some component (like MoreCharts) or are you embedding directly the Highcharts (javascript and everything else)?


Eduardo Jauch wrote:

Archit Yadav wrote:

Hi Eduardo,
Thanks for your reply. I have already done that but the action never triggers. Since this is not a normal chart and is using Highcharts, I am not sure if I can use the above method.


How are you creating the Highcharts graphics? Through some component (like MoreCharts) or are you embedding directly the Highcharts (javascript and everything else)?


I am creating highcharts using JSON on the advanced property of a chart.


Ok,

We have here an example where the behavior is the same as you mention. When doing extra configuration using the Highcharts JSON, the action is not triggered.

In this case, it seems that you need to include in the JSON the required code to call your action.

In our case, for example we tested setting the events/Click in PlotOptions / Gauge

                events: {
                    click: function () {
                        /* Put here the code to call your action, for example */
                    }
                }

Than it worked.

Hope it helps.
Cheers,

Eduardo Jauch

Hi Eduardo,

Thanks! I managed to get to that point. Now the next thing I am having issue with is passing the variable which I click on, into the action I am running in Outsystems as an input parameter.



Solution

Archit Yadav wrote:

Hi Eduardo,

Thanks! I managed to get to that point. Now the next thing I am having issue with is passing the variable which I click on, into the action I am running in Outsystems as an input parameter.



One option is to include a "hidden" input, and use some javascript in the fuction like this:

document.getElementById(<your input widget reference>).value = "value"; 

Than, when you call the action (you can use a hidden button and click it with javascript), you will have acess to the variable bound to the input, where you put the value.


Solution

Thanks Eduardo! That worked!