How to add an JSF action for event handling to Chartcreator charts

Posted by – June 24, 2008

Chartcreator is a very cool charting component for JSF, it uses JFreeChart as rendering engine, chartcreator can render many kinds of charts, including 3D charts, but there are some circunstances where just render charts isn’t enougth and you need some interaction too, I’ll show in this article how can you and some user interaction with Chartcreator generated charts.

Our example is a small piece of JSF code where we have a chart, a script block and a form with a inputText and a commandLink, our idea is simple, the user clicks on any portion of chart image, a imagemap click event is triggered and in javascript code we collect the information about the imagemap portion that we clicked and then pass this data to our inputText, a click is fired on commandLink and the data stored on inputText is set on managedbean property, the managedbean action is called performing some aplication navigation of something else.


Please read the comments carefully.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!--
Declaring our chart component, in order to enable some user
interaction you must set some attributes like usemap, generateMap
and ongeneratedimagemapclick.
ongeneratedimagemapclick allows to specify which javascript function
will be used to handle imagemap clicks in this case the imageMapChartClick
function will be called.
-->
<cc:chart id="chartname"
     datasource="#{bean.myChartData}"
     type="bar" background="white"
     width="510" height="310" is3d="false"
     colors="#9B0094,#24009A,#FFA300,#FF0000,#74BD68"
     orientation="horizontal" legend="false"
     usemap="#chatimagemap" generateMap="chartimagemap"    
      ongeneratedimagemapclick="imageMapChartClick">                   
    <cc:chartAxis domain="true" tickLabelFontSize="12"/>
    <cc:chartAxis tickLabelFontSize="12"/>
</cc:chart>
<!--
The javascript function below will process the chart imagemap
parameters contained in a specific portion of the chart.
-->
<script>
function imageMapChartClick(chartImageMapParameters) {
   /*
   In the line below we just can an utility method that parse imagemap
   parameters and return as an associative array.
   */
   chartImageMapParameters =
       returnArrayFromParameters(chartImageMapParameters);
   imageMapParamValue = chartImageMapParameters["series"].replace("+", " ");
   //the data collected from imagemap will be set on inputText
   document
       .getElementById('chartdataform:chartdatainput')
       .value = imageMapParamValue;                    
   /*
   Now the commandLink click is fired and all data is submitted to
   the server, the data on inputText is set on managedbean
   property and the managedbean action is called.
   */
   document.getElementById('chartdataform:chartdatalink').onclick();                       
}
</script>
<!--
The form below will be used to allow server side interaction, it
must have at least an input component like inputText and a
commandLink, the inputText will help us to set managed bean
property and the commandLink will call the managedbean action.
-->
<h:form id="chartdataform">
    <h:inputHidden id="chartdatainput" value="#{bean.property}"/>
    <h:commandLink id="chartdatalink"
               action="#{bean.actionAsEventHandler}"/>
</h:form>

This feature already exists in chartcreator since 1.2 version, if you have any questions about how to enable this feature on your applications, please let me know.

Share

5 Comments on How to add an JSF action for event handling to Chartcreator charts

  1. Rafael Ponte says:

    Very interesting Rogerio, pretty good!

    I didn’t know that resource, i liked it. But in your example you’re using a h:inputHidden instead of h:inputText, then on form submit to server the attribute #{bean.property} won’t be populated with h:inputHidden value, right?

    However, it’s possible to get h:inputHidden value through of request.getParameter method, but i believe that is not best way.

    Great post, cheers

  2. rogerio says:

    Yes! Right! I’m using a JSF component to enable valuebinding in this example.

  3. Lana says:

    Hi! Just read this post and it\’s exactly what I need for my bar chart.
    Tried this but :sad:
    The chart is there but absolutely no thing is happening.
    What my bar chart is required is to display tooltip or execute an action
    onclick.
    Just a little bit more help with this or an example project?!

    P.S
    (JSF, ADF BC and first time using charts :-)

  4. rogerio says:

    Are you using chartcreator?

  5. Mitesh says:

    I need to customize the tooltip text
    .. for example in stacked bar chart on mouseover tooltip shows as ( Series 1, 12 ) = 22 , now when i use the data value on chartclick it only gives me the value for Series 1 and 12 but i want to get the value of 22 , can you help me pls! let me know if my problem statement is not clear

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>