4 Replies Latest reply: Aug 2, 2013 3:35 AM by sus2013 RSS

    How to obtain the user clicked SeriesName from a APEX 4.2 flash Chart and set to a hidden item?




      I  am developing a clickable APEX flash chart, which should be linked to a specific data set on a different page using the clicked SeriesName ( out of multiple chart series) .


      The sql ( returned from a function) for the APEX chart is


      select distinct null link, d.DNAME label
      , sum(e.sal) over (partition by e.deptno) salary
      , sum(e.comm) over (partition by e.deptno) comm
      from dept d, emp e
      where e.deptno = d.deptno


      Currently I am able to disply SeriesName (e.g either Salary or Comm) on the 2D line chart . This is done by including {%SeriesName} in Custome XML.


      But I am unable to detect which series name the user clicks on - being Salary or Comm.  i.e. I am not able to capture the clicked Series name and set it to a hidden item ( called P38_SERIES_NAME).  Do I need to use JavaScript to achieve this ? If so, how ?


      The reason why I want to use the single sql is due to I will have to call a function to return the sql dynamically and at run time I don't know how many series I would have. i.e. could be salary, comm, average age, bonus etc...


      What's the simplest way to achieve this ?   I am using APEX 4.2 and Oracle 11g.


      Thanks for your advice.



      Susanna Su

        • 1. Re: How to obtain the user clicked SeriesName from a APEX 4.2 flash Chart and set to a hidden item?
          Tom Petrus

          AnyChart actually has quite good javascript integration, and you can find documentation on this right here:



          Now let's say I have chart with the query you provided, and want to get the series name when someone clicks on the chart. These are handled by the point events, and events are added by calling the addEventListener method on a chart object.

          The first thing to do is getting a chart object. It's easier to first assign a static id to your region to do this. For example, give the chart region a static id of "empchart".

          The flash chart is an "object"-type html element, and it is embedded in a div. The object tags have an id but quite a useless one, for example "__AnyChart___0". This might be changed in the custom xml but I didn't verify this. The embedding div has an id matching the id we gave to the region earlier plus "_chart" added to it.

          To call the addEventListener object you need a chart object. You can get this by calling "getChartById", which takes an id as input parameter. This id is the id of the "object" html element of the chart.

          So pieced together:

          AnyChart.getChartById($("#empchart_chart object").attr("id"))


          $("#empchart_chart object").attr("id") will get the id of the chart object element, and this will be passed to the getChartById function.

          This function will return a chart element, and on this an event can be bound, such as the pointClick event.

          See this URL for info on the javascript events: http://www.anychart.com/products/anychart/docs/users-guide/JavaScriptEvents.html

          When using a point event handler, there is all sorts of info available. http://www.anychart.com/products/anychart/docs/users-guide/JavaScriptEvents.html#data-available-point-events

          For example, the series name is under "data.Series.Name"

          All put together, running this on the page will alert the series when you click on a datapoint in the chart:

          AnyChart.getChartById($("#empchart_chart object").attr("id")).addEventListener("pointClick",function(e){alert(e.data.Series.Name);})

          (e is the object passed on from anychart which contains all the info)

          • 2. Re: How to obtain the user clicked SeriesName from a APEX 4.2 flash Chart and set to a hidden item?

            Thanks TomPetrus for the doc and detailed explainations!!


            For the same example,  I am able to (1) get the SeriesName after clicking the chart. (2) set it to an APEX text item of the SAME page.(3) Show its value using Alert.


            Here is the code I used :



                                                          $("#empchart_chart object").attr("id")).addEventListener("pointClick",

                                                         function(e) {


            However, I am having trouble to pass the value of the text item P38_SERIES_NAME to another APEX text item of a different APEX page (no.33) using URL. i.e. the value of P33_CLICKED_NAME is always blank.


            Here is the code I used :





            So what is missing here ? Does it mean the item P38_SERIES_NAME loses its value after leaving its page ? If I hard code the default value of P38_SERIES_NAME  to 'ABC', then the link works, i.e. P33_CLICKED_NAME also has value of 'ABC'.   How to resolve this issue ?




            • 3. Re: How to obtain the user clicked SeriesName from a APEX 4.2 flash Chart and set to a hidden item?
              Tom Petrus



              What you are encountering is the difference between session state and the value of the item on the page. The URL you have is being generated on page render, and will use the current session state value of the item at that moment. Then when the page is at the client side and you are setting the value of the item through javascript that value is still only at the client's side and not in session state. Putting the value in session state would not matter though, as the link has already been rendered. Your best option is to submit the page, ensuring the correct value is set to session state, and use a branch in the after submit processes to redirect the user to the correct page.

              I've also described this here: https://forums.oracle.com/message/11110579#11110579

              • 4. Re: How to obtain the user clicked SeriesName from a APEX 4.2 flash Chart and set to a hidden item?

                Great, it is working now!!! Thanks for your advice.