Apex Code Development You need to sign in to do that
Don't have an account?
Dolgoldy pi chart not displying in component
Hi all,
I want to display pi chart component on parent component to show opprtunity stages but below code is not working plz ihelp me its urgent
I want to display pi chart component on parent component to show opprtunity stages but below code is not working plz ihelp me its urgent
*********Apex class*********
public class LinechartController {
@AuraEnabled
public static String getOpportunityJSON(){
List<opportunity> lstopp = [SELECT Id, stagename FROM opportunity ];
Map<String,Integer> mapLeadSource = new Map<String,Integer>();
for(opportunity l : lstopp)
{
if(mapLeadSource.containsKey(l.stagename))
{
mapLeadSource.put(l.stagename, mapLeadSource.get(l.stagename)+1) ;
}else{
mapLeadSource.put(l.stagename, 0) ;
}
}
system.debug('map values--'+mapLeadSource);
list<RadarDataWrapper> radarData = new list<RadarDataWrapper>();
for(String key : mapLeadSource.keySet())
{
RadarDataWrapper rdw = new RadarDataWrapper();
rdw.name=key;
rdw.y=mapLeadSource.get(key);
radarData.add(rdw);
}
system.debug('rdw---'+radarData);
return System.json.serialize(radarData);
//return null;
}
/**
* Wrapper class to serialize as JSON as return Value
* */
class RadarDataWrapper
{
@AuraEnabled
public String name;
@AuraEnabled
public integer y;
}
}
<aura:component controller="LinechartController">
<ltng:require scripts="{!join(',',$Resource.Highcharts,
$Resource.highchart3d,
$Resource.Highchartsexport
)}" afterScriptsLoaded="{!c.afterScriptsLoaded}"/>
<aura:attribute name="chartType" type="string"/>
<aura:attribute name="chartTitle" type="string" default="Opportunity by StageName"/>
<aura:attribute name="chartSubTitle" type="string" default="Display Opportunity Count by StageName"/>
<aura:attribute name="xAxisCategories" type="string[]" default="['Qualification','Negotiation/Review','Closed Won','Id. Decision Makers','Proposal/Price Quote','Proposition','Prospecting','Perception Analysis','Needs Analysis']"/>
<aura:attribute name="yAxisParameter" type="string" default="No. of Opportunity"/>
<aura:attribute name="data" type="string"/>
<div class="slds-card">
<br/>
<center><b><h1 class="slds-page-header__title slds-truncate slds-align-middle">
Graphical Representaion of Opportunity Vs StageName</h1></b></center>
<br/>
<div class="slds-grid slds-wrap slds-grid--pull-padded">
<div class="slds-col--padded slds-size--1-of-2 slds-medium-size--2-of-6 slds-large-size--4-of-12 cusdiv">
<div aura:id="chart" style="height: 400px"></div>
</div>
<div class="slds-col--padded slds-size--1-of-2 slds-medium-size--2-of-6 slds-large-size--4-of-12 cusdiv">
<div aura:id="linechart" style="height: 400px"></div>
</div>
<div class="slds-col--padded slds-size--1-of-2 slds-medium-size--2-of-6 slds-large-size--4-of-12 cusdiv">
<div aura:id="donutchart" style="height: 400px"></div>
</div>
</div>
</div>
</aura:component>
****************Js Controller************
({
afterScriptsLoaded : function(component, event, helper)
{
helper.doInit(component,event,helper);
}
})
**********Helper******************
({
doInit : function(component, event, helper)
{
var action = component.get("c.getOpportunityJSON");
action.setCallback(this, function(response) {
var state = response.getState();
//alert(state);
if (state === "SUCCESS") {
var dataObj= response.getReturnValue();
//jsonData = dataObj;
console.log('===='+dataObj);
component.set("v.data",dataObj);
helper.piechart(component,event,helper);
helper.Linechart(component,event,helper);
helper.donutchart(component,event,helper);
}
});
$A.enqueueAction(action);
},
piechart : function(component,event,helper) {
var jsonData = component.get("v.data");
var dataObj = JSON.parse(jsonData);
new Highcharts.Chart({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
renderTo: component.find("chart").getElement(),
type: 'pie'
},
title: {
text: component.get("v.chartTitle")+' (Pie Chart)'
},
subtitle: {
text: component.get("v.chartSubTitle")
},
xAxis: {
categories: component.get("v.xAxisCategories"),
crosshair: true
},
yAxis: {
min: 0,
title:
{
text: component.get("v.yAxisParameter")
}
},
tooltip: {
pointFormat: '{series.name}: <b>{point.y}</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.y} ',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name:'StageName',
data:dataObj
}]
});
},
Linechart : function(component,event,helper) {
var jsonData = component.get("v.data");
var dataObj = JSON.parse(jsonData);
new Highcharts.Chart({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
renderTo: component.find("linechart").getElement(),
type: 'line'
},
title: {
text: component.get("v.chartTitle")+' (Line Chart)'
},
subtitle: {
text: component.get("v.chartSubTitle")
},
xAxis: {
categories: component.get("v.xAxisCategories"),
crosshair: true
},
yAxis: {
min: 0,
title:
{
text: component.get("v.yAxisParameter")
}
},
tooltip: {
pointFormat: '{series.name}: <b>{point.y}</b>'
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
series: [{
name:'StageName',
data:dataObj
}]
});
},
donutchart : function(component,event,helper) {
var jsonData = component.get("v.data");
var dataObj = JSON.parse(jsonData);
new Highcharts.Chart({
chart: {
renderTo: component.find("donutchart").getElement(),
type: 'pie',
options3d: {
enabled: true,
alpha: 45
}
},
title: {
text: component.get("v.chartTitle")+' (Donut Chart)'
},
subtitle: {
text: component.get("v.chartSubTitle")
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
innerSize: 100,
depth: 45
}
},
series: [{
type: 'pie',
name:'StageName',
data:dataObj
}]
});
}
})
Can you please include below in aura component and check
Hope this is helpful!!
Regards,
Ranjan