score:1

Accepted answer
/*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 :)

score: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>

Related Articles