On clicking on bar chart display list of related records on Visualforce page

Question

I have a visualforce page with a bar chart that displays a user count on x-axis and profile name on y-axis. When a user clicks on the bar chart, I need to populate the user data in a table that have that particular profile. Any help is appreaciated

Answer 1

Unfortunately, there is no Click event available on the Visualforce Chart. But you can use the rendererFn attribute of apex:chartTips to extend the onhover function to fire custom JavaScript events.

In the below example, I have used an apex:actionFunction to populate the user details whenever the user hovers on the Bar Chart.

Controller

public class BarChartController {
    List<User> users;
    String profileName{get;set;}

    public List<User> getUsersDetail() {
        users = [SELECT u.firstName, u.lastName, u.email FROM User u Where u.profile.name = :profileName];
        return users;
    }
    public void updateUserDetails(){
        profileName = apexpages.currentPage().getParameters().get('profileName');
    }
    public List<BarChartData> getUsers(){
        List<BarChartData> lstUsers = new List<BarChartData>();
        for(aggregateresult a :[SELECT u.profile.name name, COUNT(u.id) n FROM User u WHERE u.profile.name !=null Group By u.profile.name LIMIT 10]){
            lstUsers.add(new BarChartData(a));
        }        
        return lstUsers;
    }
    public class BarChartData{
        public  integer recordCount{get;set;}
        public string profileName{get;set;}
        BarChartData(AggregateResult result){
            this.recordCount = (Integer) result.get('n');
            this.profileName = (String) result.get('name');
        }       
    }
}

Page

<apex:page controller="BarChartController">
    <apex:form>
        <apex:pageBlock>
            <apex:pageBlockSection>
                <apex:chart height="400" width="400" data="{!users}">                    
                    <apex:axis type="Category" position="left" fields="profileName" title="Profile Name"/>
                    <apex:axis type="Numeric" position="bottom" fields="recordCount" title="User Count" minimum="0" maximum="20" />
                    <apex:barSeries orientation="horizontal" axis="left" xField="recordCount" yField="profileName">
                        <apex:chartTips height="20" width="230" rendererFn="renderChartTip"/>
                    </apex:barSeries>     
                </apex:chart>
            </apex:pageBlockSection>
            <apex:pageBlockSection id="usrdetail">
                <apex:pageblockTable value="{!usersDetail}" var="usr">
                    <apex:column value="{!usr.firstName}"/>
                    <apex:column value="{!usr.lastName}"/>            
                </apex:pageblockTable>  
            </apex:pageBlockSection>
            <apex:actionFunction action="{!updateUserDetails}" name="getuserdetail" reRender="usrdetail">
                <apex:param name="profileName" assignTo="{!profileName}" value="" />
            </apex:actionFunction>
        </apex:pageBlock>
    </apex:form>
    <script>
    function renderChartTip(obj, item) {
        var yField = item.yField;
        var m = item.storeItem;
        this.setTitle('Check below table for more details');
        getuserdetail(m.get('profileName'));
    }
    </script>    
</apex:page>

Screenshot