Лучший метод передачи данных из компонента Java / JSF2 в компоненты Javascript / jQuery в качестве возвращаемых значений

У меня возникли проблемы с поиском лучшего метода передачи данных из резервного / управляемого bean-компонента Java в компонент jQuery / Javascript, такой как Highcharts, чтобы мое веб-приложение генерировало / отображало данные в динамическом режиме в реальном времени. Я довольно твердо придерживаюсь своей Java-стороны, но у меня довольно ограниченные знания JavaScript / jQuery, из-за которых я, очевидно, падаю. Насколько я прочитал, лучший способ - использовать Ajaxify скрытое поле в моем веб-приложении и передать объект или строку JSON? в него, а затем передать это значение в мой компонент JS.

Во-первых, это кажется немного трудоемким, поскольку у меня был бы вызов Ajax для обновления данных JSON, а затем вызов setInterval для повторного считывания данных в компонент JS? Я надеялся, что смогу передать данные прямо в компонент JS ...

В любом случае кто-нибудь мог бы просто укрепить мои знания и сказать мне хороший проверенный и проверенный метод, если он отличается от приведенного выше ... Руководства / демонстрации будут также будут высоко оценены !!

Я также использую Primeface 2.2.1 если это повлияет на предлагаемую методологию?

Ура

Ally

ОБНОВЛЕНИЕ:

Код ниже, но я просто хочу описать, чего я пытаюсь быстро достичь: На самом деле я пытаюсь реализовать динамическую диаграмму Highcharts, используя простую функцию count ++ из моя поддерживающая фасоль. Очевидно, что в дальнейшем я буду использовать поток в реальном времени для предоставления этих данных, но на данный момент я просто пытаюсь заставить Highcharts работать на основе изменения информации из моего вспомогательного компонента JSF.

Вот моя простая функция подсчета и преобразование в JSON (я не уверен, действительно ли нужен метод JSON, поскольку передается только 1 значение (int), но я хотел бы сохранить этот метод, так как уверен, что буду использовать более широко в других частях веб-приложения):

public class TestBean {

    private int output;

    public TestBean() {
        output = 1;
    }

    public int getOutput() {
        return output;
    }

    public void setOutput(int output) {
        this.output = output;
    }

    public void update() {
        setOutput(getOutput() + 1);
    }

    public void prepareChartDate() {
        // Produce you JSON string (I use Gson here)
        RequestContext reqCtx = RequestContext.getCurrentInstance();
        reqCtx.addCallbackParam("chartData", new Gson().toJson(output));
    }
}

Внешний JS-файл Highcharts, снова стоит отметить, что я сохранил функцию серии в нижней части диаграммы для построения / заполнения графика, прежде чем я начну добавлять полученные значения из JSF Beans:

Highcharts.setOptions({
    global: {
        useUTC: false
    }
});

var chart;
$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            backgroundColor: "#F8F0DB",
            renderTo: 'containerHigh',
            defaultSeriesType: 'area',
            margin: 10,
            marginLeft:30,
            marginBottom:17,
            zoomType: 'y',
            events: {
                load: updateChartData
            }
        },
        title: {
            text: 'Feed Flow Rate '

        },
        xAxis: {
            type: 'datetime',
            tickPixelInterval: 150
        },
        yAxis: {
            title: {
                text: ''
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            formatter: function() {
                return '<b>'+ this.series.name +'</b><br/>'+
                Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+ 
                Highcharts.numberFormat(this.y, 2);
            }
        },
        legend: {
            enabled: false
        },
        exporting: {
            enabled: false
        },
        plotOptions: {
            area: {
                fillColor: {
                    linearGradient: [0, 0, 0, 100],
                    stops: [
                    [0, Highcharts.getOptions().colors[0]],
                    [1, 'rgba(2,0,0,0)']
                    ]
                },
                lineWidth: 1,
                marker: {
                    enabled: false,
                    states: {
                        hover: {
                            enabled: true,
                            radius: 5
                        }
                    }
                },
                shadow: false,
                states: {
                    hover: {
                        lineWidth: 1                        
                    }
                }
            }
        },
        series: [{
            name: 'Random data',
            data: (function() {
                // generate an array of random data
                var data = [],
                time = (new Date()).getTime(),
                i;

                for (i = -19; i <= 0; i++) {
                    data.push({
                        x: time + i * 10000,
                        y: 50 * Math.random()
                    });
                }
                return data;
            })()
        }]
    });        
}); 

И встроенная функция JS, хранящаяся на моей странице XHTML:

Это работает:

 function updateChartData(xhr, status, args) { 
    var series = this.series[0];
    setInterval(function() {            
        var x = (new Date()).getTime()
        y = 50 * Math.random();
        series.addPoint([x, y], true, true);   

    }, 1000)       
//parse it, process it and load it into the chart
}

, но когда я пытаюсь передать значение моего bean-компонента:

 function updateChartData(xhr, status, args) { 
    var jsonString = args.chartData
    var series = this.series[0];

    setInterval(function() {            
        var x = (new Date()).getTime()
        y = jsonString 
        series.addPoint([x, y], true, true);   

    }, 1000)       
//parse it, process it and load it into the chart
}

Это не работает ...

Кроме того, я пробовал использовать и remoteCommand, и Poll, чтобы заставить график работать, ни с одним из которых мне не удалось добиться успеха:

 <h:form>                       
                    <p:commandButton value="update" action="#{testBean.update}" update="beanvalue"/> 

                    <h:outputText value="#{testBean.output}" id="beanvalue"/> <br />
                    <h:outputText value="#{testBean.output}" id="chartValue"/> <br />

                    <p:commandButton value="Load" type="button" onclick="fetchChartData();"/>
                    <p:remoteCommand name="fetchChartData"
                                     action="#{testBean.prepareChartDate()}"
                                     oncomplete="updateChartTest(xhr, status, args);"/>            
                </h:form>

Как я уже сказал ранее, Бхеш, ваша помощь очень ценится, и в дальнейшем будет здорово!

Ура

Союзник