Hi All,

I am using some highchart.js file to plot a graph on visualforce page, if i use hard code value to graph in js code then it is working fine but, if i use VF remoting to bring data from apex controller to plot graph, VF remoating bringing data from apex controler but jquery not ploting graph at all.

I am pasting my VF page code. Please help me on this...

VF page code:

<apex:page controller="ChartController">

    <apex:includeScript value="{!URLFOR($Resource.jQuery)}"/>
    <apex:includeScript value="{!URLFOR($Resource.HighChartJS, '/js/highcharts.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.HighChartJS, '/js/modules/exporting.js')}"/>
    <script type="text/javascript">
            var accountNames = [];
            var optNums = [];
            var optProbs = [];
            $(function() {
                
                 //VF remoating start
                Visualforce.remoting.Manager.invokeAction(
                    '{!$RemoteAction.ChartController.getRemoteData}',
                    function(result, event){
                        if (event.status) {
                        
                            for(var i=0; i<result.length; i++)
                            {
                                accountNames.push(result[i].name);
                                optNums.push(result[i].data1);
                                optProbs.push(result[i].data2);
                            }
                            
                            alert(accountNames);
                        } 
                        else {
                            //document.getElementById("responseErrors").innerHTML = event.message;
                            alert(event.message);
                        }
                    }, 
                    {escape: true}
                );
            
                //VF remoating end
            });
            $.when.apply($, accountNames).done(function() {
                
                $('#container').highcharts({
                    chart: {
                        type: 'line'
                    },
                    title: {
                        text: 'Monthly Average Temperature'
                    },
                    subtitle: {
                        text: 'Source: WorldClimate.com'
                    },
                    xAxis: {
                        categories: accountNames
                        //categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                    },
                    yAxis: {
                        title: {
                            text: 'Temperature (°C)'
                        }
                    },
                    tooltip: {
                        enabled: false,
                        formatter: function() {
                            return '<b>'+ this.series.name +'</b><br/>'+
                                this.x +': '+ this.y +'°C';
                        }
                    },
                    plotOptions: {
                        line: {
                            dataLabels: {
                                enabled: true
                            },
                            enableMouseTracking: false
                        }
                    },
                    series: [{
                        name: 'Tokyo',
                        //data&colon; optNums
                        data&colon; [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
                    }, {
                        name: 'London',
                        //data&colon; optProbs
                        data&colon; [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] 
                    }]
                });
            });
<table width="100%">
    <tr>
 <td width="50%">
     <div id="container" style="width: 500px; height: 500px;"></div>
 </td>
    </tr>
</table>
</apex:page>