Refresh page partially

Question

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 ?

Answer 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.