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; } } }