+ Start a Discussion
Akanksha Gupta 58Akanksha Gupta 58 

pass data from lightning component to chart.js

I have 2 lightning components:
The first one is a table which has 4 columns and we can add or delete rows. 
The second one is a report which displays data from one of the coloumns.
How do I achieve this? Do I need to fire an event on the save method?

Here's my first component:
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" controller="LC57_AiPotenitalRevenueClass">
    
    <aura:attribute name="showHidePlayer" type="boolean" default="false" description="To Toggle the table" /> 
    <aura:attribute name="qualificationList" type="APR_AccountPotentialRevenue__c[]" description="To hold the data list" />
    <aura:attribute name="editMode" type="Boolean"  description="To enable Edit Mode"/>
    <aura:attribute name="lockQualificationItem" type="Boolean" description="To toggle the delete and edit Button" default="false"/>
    <aura:attribute name="recordId" type="String" description="Fetch the Current page Id" />
    <aura:attribute name="scope" type="String" description="Selected scope value"/>
    <aura:attribute name="fieldLabelsMap" type="Object" description="Keeps labels of column headers"/>
    <aura:attribute name="service" type="APR_AccountPotentialRevenue__c" default="{'sobjectType': 'APR_AccountPotentialRevenue__c',
                                                                                  'Service__c': '',                                                                  
                                                                                  }"/>
    <aura:attribute name="Brandlist" type="String[]" description="Display User Brand value"/>
    <aura:attribute name="newCriterion" type="APR_AccountPotentialRevenue__c" description="New criterion definition attribute"/>
    <!--<aura:registerEvent name="navigate" type="c:loadChart"/>-->
    <!-- HELPER ATTRIBUTES -->
    <aura:attribute name="reInitialize" type="Boolean" description="Helper to reinitialize lookup component" default="false"/>
    
    <!-- HANDLERS -->
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>  
    
    <div class="slds-page-header">
        <div onclick="{!c.toggle}">         
            <aura:if isTrue="{!v.showHidePlayer == False}">
                <lightning:icon iconName="utility:right" size="small" />
            </aura:if>
            <aura:if isTrue="{!v.showHidePlayer}">
                <lightning:icon iconName="utility:down" size="small" />  
            </aura:if>            
        </div> 
        <div  class="slds-text-heading--label align">
            Dépense client
        </div> 
        
    </div>
    
    
    
    
    <div aura:id="text">
        
        <div class="slds-scrollable">
            <table class="slds-table slds-table_bordered table-condensed slds-table_cell-buffer"> 
                <thead >
                    <tr class="slds-text-title_caps">
                        <th class="thead"  scope="col">
                            <div class="slds-truncate">{!v.fieldLabelsMap.Brand__c}</div>
                        </th>
                        <th class="thead"  scope="col">
                            <div class="slds-truncate" title="Competitor Name">{!v.fieldLabelsMap.Service__c}</div>
                        </th>
                        <th class="thead"  scope="col">
                            <div class="slds-truncate" title="Competitor Name">{!v.fieldLabelsMap.Turnover__c}</div>
                        </th>
                        <th class="thead" scope="col">
                            <div class="slds-truncate" title="Action">{!v.fieldLabelsMap.Comments__c}</div>
                        </th>
                        <th class="thead" scope="col">
                            <div class="slds-truncate" title="Action">{!$Label.c.PIS_Modified_by_Date}</div>
                        </th>
                    </tr>
                </thead> 
                <tbody>
                    <tr> 
                        <td>
                            <ui:inputSelect disabled="true" class="slds-select" aura:id="brand" >
                                <aura:iteration items="{!v.Brandlist}" var="brand">
                                    <ui:inputSelectOption value="{!v.newCriterion.Chosen_Brand__c}" text="{!brand}" label="{!brand}"/>
                                </aura:iteration>
                            </ui:inputSelect>
                        </td>
                        <td>
                            <ui:inputselect class="slds-input" aura:id="ChooseBrand"  value="{!v.newCriterion.Service__c}"  required="true"/> 
                        </td>
                        <td>
                            <ui:inputText class="slds-input" value="{!v.newCriterion.Turnover__c}"  />
                        </td>
                        <td>
                            <ui:inputText class="slds-input slds-cell-wrap" value="{!v.newCriterion.Comments__c}"/>
                        </td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td>
                            
                            <button type="button" class="slds-button slds-button--icon-border-filled"
                                    onclick="{!c.save}" >
                                <lightning:icon iconName="utility:check" size="small" class="fillGreenIcon"/>
                            </button>
                            <button type="button" class="slds-button slds-button--icon-border-filled"
                                    onclick="{!c.cancel}">
                                <lightning:icon iconName="utility:undo" size="small" class="fillGreenIcon"/>
                            </button>
                            
                        </td>
                    </tr>
                    
                    <aura:if isTrue="{!v.qualificationList.length > 0}">
                        <aura:iteration aura:id="trial" items="{!v.qualificationList}" var="item" indexVar="i">
                            <tr id="{!i}" data-index="{!i}">
                                
                                <td class="slds-cell-wrap">
                                    <div>
                                        <ui:outputRichText class="slds-input"  value="{!item.profileofInterestRecord.Brand_Logo__c}"/>  
                                    </div>    
                                </td>     
                                <td class="slds-cell-wrap">
                                    <ui:OutputText class="slds-input"  value="{!item.profileofInterestRecord.Service__c}"/>  
                                </td> 
                                <td class="slds-cell-wrap">
                                    <ui:outputText class="slds-input" aura:id="levels" value="{!item.profileofInterestRecord.Turnover__c  }" />
                                </td>
                                <td class="slds-cell-wrap">
                                    <ui:outputText class="slds-input" aura:id="levels" value="{!item.profileofInterestRecord.Comments__c  }" />
                                </td>
                                <td  colspan="2">
                                    <div>
                                        <lightning:icon iconName="action:add_contact" size="xx-small" alternativeText="Indicates approval"/>                                           
                                        <ui:outputText aura:id="levels" value="{!item.profileofInterestRecord.LastModifiedBy.Name}"/>
                                        <ui:OutputDate aura:id="levels" value="{!item.profileofInterestRecord.LastModifiedDate }"/>                                           
                                    </div>
                                    
                                </td>   
                                <td>
                                </td>
                                <td>
                                    <button aura:id="editButton" type="button"
                                            class="slds-button slds-button--icon-border-filled"
                                            onclick="{!c.editCriterion}"
                                            >
                                        <lightning:icon iconName="utility:edit" size="small" class="fillGreenIcon"/>
                                    </button>
                                    <button aura:id="deleteButton" type="button"
                                            class="slds-button slds-button--icon-border-filled" 
                                            onclick="{!c.deleteCriterion}" >
                                        <lightning:icon iconName="utility:delete" size="small" class="fillRedIcon"/>
                                    </button>
                                </td> 
                                
                            </tr>
                       </aura:iteration>    
                    </aura:if> 
                </tbody>
            </table>   
        </div>      
        
    </div>       
    
</aura:component>

And the second component is:
<aura:component controller="LC58_AiIndicatorsClass" implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes" access="global" >
    <ltng:require scripts="{!$Resource.ChartJS}" afterScriptsLoaded="{!c.scriptsLoaded}"/>
    <aura:attribute name="revenue" type="double"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="clist" type="List" access="GLOBAL"/> 
    <div class="icon-style slds-align--absolute-center">
        <lightning:formattedNumber value="{!v.revenue}" style="currency" currencyCode="USD"/>    
    </div>
    <div class="icon-style1">
        <canvas id="myChart" height="200"></canvas>
    </div>   
</aura:component>

 
GhanshyamChoudhariGhanshyamChoudhari
If two component has
1. parent-child relation then you use Attributes or Methods
2. child-parent relation then you use Component  Events 

If two component doesn't have any relations 
1.  then you use Application Events 
Rohit RadhakrishnanRohit Radhakrishnan
Please check the below URL for using data into lwc to draw chart using ChartJS. Here you can see how the data is pulled from salesforce using apex and fed into js of a lwc.
Dynamic Chart in LWC With Multiple Datasets Using ChartJS (https://salesforcerealm.com/2020/12/09/chart-in-lwc-using-chartjs/)