0

Have created charts related to its tab. Scenario is there there are three tabs[Account,Leads and Forecast] .When i click on Accounts tab,it should display charts related to Accounts. Likewise when i click on Leads tab ,it displays chart related to Leads.

My problem is when i click from Accounts tab to Leads tab,whole page gets refreshed/loaded. Below is the code for Page and controller.

Page:

<apex:page controller="PieChartController" title="Pie Chart">

<apex:tabPanel switchType="server" id="panel">

    <apex:tab label="Account" id="tab1">
       <apex:chart height="200" width="200" data="{!pieData}">
        <apex:pieSeries dataField="data" labelField="name"/> 
        <apex:legend position="right">
        </apex:legend>
      </apex:chart>

      <apex:chart height="200" width="200" data="{!pieData}">
        <apex:pieSeries dataField="data" labelField="name"/> 
          <apex:legend position="right">
        </apex:legend>

       </apex:chart>
    </apex:tab>



     <apex:tab label="Leads" id="tab2" reRender="">

        <script>
        var barData = [{'data':100, 'label':'UK'}, {'data':30, 'label':'France'}, {'data':55, 'label':'Spain'}, {'data':60, 'label':'Germany'}];
        </script> 

        <apex:chart data="barData" height="300px" width="300px">


            <apex:axis type="Numeric" position="left" title="Nos Leads" grid="true" fields="data" minimum="0">
            </apex:axis>

            <apex:axis type="Category" position="bottom" fields="label" title="Country">
                <apex:chartLabel rotate="315"/>
            </apex:axis>

            <apex:barSeries orientation="vertical" axis="left" xField="label" yField="data"/>
        </apex:chart>
     </apex:tab>




     <apex:tab label="Forecast" id="tab3">

        <apex:chart name="AnnualRecurringRevenue" data="{!nvs}" width="400" height="400"
                colorSet="#156F9E,#FF9123,#6BAE4A,#424242,#A4A4A4">
            <apex:axis type="Numeric" position="left" grid="true" title="$(Millions)"
                    fields="v"/>
            <apex:axis type="Category" position="bottom" grid="false" title="Quarter"
                    fields="n"/>
            <apex:barSeries orientation="vertical" axis="left" xField="n" yField="v"
                    colorsProgressWithinSeries="true"/>
        </apex:chart>



         <apex:chart name="AnnualRecurringRevenue 2" data="{!nvs}" width="400" height="400"
                colorSet="#156F9E,#FF9123,#6BAE4A,#424242,#A4A4A4">
            <apex:axis type="Numeric" position="left" grid="true" title="$(Millions)"
                    fields="v"/>
            <apex:axis type="Category" position="bottom" grid="false" title="Quarter"
                    fields="n"/>
            <apex:barSeries orientation="vertical" axis="left" xField="n" yField="v"
                    colorsProgressWithinSeries="true"/>
        </apex:chart>



       <apex:chart name="AnnualRecurringRevenue 3" data="{!nvs}" width="400" height="400"
                colorSet="#156F9E,#FF9123,#6BAE4A,#424242,#A4A4A4">
            <apex:axis type="Numeric" position="left" grid="true" title="$(Millions)"
                    fields="v"/>
            <apex:axis type="Category" position="bottom" grid="false" title="Quarter"
                    fields="n"/>
            <apex:barSeries orientation="vertical" axis="left" xField="n" yField="v"
                    colorsProgressWithinSeries="true"/>
        </apex:chart>

   </apex:tab>
 </apex:tabPanel>
</apex:page>

Controller:

public class PieChartController {

    public List<PieWedgeData> getPieData()
   {
       List<PieWedgeData> data = new List<PieWedgeData>();
        data.add(new PieWedgeData('Jan', 30));
        data.add(new PieWedgeData('Feb', 15));
        data.add(new PieWedgeData('Mar', 10));
        data.add(new PieWedgeData('Apr', 20));
        data.add(new PieWedgeData('May', 20));
        data.add(new PieWedgeData('Jun', 5));
        return data;     

   }
// Wrapper class
  public class PieWedgeData 
  {
    public String name { get; set; }
    public Integer data { get; set; }

    public PieWedgeData(String name, Integer data) 
    {
        this.name = name;
        this.data = data;
    }
    }


// 'N' for name and 'v' for value

 public class Nv {
        public String n { get; private set; }        
        public Decimal v { get; private set; }
        Nv(String n, Decimal v) {
            this.n = n;
            this.v = v;       
        }
    }
    public Nv[] getNvs() {
        return new Nv[] {
            new Nv('Actual', 106.00),
            new Nv('Forecast', 150.56),
            new Nv('Plan', 135.00),
            new Nv('Prior Qtr', 97.00),
            new Nv('Prior Yr', 88.44)
        };
    } 
}

Want that refresh should be only within the tabs when clicked on particular tab and not the whole page ?

  • First thing to try is to remove reRender="". – Keith C Mar 19 '14 at 12:15
  • ... well it is present in the Visualforce you posted. – Keith C Mar 19 '14 at 12:17
  • Sorry, was a typo mistake.Removed rerender,even then it is refreshing the whole page. – JJoseph Mar 19 '14 at 12:19
  • Fair enough; wasn't saying it was the answer, just the first thing to eliminate. – Keith C Mar 19 '14 at 12:20
1

Change the switchType on your apex:tabPanel to "client".

PS This How can you make a visualforce graph display correctly within a TabPanel? looks like it covers the same sort of page and the recommendation is to stick with switchType of "server". Perhaps you can add to your question what is problematic about the refresh you are getting at the moment.

  • No joy yet .When changing switchtype to "client" ,charts on both the tabs doesn't show.There is nothing that tab shows.Blank tab. – JJoseph Mar 19 '14 at 12:40
  • Yeah I've just tried it now and while the SVG looks OK in the second tab it doesn't draw properly. (The switchType="server" has a slight time delay when you switch tables but at least draws properly.) – Keith C Mar 19 '14 at 12:45
  • so switchtype="server" can only be the solution ? No problems with the refresh part,only want that it should be partially loaded. – JJoseph Mar 19 '14 at 12:54
  • Looking in the "Network" tab of Chrome's "Developer Tools" using "server" looks like it results in the whole page being reloaded. I know that perhaps isn't ideal, but why is it a problem? – Keith C Mar 19 '14 at 13:05
  • Want to know for my knowledge improvement and better understanding, becasue using switchtype="server" whole page is loading which is taking time loading on to the server whereas what i want is only within the frame of that particular page it should get refreshed which is fast.Could you please help me out. – JJoseph Apr 29 '14 at 6:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.