Create summary report using standard Report tab. For this example, I have created a simple report which groups ContactUS__c by City__c.
public class ChartOnContactUS {
@AuraEnabled
public static List<Report> getDynamicReport(){
return [SELECT Id,Name FROM Report];
}
@AuraEnabled
public static String getreport(String reportId){
Report reportRec = [SELECT Id FROM Report WHERE Id =:reportId];
Reports.ReportResults reportResult = Reports.ReportManager.runReport(reportRec.Id, true);
system.debug(JSON.serialize(reportResult));
return JSON.serialize(reportResult);
}
}
@AuraEnabled
public static List<Report> getDynamicReport(){
return [SELECT Id,Name FROM Report];
}
@AuraEnabled
public static String getreport(String reportId){
Report reportRec = [SELECT Id FROM Report WHERE Id =:reportId];
Reports.ReportResults reportResult = Reports.ReportManager.runReport(reportRec.Id, true);
system.debug(JSON.serialize(reportResult));
return JSON.serialize(reportResult);
}
}
ChartComponent.cmp
<aura:component controller="ChartOnContactUS" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<ltng:require scripts="{!$Resource.ChartJs}" afterScriptsLoaded="{!c.afterScriptsLoaded}"/>
<aura:attribute name="ready" type="Boolean" default="false"/>
<aura:attribute name="countryName" type="String" default="00O0Y000007eZRnUAM"/>
<aura:attribute name="report" type="sobject"/>
<div class="slds-grid slds-p-top_small">
<div class="slds-size_4-of-12 slds-p-left_xx-small slds-p-horizontal_x-large ">
<lightning:select label="Report Name" value="{!v.countryName}" onchange="{!c.cmdCountryEvt}">>
<aura:iteration items="{!v.report}" var="reportValue">
<option value="{!reportValue.Id}">{!reportValue.Name}</option>
</aura:iteration>
</lightning:select>
</div>
</div>
<div class="slds-grid slds-wrap slds-grid--pull-padded ">
<div class="slds-p-horizontal--small slds-size--1-of-3 slds-m-top--medium">
<canvas aura:id="chart" height="200" width="200"></canvas>
</div>
</div>
</aura:component>
<ltng:require scripts="{!$Resource.ChartJs}" afterScriptsLoaded="{!c.afterScriptsLoaded}"/>
<aura:attribute name="ready" type="Boolean" default="false"/>
<aura:attribute name="countryName" type="String" default="00O0Y000007eZRnUAM"/>
<aura:attribute name="report" type="sobject"/>
<div class="slds-grid slds-p-top_small">
<div class="slds-size_4-of-12 slds-p-left_xx-small slds-p-horizontal_x-large ">
<lightning:select label="Report Name" value="{!v.countryName}" onchange="{!c.cmdCountryEvt}">>
<aura:iteration items="{!v.report}" var="reportValue">
<option value="{!reportValue.Id}">{!reportValue.Name}</option>
</aura:iteration>
</lightning:select>
</div>
</div>
<div class="slds-grid slds-wrap slds-grid--pull-padded ">
<div class="slds-p-horizontal--small slds-size--1-of-3 slds-m-top--medium">
<canvas aura:id="chart" height="200" width="200"></canvas>
</div>
</div>
</aura:component>
ChartComponentController.js
({
afterScriptsLoaded : function(component, event, helper) {
component.set("v.ready", true);
helper.createChart(component);
helper.cmdDynamicRepor(component);
},
cmdCountryEvt : function(component,event,helper){
console.log(component.get("v.countryName"));
helper.createChart(component);
}
})
afterScriptsLoaded : function(component, event, helper) {
component.set("v.ready", true);
helper.createChart(component);
helper.cmdDynamicRepor(component);
},
cmdCountryEvt : function(component,event,helper){
console.log(component.get("v.countryName"));
helper.createChart(component);
}
})
ChartComponentHelper.js
({
createChart : function (component) {
var chartCanvas = component.find("chart").getElement();
var action = component.get("c.getreport");
action.setParams({reportId : component.get("v.countryName")});
action.setCallback(this, function(response) {
console.log("faz response"+JSON.stringify(response.getReturnValue()));
var state = response.getState();
if (state === "SUCCESS") {
var reportResultData = JSON.parse(response.getReturnValue());
var chartData = [];
var chartLabels = [];
if( reportResultData.groupingsDown.groupings.length > 0 ) {
for(var i=0; i < (reportResultData.groupingsDown.groupings.length); i++){
chartLabels.push(reportResultData.groupingsDown.groupings[i].label);
var keyTemp = reportResultData.groupingsDown.groupings[i].key;
var valueTemp = reportResultData.factMap[keyTemp + '!T'].aggregates[0].value ;
chartData.push(valueTemp);
}
console.log(" chartLabels :: " + JSON.stringify(chartLabels));
console.log( " chartData :: " + JSON.stringify(chartData));
var chartdata = {
labels: chartLabels,
datasets: [
{
label:'Country',
data: chartData,
borderColor:'rgba(62, 159, 222, 1)',
fill: false,
pointBackgroundColor: "#FFFFFF",
pointBorderWidth: 4,
pointHoverRadius: 5,
pointRadius: 3,
bezierCurve: true,
pointHitRadius: 10
}
]
}
var ctx = component.find("chart").getElement();
var chart = new Chart(ctx ,{
type: 'line',
data: chartdata,
options: {
legend: {
position: 'bottom',
padding: 10,
},
responsive: true
}
});
}
} else if (state === "ERROR") {
var errors = response.getError();
if (errors) {
if (errors[0] && errors[0].message) {
console.log("Error message on createReport: " +errors[0].message);
}
} else {
console.log("Unknown error");
}
}
});
$A.enqueueAction(action);
},
cmdDynamicRepor : function(component,event,helper){
var dynamicPicklist = component.get("c.getDynamicReport");
dynamicPicklist.setCallback(this,function(response){
console.log("getDynamicReport====>>"+JSON.stringify(response.getReturnValue()));
if(response.getState() === "SUCCESS"){
component.set("v.report",response.getReturnValue());
}
});
$A.enqueueAction(dynamicPicklist);
}
})
createChart : function (component) {
var chartCanvas = component.find("chart").getElement();
var action = component.get("c.getreport");
action.setParams({reportId : component.get("v.countryName")});
action.setCallback(this, function(response) {
console.log("faz response"+JSON.stringify(response.getReturnValue()));
var state = response.getState();
if (state === "SUCCESS") {
var reportResultData = JSON.parse(response.getReturnValue());
var chartData = [];
var chartLabels = [];
if( reportResultData.groupingsDown.groupings.length > 0 ) {
for(var i=0; i < (reportResultData.groupingsDown.groupings.length); i++){
chartLabels.push(reportResultData.groupingsDown.groupings[i].label);
var keyTemp = reportResultData.groupingsDown.groupings[i].key;
var valueTemp = reportResultData.factMap[keyTemp + '!T'].aggregates[0].value ;
chartData.push(valueTemp);
}
console.log(" chartLabels :: " + JSON.stringify(chartLabels));
console.log( " chartData :: " + JSON.stringify(chartData));
var chartdata = {
labels: chartLabels,
datasets: [
{
label:'Country',
data: chartData,
borderColor:'rgba(62, 159, 222, 1)',
fill: false,
pointBackgroundColor: "#FFFFFF",
pointBorderWidth: 4,
pointHoverRadius: 5,
pointRadius: 3,
bezierCurve: true,
pointHitRadius: 10
}
]
}
var ctx = component.find("chart").getElement();
var chart = new Chart(ctx ,{
type: 'line',
data: chartdata,
options: {
legend: {
position: 'bottom',
padding: 10,
},
responsive: true
}
});
}
} else if (state === "ERROR") {
var errors = response.getError();
if (errors) {
if (errors[0] && errors[0].message) {
console.log("Error message on createReport: " +errors[0].message);
}
} else {
console.log("Unknown error");
}
}
});
$A.enqueueAction(action);
},
cmdDynamicRepor : function(component,event,helper){
var dynamicPicklist = component.get("c.getDynamicReport");
dynamicPicklist.setCallback(this,function(response){
console.log("getDynamicReport====>>"+JSON.stringify(response.getReturnValue()));
if(response.getState() === "SUCCESS"){
component.set("v.report",response.getReturnValue());
}
});
$A.enqueueAction(dynamicPicklist);
}
})
D3ComponentApp
<aura:application extends="force:slds">
<c:ChartComponent ></c:ChartComponent>
</aura:application>
Screenshot
