The LCMP_DisplayChart component used to send the values to be displayed to the strike component

LCMP_DisplayChart.cmp

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,forceCommunity:availableForAllPageTypes" access="global" controller="LCC_CaseResults">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
    
    <aura:attribute name="barData" type="Object[]" />
    <aura:attribute name="accountName" type="String" default="" />
    <aura:attribute name="divLength" type="String" default="4" />
    <aura:attribute name="opencases" type="String" default="Open Cases" />
    <aura:attribute name="closedcases" type="String" default="Closed Cases" />
    <aura:attribute name="totalcases" type="String" default="Total Cases" />
    <aura:attribute name="isLoaded" type="Boolean" default="false" />
    <aura:attribute name="nocasesMsg" type="Boolean" default="false" />

	<!-- Handlers & Events -->
    <aura:handler name="init" value="{!this}" action="{!c.getResponse}" />    
    
    <!-- Container Div -->
    <div class="slds" style="margin:36px 0;">
        
        <aura:if isTrue="{!v.showSpinner}">
            <lightning:spinner variant="brand" size="large" class="slds-spinner_container slds-is-fixed" alternativeText="spinner" />
            <div class="slds-backdrop"></div>
        </aura:if>
        
        <!-- Displays Error Message -->
        <aura:if isTrue="{!v.isAlert}">
            <div aura:id="alert-id" >
                <div class="slds-notify_alert slds-theme_alert-texture slds-theme_error" role="alert">
                    <lightning:layout horizontalAlign="center" verticalAlign="center" multipleRows="false" class="error-messageDiv">
                        <lightning:layoutItem flexibility="auto" smallDeviceSize="10" mediumDeviceSize="10" largeDeviceSize="10" size="10" class="error-contentDiv">
                            <lightning:icon iconName="utility:ban" variant="inverse" alternativeText="error" />
                            <h2>{!v.alertMessage}</h2>
                        </lightning:layoutItem>
                    </lightning:layout>
                </div>
            </div>
        </aura:if>
        
        <!-- Div to display if there are cases in the system to display the chart -->
        <aura:if isTrue="{!v.isLoaded}">
            <lightning:layout horizontalAlign="spread" verticalAlign="center" multipleRows="true" class="slds-box">
                <lightning:layoutItem largeDeviceSize="1" size="12" class="slds-medium-show">
                </lightning:layoutItem>
                <lightning:layoutItem flexibility="auto" smallDeviceSize="12" mediumDeviceSize="{!v.divLength}" largeDeviceSize="{!v.divLength}" size="12">
                    <c:LCMP_StrikeChart type="bar"
                                          data="{!v.barData}"
                                          title="Type of Case"
                                          orientation="vertical"
                                          xAxisLabel="Accounts"
                                          yAxisLabel="Total Cases" />
                </lightning:layoutItem>
                <lightning:layoutItem largeDeviceSize="1" size="12" class="slds-medium-show">
                </lightning:layoutItem>
            </lightning:layout>
        </aura:if>
        
        <!-- No cases error message div -->
        <aura:if isTrue="{!v.nocasesMsg}">
            <h2 style="color:#000000;font-weight:bold;"> No Cases Found </h2>
        </aura:if>
    </div>
    
</aura:component>

LCMP_DisplayChartController.js

({
    getResponse: function(component, event, helper) {
        helper.getCases(component);
    }    
    
})

LCMP_DisplayChartHelper.js

({
	//Generic Method to perform server calls
    callToServer: function(component, method, callback, params) {
        component.set("v.showSpinner", true);
        var action = component.get(method);
        action.setStorable();
        if(params) {
            action.setParams(params);
        }
        action.setCallback(this, function(response) {
            component.set("v.showSpinner", false);
            var state = response.getState();
            if (state === "SUCCESS") {
                callback.call(this, response.getReturnValue());
            } else if(state === "ERROR") {
                var errors = response.getError();
                if (errors) {
                    if (errors[0] && errors[0].message) {
                        component.set("v.alertMessage", "Error message: " + errors[0].message);
                        component.set("v.isAlert", true);
                    }
                }
            } else {
                component.set("v.alertMessage", "ERROR: Unknown Error");
                component.set("v.isAlert", true);
            }
        });
        $A.enqueueAction(action);
    },
    
    //Method which retrieves the cases and account details
    getCases: function(component) {
        var self = this;
        self.callToServer(
            component,
            "c.getAllCases",
            function(response) {
                if(response.length > 0) {
                    var result = response[0];
                    if(result.cases !== undefined && result.accounts !== undefined) {
                        var accounts = result.accounts;
                        self.countCases(component, result.cases, accounts);
                    } else {
                        component.set("v.alertMessage", "No Access");
                        component.set("v.isAlert", true);
                    }
                } else {
                    component.set("v.caseList", []);
                }
            },
            {
                
            });
    },
    
    countCases: function(component, cases, accounts) {
        var self = this;
        var openCasesMap = {};
        var closedCasesMap = {};
        var result = [];
        
        //Map of account and open cases
        function openCasesToMap(key, value) {
            openCasesMap[key] = openCasesMap[key] || [];
            var temp = openCasesMap[key];
            temp.push(value)
            openCasesMap[key] = temp;
        }
        
        //Map of account and closed cases
        function closedCasesToMap(key, value) {
            closedCasesMap[key] = closedCasesMap[key] || [];
            var temp = closedCasesMap[key];
            temp.push(value)
            closedCasesMap[key] = temp;
        }
        
        //Adding values to map based on case status and accountId
        for(var i=0;i<cases.length;i=i+1) {
            var record = cases[i];
            if(record.Status === "New" || record.Status === "Working" || record.Status === "Escalated") {
                openCasesToMap(record.AccountId, record);
            } else if(record.Status === "Closed") {
                closedCasesToMap(record.AccountId, record);
            }
        }
        
        for(var k=0;k<accounts.length;k=k+1) {
            var openCases = 0;
            var closedCases = 0;
            var rec = {};
            var account = accounts[k];
            rec.AccountId = account.Id;
            rec.AccountName = account.Name;
            
            if(openCasesMap[account.Id] !== undefined) {
                openCases = openCasesMap[account.Id].length;
            }
            if(closedCasesMap[account.Id] !== undefined) {
                closedCases = closedCasesMap[account.Id].length;
            }
            rec.totalOpenCases = openCases;
            rec.totalClosedCases = closedCases;
            rec.totalCases = openCases + closedCases;
            result.push(rec);
        }
        component.set("v.lstResults", result);
        if(result.length > 0) {
            if(result[0].totalCases > 0) {
                component.set("v.isLoaded", true);
            }
        }
		component.set("v.barData",result);
        self.setChartData(component);
    },
    
    setChartData : function(component, event) {
        var data = component.get("v.barData");
        if(data.length > 0) {
                component.set("v.isLoaded", "true");                
                var barData = [];
                for(var i=0; i<data.length; i=i+1) {
                    var barItem = {};
                    barItem.label = data[i].AccountName;
                    barItem.OpenCases = data[i].totalOpenCases;
                    barItem.ClosedCases = data[i].totalClosedCases;
                    barItem.TotalCases = data[i].totalCases;
                    barData.push(barItem);
                }
            
            /*
             * If you don't have any cases in the system, you can hardcode the values as below and see a preview 
             * 
                var barItem1 = {};
                    barItem1.label = 'Test Account';
                    barItem1.OpenCases = 80;
                    barItem1.ClosedCases = 20;
                    barItem1.TotalCases = 100;
                    barData.push(barItem1); 
             */
            
                component.set("v.barData", barData);            
        } else {
            component.set("v.nocasesMsg","true");
        }
    }
})