SCENARIO
While working on one of the requirements for an Automobile sector project for a client based out of Dallas, Texas, There was a requirement to display dynamic data responsively into a Scatter chart using the VF page.
CHALLENGE
The “Standard Report Chart” component can be used to display the chart on the page but we have several custom logic and filter to be implemented in a VF page then the “Standard Report Chart” has filter Restrictions. To prevent that problem, we have used ChartJs.
APPROACH
We have used the VF page and apex controller to display dynamic data for the Account standard object. We have taken the Number of Quantities as the X axis and the Amount as the Y axis for plotting the data dynamically in this scatter chart using chartJs.
Below is an example of a scatter chart.
Example:-
In the example, we have drawn a scatter chart to display the Account amount field and No of quantity field data.
Step 1:- Create an Apex controller with the name 'ChartVfController'.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
public class ChartVfController { | |
public string accString {get;set;} | |
public ChartVfController(){ | |
//fetch the data from account | |
List<Account> accList = [select id,Name,No_Of_Quantity__c,Amount__c from Account where No_Of_Quantity__c != Null and Amount__c !=Null]; | |
//convert data into json string. | |
accString = json.serialize(accList); | |
} | |
} |
Retrieving Account data and setting on the VF page.
Step 2:- Create a VF page with the name 'ChartVf'.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<apex:page showHeader="true" sidebar="false" id="page" docType="html-5.0" controller="ChartVfController"> | |
<html> | |
<head> | |
<meta charset="utf-8"/> | |
<title>Chart.js demo</title> | |
<!--import charJs script.--> | |
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
<style> | |
#myChart { | |
margin: 10px; | |
padding: 20px; | |
width: 300px; | |
height: 70px; | |
} | |
</style> | |
</head> | |
<body> | |
<!--use canvas to draw the chart.--> | |
<canvas id="myChart" ></canvas> | |
<script> | |
//get the account string | |
var accData = '{!accString}'; | |
var accFinalData = JSON.parse(accData); | |
var accChartData = []; | |
//Binding data into appropiate data set. | |
for (var i = 0; i < accFinalData.length; i++) { | |
accChartData.push({ x: accFinalData[i].No_Of_Quantity__c, y: accFinalData[i].Amount__c }); | |
} | |
//configuration for chart | |
var canvasP = document.getElementById("myChart"); | |
var ctx= document.getElementById("myChart").getContext("2d"); | |
var newChart = new Chart(ctx, { | |
type: 'scatter', | |
data: { | |
datasets: [{ | |
label: 'Scatter Dataset', | |
backgroundColor: 'green', | |
data: accChartData | |
}] | |
}, | |
options: { | |
scales: { | |
x: { | |
type: 'linear', | |
position: 'bottom', | |
grace: '5%' | |
} | |
} | |
} | |
}); | |
</script> | |
</body> | |
</html> | |
</apex:page> |
VF page consists of a canvas tag, and the ChartJs library uses that canvas to draw the chart.
The most important thing is chart configuration, all the chart behavior is based on the config that we set to the chart. Below are main three attributes.
- type:- It defines the type of chart being rendered, here we have 'scatter'.
- data:- Here we pass the chartLabels and chartData and other settings for the scatter chart.
- options:- Additional settings for chart.
If you have any questions you can reach out our Salesforce Consulting team
here.
No comments:
Post a Comment