function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Satish PrajapatSatish Prajapat 

2 apex chart not rendering on visualforce page,

Hello Expert,
I am trying to display 2 graphs (bar and Pie) on radio button selection, but on change of radio button value the graph is not rendered or say not display.
// VF Page

<apex:page sidebar="false" showHeader="false"  controller="QuizSummaryGraphClass" >
    
    <apex:form id="formId">
        
        <apex:outputPanel>
            <apex:selectRadio value="{!graphType}">
                <apex:selectOptions value="{!items}" />
                <apex:actionSupport event="onchange" action="{!m2}" reRender="formId"  />
            </apex:selectRadio>
        </apex:outputPanel>
        
        <apex:outputPanel id="graph" >
            <c:barComponent  barVisibility ="{!block1}" />
            <c:pieComponent  pieVisibility ="{!block2}"/>    
        </apex:outputPanel>
        
    </apex:form>
</apex:page>

**************************************************
//Bar component

<apex:component controller="QuizSummaryGraphClass" >
    <apex:attribute name="barVisibility" description="This value used for bar visibility." type="Boolean" required="true">
    </apex:attribute >
    <apex:outputPanel id="bar" >
       
            <apex:pageBlock title="Bar Graphs"   rendered="{!barVisibility}"> 
                <apex:chart height="400" width="250" data="{!queryData}" >      
                    <apex:axis type="Numeric" position="left" minimum="0" maximum="{!total}" steps="1" fields="response" title="Total Number Of Questions" />
                    <apex:axis type="Category" position="bottom" fields="name" title="Candidate Response" >
                        <apex:chartLabel rotate="315"/>
                    </apex:axis>
                    <apex:barSeries orientation="vertical" axis="left" xField="name" yField="response"/>
                </apex:chart>
            </apex:pageBlock>
        </apex:outputPanel>
    
</apex:component>

********************************************
//Pie Component

<apex:component controller="QuizSummaryGraphClass"  >
    <apex:attribute name="pieVisibility" description="This value used for pie visibility."  type="Boolean" required="true">
    </apex:attribute>
     <apex:outputPanel id="Pie">
      
            <apex:pageBlock title="Pie Graphs" rendered="{!pieVisibility}"  > 
                <apex:chart height="410" width="350" data="{!queryData}" >      
                    <apex:pieSeries labelField="name" dataField="response"/>
                </apex:chart>
            </apex:pageBlock>
        </apex:outputPanel>
    
</apex:component>

************************************************
// Apex Class QuizSummaryGraphClass

public class QuizSummaryGraphClass 
{
    public String candidateName {get; set;}
    public List<Summary__c> summaryList {get; set;}
    public String summaryId {get; set;}
    public Integer total {get; set;}
    public String graphType {get; set;}
    public Boolean block1 {get;set;}
    public Boolean block2 {get;set;}
    public void QuizSummaryGraphClass ()
    {
        summaryList = new List<Summary__c>();
        summaryId = null;
        total = 0;
        graphType = 'bar';
        block1 = false;
        block2 = false;
    }
    public List<data> getqueryData()
    {
        summaryId = apexpages.currentpage().getparameters().get('summaryId');
        summaryList = [Select name,Corrected_Answer__c,Incorrect_Answer__c,	Total_Number_of_questions__c from  summary__c where id=:summaryId limit 1]; 
        List<Data> graphData = new List<Data>();
        graphData.clear();
        for(Summary__c sl : summaryList)
        {
            graphData.add(new Data('Correct Answer',sl.Corrected_Answer__c));
        	graphData.add(new Data('Incorrect Answer',sl.Incorrect_Answer__c));
            total = (Integer)sl.Total_Number_of_questions__c;
        }
        return graphData;
    }
    public List<SelectOption> getItems() 
    {
        List<SelectOption> options = new List<SelectOption>(); 
        options.add(new SelectOption('bar','bar')); 
        options.add(new SelectOption('pie','pie')); 
        return options;
    }
    public void m2()
    {
        if(graphType == 'bar')
        {
            block1 = true;
            block2 = false;
        }
        if(graphType == 'pie')
        {
            block1 = false;
            block2 = true;
        }
    }
    public with sharing class Data
    {
        public Decimal response {get; set;}
        public String name {get; set;}
        public Data(String name, Decimal response)
        {
            this.name = name;
            this.response = response;
        }
    }
}

 
Best Answer chosen by Satish Prajapat
Satish PrajapatSatish Prajapat
I was waiting for help that someone will help me, but I solved the problem.
  • Instead of rendered there is one more attribute "hidden" which will show or hide the chart.
  • And rendered the full form instead of block then the problem will solve.