Salesforce on Demand: Displaying Barcharts and piecharts of active Opportunities for every Account on vfpage

In Salesforce we can create barcharts,piecharts by creating reports on an object and we cannot display them on vfpage . when i was exploring on flex barcharts and piechart i got an idea to show Barcharts and Piecharts for active Opportunities of an account on Vfpage, so i have implemented this.

Barcharts And Piecharts in Flex:-

In Flex we have tags <mx:BarChart>,<mx:PieChart> to design barcharts and piecharts.

We can bind data to them using "dataprovider=""" attribute of above tags.

Example:-

Piechart:-
              <mx:PieChart width="300"
                     height="250"
                     dataProvider="{opps}"      //opps is a array collection .Here we are binding data to piecharts.
                     visible="{opps.length > 0}" // visible when we have data.
                     includeInLayout="{opps.length > 0} >
             <mx:series>
                 <mx:PieSeries field="Amount" startAngle="90"/>
             </mx:series>
             </mx:PieChart>

Barcharts:-

         <mx:BarChart id="chart" dataProvider="{opps}" width="300" height="250">
            <mx:verticalAxis>
              <mx:CategoryAxis dataProvider="{opps}" categoryField="Name"/> // binding field to vertical axis.
            </mx:verticalAxis>
            <mx:series>
               <mx:BarSeries xField="Amount"/> // binding Amount field to x -axis.
            </mx:series>
            </mx:BarChart>

Implementation:-

Here there are two ways to implement this.

1. Every time we need to provide force.com credentials statically.

2. Passing server id,user details and account id using Flashvar property in <apex:Flash> tag .

i have done this using <apex:flash>

Step 1:- In this step we need design a flex app that shows barcharts and piecharts and active opportunities list

a . Open flex builder, create a project and name it as "Barcharts Demo" and select application type as Desktop application and finally click on finish.

Goto-->file-->New-->Flexproject.

b. In Force.com toolkit for flex, in bin folder we can find two files

1.Flex-Air swf file

2. Force-Flex swf file

copy the both files ,and paste them in to your flex project libs folder.

c. Right click on your project-->New-->MXML component.Name it as BarchartsDemoapp.

Right click on that BarchartsDemoapp.Mxml file and select "Set as Default Application".

Now open BarchartsDemoapp.Mxml.

          d. Copy the following code and paste it in that file

BarchartsDemoapp.Mxml file

   <?xml version="1.0" encoding="utf-8"?>
     <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"                                                                                             xmlns:salesforce="http://www.salesforce.com/"
   layout="absolute" width="100%" height="100%"
                                 backgroundGradientAlphas="[1.0, 1.0]"
                                 backgroundGradientColors="[#FFFFFF, #FFFFFF]"
                                 applicationComplete="init()">

    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import com.salesforce.results.QueryResult;
            import com.salesforce.results.LoginResult;
            import com.salesforce.AsyncResponder;
            import com.salesforce.objects.LoginRequest;

            [Bindable]
            private var opps:ArrayCollection;

            private function init():void
            {
                var lr:LoginRequest = new LoginRequest();
                lr.session_id = parameters.sid;   // here we have pass this from apexpage using flashvars
                lr.server_url = parameters.surl; // here we have pass this from apexpage using flashvars
                lr.callback = new AsyncResponder(loginHandler);
                force.login(lr);
            }

            private function loginHandler(result:LoginResult):void
            {
                force.query("SELECT Name, Amount FROM Opportunity WHERE Account.Id = '" +
                    parameters.aid(here we have pass this from apexpage using flashvars) + "'", new                   AsyncResponder(queryHandler));
            }

            private function queryHandler(result:QueryResult):void
            {
                opps = result.records;
            }
        ]]>
    </mx:Script>
<salesforce:Connection id="force"/>
<mx:HDividedBox height="50%" width="100%">
    <mx:Panel id="panel1" title="Piechart View" height="100%" width="33%">
        <mx:PieChart width="300"
                     height="250"
                     dataProvider="{opps}"
                     visible="{opps.length > 0}"
                     includeInLayout="{opps.length > 0}"
                     showDataTips="true"
                  >
             <mx:series>
                 <mx:PieSeries field="Amount" startAngle="90"/>
             </mx:series>
        </mx:PieChart>
        </mx:Panel>
        <mx:Panel id="panel" title="Barchart View" height="100%" width="33%">
                   <mx:BarChart id="chart" dataProvider="{opps}" width="300" height="250">
                        <mx:verticalAxis>
              <mx:CategoryAxis dataProvider="{opps}" categoryField="Name"/>
                       </mx:verticalAxis>
           <mx:series>
             <mx:BarSeries xField="Amount"/>
                       </mx:series>
              </mx:BarChart>
    </mx:Panel>
    <mx:Panel id="panel2" title="OpportunityList" height="100%" width="40%">
             <mx:DataGrid id="dg" height="100%" width="100%" dataProvider="{opps}">

            </mx:DataGrid>

     </mx:Panel>
</mx:HDividedBox>
</mx:Application>

Execute the project using CRTL+F11 or right click on project select "Runas"-->Desktop application.

Now you can find "BarchartsDemoapp.Swf" file in the bin-debug floder of your project.Copy that swf file save it to your computer.

Step 2:- Uploading swf file into Force.com StaticResources.

          a. Login to your Force.com account.

          b. Goto-->Setup-->AppSetup-->Develop-->Static Resources-->Click on NEW.

               Give Name as "BarchartsDemoapp" -->Browse the BarchartsDemoapp.swf file-->Select cache control as"public" and Save the file.

Step 3:- We have the <apex:flash > tag to embeded the Swf file on Vfpage.

   Example:-
                 <apex:flash src="{!$Resource.BarchartsDemoapp}" width="100%" height="700"   flashvars="sid={!$Api.Session_ID}&surl={!$Api.Partner_Server_URL_150}&aid={!accountId}"/>

      Explanation:- from here we are passing Session_Id,Server_Url,accountId to flex .

Step 4:- Create Apex page to display Accounts on vfpage and to display barcharts ,piecharts and active Opportunities list on vfpage.

                Goto-->Setup-->AppSetup-->Develop-->pages-->Click on New-->Name it as "Account Opportunities".

Copy the following code and paste it in that page.

<apex:page standardController="Account" recordSetVar="acc" extensions="AccountDetailController">
<script>
function getId(id)
{

    window.top.location.href='/apex/accountpage?id='+id;
}
</Script>
<apex:form >
        <apex:pageBlock >
            <apex:pageBlockTable value="{!acc}" var="acc1">
                    <apex:column headerValue="Accounts">
                            <apex:CommandLink onClick="getId('{!acc1.id}')">
                               {!acc1.Name}
                            </apex:Commandlink>
                    </apex:column>
            </apex:pageBlockTable>
       </apex:pageBlock>

       <apex:pageBlock title="Active Opportunities for Account">

            <apex:flash src="{!$Resource.piebarcharts}" width="100%" height="700"       flashvars="sid={!$Api.Session_ID}&surl={!$Api.Partner_Server_URL_150}&aid={!userId}"/>
      </apex:pageBlock>
   </apex:form>
</apex:page>

AccountDetailController:-

Goto-->Setup-->AppSetup-->Develop-->ApexClasses-->Click on New

        public class AccountDetailController
       {
         public AccountDetailController(ApexPages.StandardSetController controller) {
        }
        public String userId;
        public String getuserId() {return ApexPages.currentPage().getParameters().get('Id');}
       }

Save the Controller.

Now execute the page,

             /apex/Account Opportunities

Initially you can see only accounts on your page and with empty charts.

Now click on any account then,you can see barchats, piecharts build dynamically with opportunities data for that account.

Now you can see.........