ChartJs - Scatter Chart Points/Dots On click Functionality

SCENARIO

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.

CHALLENGE

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.

APPROACH

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.

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.

OUTPUT

CONCLUSION

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.

Dynamic Scatter chart in Vf page using ChartJs

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'.

Retrieving Account data and setting on the VF page.

Step 2:- Create a VF page with the name 'ChartVf'.

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.  

Output:-

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