java - JSF, HighCharts and JS

Question

I would like to use in my project highcharts and jsf both. I have a managedbean, which has a list and it is initializing by a facade (it do a query in my database). If I'd like to pass the value of the list to highcharts, how can do this? if anyone has a good idea, please share.

Best regards and thanks a lot

Answer 1

Haven't worked with highcharts , but I did with other charting library...

I'll give you general Instructions on how to combine js based charting directory it with JSF (I'm sure that there are others way's like using servlets and etc...)

1) build a working "hard coded" js only example in your JSF project include the relevant *.js files needed by the library add the "container" div that is required to your page and finally wrtie the js script that build your chart with hard coded values

2) place your hard coded values into your Bean String property and place a ref' to that property in your .xhtml page something like that <h:inputHidden id="chart_input_data" value="#{myBean.valueOfChart}" /> and access it in your js code like that

//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 use the variable data_for_chart as chart series input (or for whatever parameter of your chart constructor)

3) finally I guess you would like to turn some list of Pojos into a proper json format which is most like wold "fit like a glove" for the HigthCharts constractor , this you can achieve with Gson library something like gson.toJson(yourListOfValues) see Gson user guide

Note

This technique should work for all charting library's , such as flot , flotr2 , gRaphael , jqPlot and more...