Thursday 20 October 2022

ChartJs - Scatter Chart Points/Dots On click Functionality


While working on one of the requirements for an Automobile sector projector for a client based out of Dallas, Texas. There was a requirement to open the record page dynamically in a new tab when clicking on scatter chart points/dots in the VF page using Chartjs.


Although we can use standard apex:chart tags for representing charts, we had to use ChartJs for this requirement. So we used ChartJs functionality for building custom logic to open multiple record pages in a new tab when clicked on data points.


We have used the apex controller for fetching data dynamically and displaying it using VF Page. Here, the Amount & Month field of the Account Standard object is used, where the Month field will represent the data of X-Axis & Amount field will represent the data of Y-Axis respectively. Below is an example.


In this example, we have created an apex controller named 'ChartDataExample'
where we fetch data for plotting the chart and displaying it on VF Page 'ScatterChart'.

Step1:Create an Apex Controller.
Step2:Create a VF Page.



By following the above-mentioned code, we can open the record page dynamically in a new tab when clicking on points/dots in the scatter chart on VF Page.

If you have any questions you can reach out our Salesforce Consulting team here.