If you are seeing this post directly just go through this article contains Apex class with details. Click Here
Aura Component :
<aura:component controller=”GetApexReadData” implements=”flexipage:availableForAllPageTypes” access=”global”>
<aura:attribute name=”dashboardData” type=”List” />
<ltng:require scripts=”{!$Resource.ChartJSScript}”
afterScriptsLoaded=”{!c.ScriptLoaded}”/>
<aura:handler name=”init” value=”{!this}” action=”{!c.doInit}”/>
<canvas aura:id=”chart” id=”chart” />
</aura:component>
JS Controller :
({
doInit: function(component, event, helper) {
helper.loadChartJS(component, helper);
}
})
JS Helper:
({
loadForecastingData:function(component, event, helper){
var action = component.get(“c.yourmethodname”);
action.setCallback(this, function(response) {
var state = response.getState();
if (state === “SUCCESS”) {
var dashboardData = response.getReturnValue();
component.set(“v.dashboardData”, dashboardData);
var ctx = component.find(“chart”).getElement().getContext(“2d”);
var labels = [];
var values = [];
for (var i = 0; i < dashboardData.length; i++) {
labels.push(dashboardData[i].label);
values.push(dashboardData[i].value);
}
new Chart(ctx, {
type: ‘bar’,
data: {
labels: labels,
datasets: [{
label: ‘Adjusted Funnel Value (by Hit Rate)’,
data: values,
backgroundColor: ‘#0070d2’
}]
},
options: {
responsive: true,
scales: {
x: {
beginAtZero: true
},
y: {
beginAtZero: true
}
}
}
});
}
else {
console.log(“Error retrieving dashboard data: ” + state);
}
});$A.enqueueAction(action);
},
/* use this logic for displaying chart with static data*/
createChart: function(component) {
var ctx = component.find(“chart”).getElement().getContext(“2d”);
var labels = [‘Category 1’, ‘Category 2’, ‘Category 3’];
var values = [125, 20, 15];
new Chart(ctx, {
type: ‘bar’,
data: {
labels: labels,
datasets: [{
label: ‘Adjusted Funnel Value (by Hit Rate)’,
data: values,
backgroundColor: ‘#0070d2’
}]
},
options: {
responsive: true,
scales: {
x: {
beginAtZero: true
},
y: {
beginAtZero: true
}
}
}
});
},
loadChartJS: function(component) {
var chartJS = document.createElement(‘script’);
chartJS.src = ‘https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js’;
chartJS.onload = $A.getCallback(function() {
this.loadForecastingData(component);
}.bind(this));
document.head.appendChild(chartJS);
},
afterRender: function(component, helper) {
this.loadChartJS(component);
}
})
Canvas will be helpful to display data in aura component. use the above Aura component, apex class will be helpful for display data in aura component.
So now we have to use the aura component in dashboard so we have limitation to not able to use directly into dashboards so we have to create visualforce page.
if we have to use visualforce page in dashboard using aura component. use lighting out. create application and visualforce page to use aura logic
Create Application :
<aura:application access=”GLOBAL” extends=”ltng:outApp”>
<c:auracomponentname/>
</aura:application>
<apex:page sidebar=”false” showHeader=”false”>
<apex:includeLightning />
<div id=”auraComponentContainer”></div>
<script>
$Lightning.use(“c:DisplayChart”, function() {
$Lightning.createComponent(
“c:AuraComponentname”,
{},
“auraComponentContainer”,
function(cmp) {
// Component creation callback
}
);
});
</script>
</apex:page>