How can I take a backingbean GSON string to Highcharts

Question

I'm fairly new when it comes to JS, jQuery and JSON stuff, so any help is greatly appreciated. I have a project I am trying to work with Highcharts on, that's JSF 2.2, RichFaces 4. I've already got my backing bean which pulls data from a database, and put's store's in a collection. I then convert the collection to a GSON string. A sample of the data, from a printout of the GSON object is

{"Pool Price":[{"date":"Date.UTC(2012,5,4,1)","data":"1144.144"},{"date":"Date.UTC(2012,5,4,2)","data":"1030.421"}], "RAPP":[{"date":"Date.UTC(2012,5,4,1)","data":"11.50"},{"date":"Date.UTC(2012,5,4,2)","data":"10.87"}]}

When it comes to the page, I designed a chart in JSFiddle from the HighCharts example page, and used some hard-coded values to get the look/design right.

My problem now, is getting the data from the backing bean, to highcharts. My page right now looks like this

<h:head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

    <script src="http://code.highcharts.com/stock/highstock.js"></script>

    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/modules/exporting.js"></script>
   <script type="text/javascript">
    $(document).ready(function() {
        function chartdata() {

           console.log("Grabbing chart data");
           var data = jQuery("#chartvalue").attr('value');

             }
         });
    </script>
</h:head>
<h:body>
    <h:form prependId="false" >

<a4j:commandButton value="LoadData" oncomplete="chartdata();" action="#{dailyReportBean.loadChartData}" id="chartvalue_btn" />
<h:inputHidden value="#{dailyReportBean.json}" id="chartvalue"  />

        <div id="container">
            <script src="DR_PoolPrice_Graph.js" type="text/javascript"></script>
        </div>
    </h:form>
</h:body>

A preset JS file with the values coded in, loads fine. So the problem is just acessing the data from in chartdata() to the highcharts file, and how i reference that.

Here's what the highcharts file looks like

$(function() {
Highcharts.setOptions({
    colors: ['#FFFFCC','#799ECD',]
});

var chart = new Highcharts.StockChart({

    chart: {
        renderTo: 'container',
        backgroundColor: '#FCD5B5',
        borderColor: 'EBBA95',
        borderWidth: 2,
        borderRadius: 10,
        spacingLeft: 40,
        spacingRight: 20,
        zoomType: 'x',
        plotBorderColor: '#346691',
        plotBorderWidth: 1,
        plotBackgroundColor: {
            linearGradient: {
                x1: 0,
                y1: 0,
                x2: 0,
                y2: 1
            },
            stops: [
                [0, 'rgb(255, 255, 255)'],
                [1, 'rgb(200, 200, 255)']
                ]
        }
    },

    title: {
        text: 'Price'
    },

    rangeSelector: {
        enabled: false
    },

    yAxis: {
        labels: {
            x: -25
        }
    },

    legend: {
        enabled: true,
        floating: false,
        align: 'center',
        backgroundColor: '#FCFFC5',
        borderColor: 'black',
        borderWidth: 1,
        layout: 'horizontal',
        verticalAlign: 'bottom',
        y: 0,
        shadow: true
    },

    navigator: {
        enabled: false
    },

    scrollbar: {
        enabled: false
    },

    navigation: {
        buttonOptions: {
            align: 'right'
        }
    },

    series: [{
        name: 'RAPP',
        data: rapp,
        type: 'area'},
        {
        name: 'Pool Price',
        data: poolprice},
    ]
});
});

I am sorry that this is a rather large post, I just wanted to be thorough, as I've tried looking at this a bunch of different ways and it's just not clicking for me. I am sure it's something silly.

Thanks for any input you can provide!

Answer 1

You need to update the <h:inputHidden> on the ajax request so that jQuery gets the updated value.

<a4j:commandButton ... render="chartvalue" />

Easier is to just pass it as an argument into oncomplete:

<a4j:commandButton ... oncomplete="chartdata(#{dailyReportBean.json})" />

with

<script type="text/javascript">
    function chartdata(data) {
        console.log("Chart data already retrieved: " + data);
    }
</script>

Answer 2

/*Ajax call to get the Chart data in JSON Format */
function getJsonChartData(str ) 
           {

    var http_request = new XMLHttpRequest();
    http_request.open("GET", "drawChart.php?client_name="+str, true);

    http_request.onreadystatechange = function() {
        var done = 4, ok = 200;
        if(http_request.readyState == done && http_request.status == ok) {
            my_JSON_object = JSON.parse(http_request.responseText);  // JS json Object to capture the returning json text 
                chart.showLoading(); // show loading image on chart

            /***************** setting data to chart dynamically *************/


            chart.series[1].setData(my_JSON_object[5]); //should be 5

            chart.series[2].setData(my_JSON_object[4]);

            chart.series[3].setData(my_JSON_object[1]);

            chart.series[4].setData(my_JSON_object[0]);

            chart.series[5].setData(my_JSON_object[2]);

                chart.series[6].setData(my_JSON_object[3]);

            chart.xAxis[0].setCategories(my_JSON_object[6]); 



        }
    };
    http_request.send(null);

}

I went through with your question , but didn't got what you really wanted , any way if you trying to load highchart data dynamically from a JS file best way is to do a ajax call and get the data as a JSON object , then set that data manually by referring highchart's chart object above example is what how I used it to set data , via a php file , hope this helps :)