function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Carlos OquendoCarlos Oquendo 

Event with Chart.Js

Hello colleagues, I have a small challenge and some difficulties to achieve it. I have a chart with the Chart.JS library and data from an sObject, so it's easy. But I need to click on a bar to load a component with a list of data filtered by the data in the bar.

If anyone has any idea how to do this event I really appreciate the help.
Carlos OquendoCarlos Oquendo
Component
<aura:component controller="Chart_ServiciosXEstado" implements="force:appHostable,flexipage:availableForAllPageTypes,forceCommunity:availableForAllPageTypes" access="global">
    <ltng:require scripts="/resource/ChartJs" afterScriptsLoaded="{!c.generateChart}"/>
    <div class="slds-col slds-no-flex slds-grid slds-align-top">
        <div class="slds-card__header slds-grid grid--flex-spread">
            <div aura:id="aura-cmp" class="slds-truncate">
                Cantidad de servicios por estado
                <hr></hr>
                <canvas aura:id="chart" width="400" height="400"/>
            </div>
        </div>
    </div>
</aura:component>
Helper
({
    setBarChart : function(component) {
        var action = component.get("c.getServicioXEstadoJSON");
        action.setCallback(this, function(a){
            var jsonRetVal = JSON.parse(a.getReturnValue()); 
            console.log(jsonRetVal.chart_Servicio_Labels);
            
            var barChartData = {
			labels: jsonRetVal.chart_Servicio_Labels,
			datasets: [
                { 
                    fillColor: "rgba(151,187,205,0.5)",
                    strokeColor: "rgba(151,187,205,0.8)",
                    pointColor: "rgba(220,220,220,1)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(220,220,220,1)",
                    data: jsonRetVal.chart_Servicio_Data
                }
            ]
        };
      
        var el = component.find('chart').getElement();
        var ctx = el.getContext('2d');
        new Chart(ctx).Bar(barChartData);   
            
        });
        $A.enqueueAction(action); 
    },
})
Controller.apxc
global with sharing class Chart_ServiciosXEstado {

    @AuraEnabled
    public static String getServicioXEstadoJSON(){
        
        List<CP_Servicio__c> lstServicio = [SELECT Id, Estado_Actual__r.Name FROM CP_Servicio__c];
        Map<String,Integer> mapServicioSource = new Map<String,Integer>();
        
        for(CP_Servicio__c s : lstServicio)
        {
            if(mapServicioSource.containsKey(s.Estado_Actual__r.Name))
            {
                mapServicioSource.put(s.Estado_Actual__r.Name, mapServicioSource.get(s.Estado_Actual__r.Name) + 1 );
            }else{
                mapServicioSource.put(s.Estado_Actual__r.Name, 1);
            }
        }
        
        ChartDataWrapper chart_Servicio_Data = new ChartDataWrapper();
        for(String key : mapServicioSource.keySet())
        {
            chart_Servicio_Data.chart_Servicio_Labels.add(key);
            chart_Servicio_Data.chart_Servicio_Data.add(mapServicioSource.get(key));
        }
        
        return System.json.serialize(chart_Servicio_Data);
    }
    
    /**
     * Wrapper class to serialize as JSON as return Value
     * */
    class ChartDataWrapper
    {
       public List<String> chart_Servicio_Labels {get;set;}
       public List<Integer> chart_Servicio_Data {get;set;}
        
        public ChartDataWrapper(){
            chart_Servicio_Labels = new List<String>();
            chart_Servicio_Data = new List<Integer>();
        }
    }
}