How to add an JSF action for event handling to Chartcreator charts
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.
Loading ...
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
July 20th, 2008 | #
Yes! Right! I’m using a JSF component to enable valuebinding in this example.
July 27th, 2008 | #
Hi! Just read this post and it\’s exactly what I need for my bar chart.
Tried this but
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
April 3rd, 2009 | #
Are you using chartcreator?
April 3rd, 2009 | #
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
April 13th, 2009 | #