Apex Code Development You need to sign in to do that
Don't have an account?
Kanth k how to create bar chart in aura:iteration in lightning component?
Hi,
I am getting chart as shown below but i need chart below for every question based on values in question. Can any body help me where i made mistake in my code using lightning component.Please Reply me as soon as possible.
I am getting chart as shown below but i need chart below for every question based on values in question. Can any body help me where i made mistake in my code using lightning component.Please Reply me as soon as possible.
Lightning Component:
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" controller="Surveyresultsctrl">
<aura:attribute name="srvqusrespwraplst" type="object"/>
<!--###### MODAL BOX BODY Part Start######-->
<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
<div class="slds-col--padded slds-size--1-of-2 slds-medium-size--2-of-6 slds-large-size--4-of-12">
<canvas aura:id="barChart" style="height: 400px"/>
</div>
<aura:iteration items="{!v.srvqusrespwraplst}" var="ques" indexVar="index">
<table border="0">
<tr style="display: inline-block;">
<td>
<span style="padding-left:6px;padding-right:6px;padding-top:2px;padding-bottom:2px;background-color:white;color:black;border-radius:50%;">
{!index+1}
</span>
</td>
<td>
<span style="color:black;">
{!ques.sqname}</span>
</td>
</tr>
<tr style="display: inline-block;">
<td colspan="2"><br/>
<table width="100%" border="0">
<tr style="display: inline-block;">
{!ques.sqrespcnt}
<aura:iteration items="{!ques.srchoicewrplst}" var="typvar">
<td width="100%" style="padding-left:5px;padding-right:10px;text-color:black;color:black">
<aura:if isTrue="{!typvar.servqname == ques.sqname}">
<aura:if isTrue="{!typvar.sqrespcnt1 != null}">
{!typvar.serresp1} : {!typvar.sqrespcnt1}
</aura:if>
</aura:if>
</td>
</aura:iteration>
</tr>
</table>
</td>
</tr>
</table>
</aura:iteration>
</div>
</div>
</aura:component>
Lightning Compnent Helper:
doInit : function(component, event, helper)
{
var temp = [];
component.set("v.isOpen", true);
var action = component.get("c.getsrwrapmap");
action.setParams({
surveyid: component.get("v.recordId"),
});
action.setCallback(this, function(response) {
//var state = response.getState();
//alert(state);
if(response.getState() === 'SUCCESS' && response.getReturnValue()){
temp = response.getReturnValue();
this.createGraph(component, temp);
//var dataObj= response.getReturnValue();
//jsonData = dataObj;
//console.log('===='+dataObj);
//this.createGraph(component, temp);
//component.set("v.srvqusrespwraplst",dataObj);
// helper.piechart(component,event,helper);
//helper.Linechart(component,event,helper);
// helper.donutchart(component,event,helper);
}
});
$A.enqueueAction(action);
},
createGraph : function(component, temp) {
var dataMap = {"chartLabels": Object.keys(temp),"chartData": Object.values(temp)};
var el = component.find('barChart').getElement();
var ctx = el.getContext('2d');
new Chart(ctx, {
type: 'line',
options: {
animation: false,
legend: {display: true},
maintainAspectRatio: false,
responsive: true,
responsiveAnimationDuration: 0,
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
callback: function(value, index, values) {
if(parseInt(value) >= 0){
return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
} else {
return value;
}
}
}
}]
}
},
data: {
labels: dataMap.chartLabels,
datasets: [
{
label: "Survey Results",
backgroundColor: "rgba(255, 191, 0,0.5)",
data: dataMap.chartData
}
]
}
});
},
_______________________________
Apex Class:
public class Surveyresultsctrl {
@AuraEnabled
public static list<srwrap> getsrwraplst(string surveyid)
{
list<srwrap> srwlst = new list<srwrap>();
list<srchoiceswrap> tempprdqueswlst = new list<srchoiceswrap>();
map<string,integer> timap = new map<string,integer>();
set<string> sqidst = new set<string>();
map<string,map<string,list<SurveyQuestionResponse__c>>> optmap = new map<string,map<string,list<SurveyQuestionResponse__c>>>();
map<string,map<string,integer>> optmap1 = new map<string,map<string,integer>>();
List<AggregateResult> sqraggr= [select count(Id) a,Question_Type__c,Survey_Question__r.Name sq,Survey_Question__c from SurveyQuestionResponse__c where Survey_Question__r.Survey__c=:surveyid group by Question_Type__c, Survey_Question__r.Name,Survey_Question__c];
for(AggregateResult ar: sqraggr)
{
string sqid= string.valueof(ar.get('Survey_Question__c'));
sqidst.add(sqid);
}
List<AggregateResult> sqraggr1= [select count(Id) a,Question_Type__c,Survey_Question__r.Name sq,CALENDAR_MONTH(Date__c)month from SurveyQuestionResponse__c where Survey_Question__r.Survey__c=:surveyid and Date__c=THIS_MONTH GROUP BY CALENDAR_MONTH(Date__c),Question_Type__c,Survey_Question__r.Name];
for(AggregateResult ar: sqraggr1)
{
srwrap sr = new srwrap();
srchoiceswrap src =new srchoiceswrap();
string qtype='';
qtype= string.valueof(ar.get('Question_Type__c'));
if(qtype == 'Date')
{
sr.sqname = string.valueof(ar.get('sq'));
src.sqrespdtcnt = integer.valueof(ar.get('a'));
tempprdqueswlst.add(src);
sr.srchoicewrplst = tempprdqueswlst;
sr.sqrespcnt =integer.valueof(ar.get('a'));
//system.debug('Dt&&'+sr.sqrespcnt);
srwlst.add(sr);
}
}
map<string,list<SurveyQuestionResponse__c>> sqrmap = new map<string,list<SurveyQuestionResponse__c>>();
list<SurveyQuestionResponse__c> sqrlst = new list<SurveyQuestionResponse__c>();
for(SurveyQuestionResponse__c sqr : [select Id,Question_Type__c,Survey_Question__r.Type__c,Survey_Question__r.Required__c,Survey_Question__r.Name,Survey_Question__c,Survey_Question__r.Choices__c,Response__c from SurveyQuestionResponse__c where Survey_Question__c in:sqidst])
{
if(sqr.Question_Type__c!='Date')
{
sqrlst.add(sqr);
sqrmap.put(sqr.Survey_Question__r.Name,sqrlst);
}
}
for(string sqid : sqrmap.keyset())
{
Map<String,Integer> elCount = new Map<String,Integer>();
if(sqrmap.containskey(sqid))
{
list<SurveyQuestionResponse__c> sqrlsts = sqrmap.get(sqid);
for(SurveyQuestionResponse__c sqr : sqrlsts)
{
//if(sqid == sqr.Survey_Question__c)
if(sqid == sqr.Survey_Question__r.Name)
{
if(sqr.Question_Type__c=='Multi Select - Checkbox')
{
for(string key : sqr.Response__c.split(';'))
{
if(!elCount.containsKey(key)){
elCount.put(key,0);
}
Integer currentInt=elCount.get(key)+1;
elCount.put(key,currentInt);
}
}
if(sqr.Question_Type__c=='Radio')
{
for(string key : sqr.Response__c.split(';'))
{
if(!elCount.containsKey(key)){
elCount.put(key,0);
}
Integer currentInt=elCount.get(key)+1;
elCount.put(key,currentInt);
}
}
}
}
optmap1.put(sqid,elCount);
}
}
//list<srchoiceswrap> tempprdqueswlst = new list<srchoiceswrap>();
//map<string,integer> timap = new map<string,integer>();
//list<srwrap> srwlst = new list<srwrap>();
for(string sqid : optmap1.keyset())
{
srwrap srw = new srwrap();
srw.sqname = sqid;
//if(optmap1.get(sqid)!=null)
{
timap = optmap1.get(sqid);
for(string coicename : timap.keyset())
{
srchoiceswrap src =new srchoiceswrap();
src.servqname = sqid;
//srw.sqname = sqid;
string choicename = coicename ;
//srw.serresp=choicename;
src.serresp1 = coicename ;
system.debug('&&&'+srw.serresp);
//srw.sqrespcnt=timap.get(coicename);
src.sqrespcnt1 = timap.get(coicename);
//srwlst.add(srw);
tempprdqueswlst.add(src);
}
}
srw.srchoicewrplst = tempprdqueswlst;
srwlst.add(srw);
}
return srwlst;
}
@AuraEnabled
public static map<string,integer> getsrwrapmap(string surveyid)
{
map<string,integer> srmap = new map<string,integer>();
list<srwrap> srwraplst = getsrwraplst(surveyid);
list<srchoiceswrap> srclst;
for(srwrap sr : srwraplst)
{
srclst = sr.srchoicewrplst;
for(srchoiceswrap src : srclst)
{
if(sr.sqname == src.servqname)
{
srmap.put(src.serresp1,src.sqrespcnt1);
}
}
}
return srmap;
}
public class srwrap
{
@AuraEnabled public string serques{get;set;}
@AuraEnabled public string serresp{get;set;}
@AuraEnabled public integer sqrespcnt{get;set;}
@AuraEnabled public string sqname{get;set;}
@AuraEnabled public Survey_Question__c sq{get;set;}
@AuraEnabled public list<string> choiceslst{get;set;}
@AuraEnabled public list<string> optionslst{get;set;}
@AuraEnabled public list<string> seleoptionslst{get;set;}
@AuraEnabled public list<srchoiceswrap> srchoicewrplst{get;set;}
public srwrap()
{
sqname = '';
serques = '';
serresp = '';
sqrespcnt =null;
optionslst = new list<string>();
choiceslst = new list<string>();
sq = new Survey_Question__c();
srchoicewrplst = new list<srchoiceswrap>();
}
}
public class srchoiceswrap
{
@AuraEnabled public string typestr{get;set;}
@AuraEnabled public list<SurveyQuestionResponse__c> optionlst{get;set;}
@AuraEnabled public string serresp1{get;set;}
@AuraEnabled public string servqname{get;set;}
@AuraEnabled public integer sqrespcnt1{get;set;}
@AuraEnabled public integer sqrespdtcnt{get;set;}
public srchoiceswrap()
{
optionlst = new list<SurveyQuestionResponse__c>();
typestr = '';
serresp1 = '';
servqname ='';
sqrespdtcnt = null;
sqrespcnt1 =null;
}
}
}