I am able to show a bar chart using static data in vfp - apex. However there are mainly two problems - 1. getting dynamic data of no. of contacts in each account and 2. making each bar clickable and redirect to account

Tried making dynamic using following link- https://hub.appirio.com/tech-blog/building-dynamic-stacking-bar-charts-in-visualforce

Barchart help from - https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_charting_appearance_bar_charts.htm

Similar question on comminity related to click:- showing each account with number of contact,if i click on contact count it has to direct to account detail page


<apex:page controller="ChartController">
<apex:chart height="400" width="700" data="{!data}">
  <apex:axis type="Numeric" position="left" fields="data1" 
    title="Opportunities Closed" grid="true"/>
  <apex:axis type="Category" position="bottom" fields="name" 
    title="Month of the Year">
<apex:barSeries axis="left"  xField="name" yField="data1" 
orientation="vertical" />

Controller code

 public class ChartController {

 // Return a list of data points for a chart
 public List<Data> getData() {
 return ChartController.getChartData();

 // Make the chart data available via JavaScript remoting
 public static List<Data> getRemoteData() {

 return ChartController.getChartData();
 //List<Account> accList=[select id,Name from account];
//return accList;

 // The actual chart data; needs to be static to be
 // called by a @RemoteAction method
 public static List<Data> getChartData() {
 List<Account> accList=[select id,Name from account];
 List<Data> data = new List<Data>();
 data.add(new Data('Jan', 30 ));
 data.add(new Data('Feb', 44 ));
 data.add(new Data('Mar', 25));

 return data;

// Wrapper class
public class Data {
public String name { get; set; }
public Integer data1 { get; set; }

public Data(String name, Integer data1) {
    this.name = name;
    this.data1 = data1;


As far as I'm aware, there's no documented way to handle Visualforce chart clicks; the various elements have handlers already that deal with highlighting, toggling values, etc. Instead, you'll want to research an alternative charting technology, such as d3js.

| improve this answer | |
  • Thanks for your answer. "getting dynamic data of no. of contacts in each account"? Can you help me in dataset SOQL to be provide as input to dataset in chart.js/ d3.js or any hint would be great. – Mayank Parnami Apr 21 '19 at 15:07
  • @MayankParnami SELECT AccountId Id, COUNT(Id) numContacts FROM Contact WHERE AccountId IN (...) GROUP BY AccountId would give you the number of contacts per account. – sfdcfox Apr 21 '19 at 15:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.