+ Start a Discussion
Ankur_Tyagi.ax1759Ankur_Tyagi.ax1759 

jQuery is not ploting chart on visualforce page with remote function

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>

 

 

Best Answer chosen by Admin (Salesforce Developers) 
cwall_sfdccwall_sfdc

Are there Javascript erros?  See Firebug or Dev Tools (Chrome).

 

What not use Visualforce Charting?

Refreshing Visualforce Charts with Updated Data

All Answers

cwall_sfdccwall_sfdc

Are there Javascript erros?  See Firebug or Dev Tools (Chrome).

 

What not use Visualforce Charting?

Refreshing Visualforce Charts with Updated Data

This was selected as the best answer
Ankur_Tyagi.ax1759Ankur_Tyagi.ax1759

HI,

 

Thanks for your reply!! I was using using  Visualforce Charting only but requirement was to implement it in jquery.Actully 

there was no javascript error, the problem was with visualforce remote remoting. there was no syncronization bitween  VF remote function and another functions, so now i have removed VF remorting part and calling apex class method synchronously. Now it is working fine.....