+ Start a Discussion
prakash chaudharyprakash chaudhary 

Fusion charts in Visualforce

How to use fusioncharts in visual force page ?

Is it necessary to use fusioncharts applicaiton or just need to write code to create charts ?


We need to write a bit of code in VF Page to display the charts. We either need to get the information we want to display in the form of JSON String or any othert formats that Fusioncharts supports and do a little bit code(which can be found on thier website). I haven't worked on fusion chartrs but did on AmCharts. Thats very simple and straight forward.






prakash chaudharyprakash chaudhary

Hiiiiiiiii Bramha, can u just tell me the procedure to do it as u did in your AMCAHRTS ?

Bcoz your procedure might help & encourage me to get my goal.


Thanx Bramha........





Its really straight forward if you see AMCharts website. You will have example code to generate the Charts.




The VF Page is below:


<divid="accounts"class ="tab_content">


       <apex:outputPanel><divid="accountDownloads"style="width: 650px; height: 400px;"></div></apex:outputPanel>

       <apex:outputPanel><divid = "accountTable"></div></apex:outputPanel>





The JavaScript here:




function accountData() {

var theJSON = {!AccountDownloadsJSON}; // This is the output JSON String from Controller

var chart = new AmCharts.AmPieChart();

chart.valueField = "NumberOfDownloads";  // These are fields which you would have mentioned in JSON String in controller.

chart.titleField = "RAAName";

chart.dataProvider = theJSON;

chart.minRadius = 130 ;

chart.urlField  = "RAAID";

chart.urlTarget  = "_blank" ;

chart.angle = 30;

chart.write('accountDownloads');   // This is your div Id in VF




The Controller:





public String getAccountDownloadsJSON() {

JSON.JSONList theJSON = new JSON.JSONList();


for(RAA__c raa : accounts) {

JSON.JSONMap accountJSON = new JSON.JSONMap();

accountJSON.put('RAAID', '/'+raa.Id);

accountJSON.put('RAAName', raa.Client_Name__c);

accountJSON.put('NumberOfDownloads', raa.Number_of_Downloads__c);

accountJSON.put('TotalDownloads', totalDownload);




return theJSON.out().replace( ' "RAAID" ', 'RAAID').replace(' "NumberOfDownloads" ', 'NumberOfDownloads');









prakash chaudharyprakash chaudhary

Thanx alot Bramha,

Let me try again...

Hope previous one will help me to get it...


Are you clear about how to do these charts stuff. If you want more info i can provide.






prakash chaudharyprakash chaudhary

Yup Bramha, I understood the previous one & nw I am trying by myself so if any prob will occur then I ll tell you or post here...

Mike @ BlackTabMike @ BlackTab

Aren't you missing a SOQL query that grabs the accounts?