0

Here what I am trying to achieve using chart.js in lightning component,

Data comes properly from JSON but Not display like below image

enter image description here

Here is my apex class method,

@auraEnabled
public static Map<string, List<Decimal>> getChartMap(){

    String response = '{"totalMoneyIn":3425117.9600,"totalMoneyOut":805430.1400,"totalNetAmount":2619687.8200,"totalFee":363082.9400,"startDate":"2019-07-27","endDate":"2019-10-25","groupBy":"WEEKLY","moneyFlows":[{"date":"2019-08-03","moneyIn":693249.1400,"moneyOut":530451.5800,"managementFee":0,"netAmount":162797.5600},{"date":"2019-08-10","moneyIn":105952.5400,"moneyOut":16399.7300,"managementFee":0,"netAmount":89552.8100},{"date":"2019-08-17","moneyIn":58092.8800,"moneyOut":20000.0000,"managementFee":0,"netAmount":38092.8800},{"date":"2019-08-24","moneyIn":53848.3600,"moneyOut":0,"managementFee":0,"netAmount":53848.3600},{"date":"2019-08-31","moneyIn":18720.2900,"moneyOut":33800.0000,"managementFee":0,"netAmount":-15079.7100},{"date":"2019-09-07","moneyIn":30292.4400,"moneyOut":17650.0000,"managementFee":0,"netAmount":12642.4400},{"date":"2019-09-14","moneyIn":242721.2200,"moneyOut":0,"managementFee":0,"netAmount":242721.2200},{"date":"2019-09-21","moneyIn":369297.0000,"moneyOut":26000.0000,"managementFee":0,"netAmount":343297.0000},{"date":"2019-09-28","moneyIn":56065.8900,"moneyOut":23433.1700,"managementFee":0,"netAmount":32632.7200},{"date":"2019-10-05","moneyIn":36258.8900,"moneyOut":38990.0000,"managementFee":0,"netAmount":-2731.1100},{"date":"2019-10-12","moneyIn":127592.5700,"moneyOut":51305.0000,"managementFee":363082.9400,"netAmount":76287.5700},{"date":"2019-10-19","moneyIn":194729.0000,"moneyOut":41000.0000,"managementFee":0,"netAmount":153729.0000},{"date":"2019-10-26","moneyIn":1438297.7400,"moneyOut":6400.6600,"managementFee":0,"netAmount":1431897.0800}]}';

    List<Decimal> listMoneyIn = new List<Decimal>();
    List<Decimal> listMoneyOut = new List<Decimal>();
    List<Decimal> listMgmtFees = new List<Decimal>();
    Map<string, List<Decimal>> tempMP = new Map<string, List<Decimal>>();
    Map<String, Object> m = (Map<String, Object>)JSON.deserializeUntyped(response);
    List<Object> moneyFlows = (List<Object>)m.get('moneyFlows');


    for(Integer i = 0; i<moneyFlows.size(); i++){
        Map<String, Object> mapMoneyFlows = (Map<String, Object>)moneyFlows[i];
        Decimal MoneyIn = (decimal)mapMoneyFlows.get('moneyIn');
        Decimal MoneyOut = (decimal)mapMoneyFlows.get('moneyOut');
        Decimal MgmtFees = (decimal)mapMoneyFlows.get('managementFee');
        listMoneyIn.add(MoneyIn);
        listMoneyOut.add(MoneyOut);
        listMgmtFees.add(MgmtFees);
    }

    tempMP.put('Money In', listMoneyIn);
    tempMP.put('Money Out', listMoneyOut);
    tempMP.put('Management Fees', listMgmtFees);

    return tempMP;
}

Here is my Lightning component,

<aura:attribute name="startDate" type="String"/>
<aura:attribute name="endDate" type="String"/>
<aura:attribute name="totalMoneyIn" type="Integer"/>
<aura:attribute name="totalMoneyOut" type="Integer"/>
<aura:attribute name="totalMgmtFees" type="Integer"/>
<aura:attribute name="past90Days" type="String[]" default="Past 90 Days"/>

<ltng:require scripts="{!$Resource.Chart}" afterScriptsLoaded="{!c.ctr}"/>

<div>
    <table>
        <tr>
            <td>
                <div class="slds-text-heading_large">
                    Money In/Out Past 90 Days 
                    <div class="slds-text-heading_medium">
                        {!v.startDate} - {!v.endDate}
                    </div>
                </div>
            </td>
            <td>
                <div class="slds-text-heading_large">
                    <lightning:select name="select" label="">
                        <aura:iteration items="{!v.past90Days}" var="days">
                            <option text="{!days}"></option>
                        </aura:iteration>
                    </lightning:select>
                    <div class="slds-text-heading_medium">
                    </div>
                </div>
            </td>
        </tr>
    </table>
</div>
<div></div>
<div class="slds-text-heading_medium slds-border_bottom">

    Total In:   <strong>${!v.totalMoneyIn}</strong>

    Total Out:   <strong>${!v.totalMoneyOut}</strong>

    Total Fees:  <strong>${!v.totalMgmtFees}</strong>

</div>

<div class="slds-col slds-size--1-of-1 slds-small-size--1-of-2 slds-medium-size--3-of-4">
    <canvas aura:id="barChart" id="barChart" />
</div>

Here is my Lightning helper class,

({
createGraph : function(cmp, temp) {

    var dataMap = {"chartLabels": Object.keys(temp),
                   "chartData": Object.values(temp)
                   };
    console.log(dataMap);

    var el = cmp.find('barChart').getElement();
    var ctx = el.getContext('2d');

    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: dataMap.chartLabels,
            datasets: [
                {
                    label: "Money In",
                    backgroundColor: "rgb(0,128,255)",
                    data: dataMap.chartData
                },
                {
                    label: "Money Out",
                    backgroundColor: "rgb(0,0,102)",
                    data: dataMap.chartData
                },
                {
                    label: "Management Fees",
                    backgroundColor: "rgb(255,235,0)",
                    data: dataMap.chartData
                }
            ]
        },
        options:{
            responsive:true,
            legend:{
                display:true,
                position:'bottom'              
            }
        }
    });
}
})

Here is my output :

enter image description here

6
  • Can you add the .cmp file so we can see how you are trying to render the chart Commented Oct 28, 2019 at 14:21
  • Updated question, added .cmp
    – Nihar
    Commented Oct 28, 2019 at 14:26
  • 1
    Are you seeing any errors in your browser's developer console? Also can you console.log() your temp variable to see it is actually populated with data Commented Oct 28, 2019 at 14:32
  • I am getting data in console.
    – Nihar
    Commented Oct 28, 2019 at 14:34
  • Money In: (13) [693249.14, 105952.54, 58092.88, 53848.36, 18720.29, 30292.44, 242721.22, 369297, 56065.89, 36258.89, 127592.57, 194729, 1438297.74]
    – Nihar
    Commented Oct 28, 2019 at 14:34

0

You must log in to answer this question.

Browse other questions tagged .