How to pass Arrays from backing bean to JavaScript to draw a chart using Chart.js in an Ajax call

Question

I am using prime faces backing bean and Chart.js to draw a chart I am selecting a row in the data table . On selection of row updating the Canvas which has the Chart in it. I am getting the values on Selection method and building two arrays one for X axis and another for y-axis. How can i pass these arrays to JavaScript to render the chart . I tried Prime faces JSON array to pass to JavaScript. I could not get the values in JavaScrip.

Here is my sample code .xhtml code

    <p:dataTable id="myTbl" var="cars"  value="#{bean.value}"  rowKey="#{bean.carId}"  selection="#{bean.selectedCar}" selectionMode="single"  reflow="true" >            
           <p:ajax event="rowSelect" listener="#{bean.onRowSelect}" update=":chartForm"  oncomplete="drawChart();" /> 
   </p:dataTable>   




          <div class= "chart-container" > 
         <h:outputText id="outputid" value="#{bean.carId}" />              
         <canvas id="myChart"  ></canvas>     


         </div> 




 function drawChart(){   

   var carId = '#{bean.carId}';  

   alert (carId)

I am selecting a row from the above table. On selection I want to capture the id of the line , get data and display the chart.js chart on same page

here is my bean class In Bean Class

private String carId;

setter and getter methods

public void onRowSelect(SelectEvent event) { Cars car= (Cars) event.getObject();

this.carId  = car.Id ;

}

I got values into Primefaces JSON Array and passing into JavaScript .In JavaScript I am doing JSON.parse . Initially I got serialization error , so changed the bean to request scoped The problem is I am not getting any values into JavaScript I removed JSON Array and and just passing a String I can get the bean.property on xhtml page as mentioned in my code but not able to get into JavaScript Am i missing something

Sharing your research helps everyone. Tell us what you've tried and why it didn’t meet your needs. This demonstrates that you’ve taken the time to try to help yourself, it saves us from reiterating obvious answers, and most of all it helps you get a more specific and relevant answer! See also: [ask] — Spoody, Apr 09 '18 at 17:53
Possible duplicate of [Getting backing bean value with Javascript](https://stackoverflow.com/questions/14966205/getting-backing-bean-value-with-javascript) — Jasper de Vries, Apr 09 '18 at 17:58
Or https://stackoverflow.com/questions/5675017/calling-a-javascript-function-from-managed-bean — Jasper de Vries, Apr 09 '18 at 18:13
You should call your `drawChart` with `JSONArray` string from bean, at the end of `onRowSelect` using `RequestContext.getCurrentInstance().execute("drawChart('" + carId + "');");`. — Parkash Kumar, Apr 13 '18 at 14:11
The trick of directly using bean property in script using EL will work, when you are updating the script part as well. — Parkash Kumar, Apr 13 '18 at 14:14
@ParkashKumar , thanks, It is working now. i am able to get the String value. Now how can i pass JSON Array to java script . Do I need to convert to string ? — mbkreddy, Apr 13 '18 at 15:27
I just passed JSON Array as is and did JSON.parse in java script. It is working now — mbkreddy, Apr 13 '18 at 17:34
Yes, you first have to convert your `JSONArray` to `String` in bean and then you can call `JSON.parse` on that string value in JS. — Parkash Kumar, Apr 14 '18 at 08:11
Remember to accept answer and vote up, if it did help you solving your problem for future visitors with same concern. — Parkash Kumar, Apr 14 '18 at 08:12
Take more care in spelling “JavaScript”, to avoid search collisions with Java. http://javascriptisnotjava.io — Basil Bourque, Apr 22 '18 at 06:18

TestName · Answer 1 · 2018-04-09T18:10:01.680

0

you can try to use jsf expression language in javascript code

For example:

//<![CDATA[
var jsVar = #{managedBean.property}
//]]>

edited Apr 09 '18 at 18:10

answered Apr 09 '18 at 17:53

TestName

378
2
13

Can you show a working demonstration of your answer? – Jasper de Vries Apr 09 '18 at 18:00
@Трубецкой , I tried above code and getting un defined – mbkreddy Apr 09 '18 at 19:29
@JasperdeVries , I am able to call by the java script from managed bean by the links you provided. My problem is I can get #bean.property from page submit but not by an AJAX call – mbkreddy Apr 09 '18 at 19:30

Parkash Kumar · Answer 2 · 2018-04-10T14:34:34.557

Well, if you are concerned with the calling (and passing values) of JS function from bean, then you can call execute of RequestContext.getCurrentInstance() to directly invoke your scripting method from the bean, as following:

RequestContext.getCurrentInstance().execute("yourJSFunction('" + param1 + "');");

However, I think you will still be missing a trick of converting your JSONArray back to JSON object in JS, which you can do as following:

When passed from bean:

function yourJSFunction(coordinatesArray) {
    coordinatesArray = JSON.parse(coordinatesArray);
}

Or when using as a bean property:

var coordinatesArr = JSON.parse('#{yourBean.strProperty}');

I am trying all the solutions mentioned above and not still not able to get the values in to java script. may be i will elaborate further — mbkreddy, Apr 13 '18 at 13:25

How to pass Arrays from backing bean to JavaScript to draw a chart using Chart.js in an Ajax call

2 Answers2