You need to sign in to do that
Don't have an account?
Akanksha 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:
And the second component is:
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>
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
Dynamic Chart in LWC With Multiple Datasets Using ChartJS (https://salesforcerealm.com/2020/12/09/chart-in-lwc-using-chartjs/)