You need to sign in to do that
Don't have an account?
Satish 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.
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 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.