JSF, HighCharts and JS

Question

I would like to use both highcharts and jsf in my projects. I have a managedbean that has a list and it is initialized by the facade (it makes a request in my database). If I want to pass a list value to highcharts, how do I do this? if someone has a good idea, please share.

Best regards and thanks

Answer 1

Didn't work with highcharts, but I did it with another graphics library ...

I will give you general instructions on how to combine the jing-based charting directory with JSF (I'm sure there are other ways to use servlets, etc.)

1) create a working example of hard coding js only in your JSF project include the corresponding * .js files, add the section “container” that is required for your page to the library and finally write a js script that build a chart with hard-coded values

2) put your hard-coded values ​​in your Bean String property and put ref 'on this property on your .xhtml page something like this <h:inputHidden id="chart_input_data" value="#{myBean.valueOfChart}" /> and get access to it in your js code, for example

 //I used jQuery selectors.... var data_for_chart = $('input[id$="chart_input_data"]').val(); //you can use a simpler selector like $("#chart_input_data") too 

than using the data_for_chart variable as an insert in the series chart (or for any parameter in the chart constructor)

3) finally, I think you would like to turn some Pojos list into the correct json format, which is most similar to wold, "suitable as a glove" for HigthCharts toolkit, this can be achieved using the Gson library something like gson.toJson(yourListOfValues) see the Gson User Guide

Note

This method should work for the entire graphics library such as flot , flotr2 , gRaphael , jqPlot and more ...