display report in lightning component salesforce

Question

I have a report that needs to display its data in chart format using chart.js I am getting error:

Assertion Failed!: Unable to get value for key 'chart.js'. No value provider was found for 'chart'. : false

Failing descriptor: {c:LightningReportComponent}

Below is my code:

JS Controller:

({
    afterScriptsLoaded : function(component, event, helper) {
        alert('hi');
        component.set("v.ready", true);
        helper.createChart(component);
    }
})

Helper class:

//reportHelper.js
({
    createChart : function (component) {
        var ready = component.get("v.ready");
        if (ready === false) {
            return;
        }
        var chartCanvas = component.find("chart").getElement();

        var action = component.get("c.getreport");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                var reportResultData = JSON.parse(response.getReturnValue());
                var chartData = [];
                var chartLabels = [];
                for(var i=0; i < (reportResultData.groupingsDown.groupings.length); i++){
                    //Collect all labels for Chart.js data
                    var labelTemp = reportResultData.groupingsDown.groupings[i].label;
                    chartLabels.push(labelTemp);

                    var keyTemp = reportResultData.groupingsDown.groupings[i].key;

                    //Collect all values for Chart.js data
                    var valueTemp = reportResultData.factMap[keyTemp + '!T'].aggregates[0].value ;
                    chartData.push(valueTemp);
                }
                //Construct chart
                var chart = new Chart(chartCanvas,{
                    type: 'doughnut',
                    data: {
                        labels: chartLabels,
                        datasets: [
                            {
                                label: "test",
                                data: chartData,
                                backgroundColor: [
                                    "#52BE80",
                                    "#76D7C4",
                                    "#1E8449",
                                    "#2ECC71",
                                    "#FFB74D",
                                    "#E67E22",
                                    "#F8C471",
                                    "#3498DB",
                                    "#00BCD4",
                                    "#D32F2F",
                                    "#82E0AA",
                                    "#AFB42B"
                                ]
                            }
                        ]
                    },
                    options: {
                        cutoutPercentage: 75,
                        maintainAspectRatio: false,
                        legend: {
                            display: true,
                            position:'right',
                            fullWidth:false,
                            reverse:true,
                            labels: {
                                fontColor: '#000',
                                fontSize:10,
                                fontFamily:"Salesforce Sans, Arial, sans-serif SANS_SERIF"
                            },
                            layout: {
                                padding: 70,
                            }
                        }
                    }
                });

            } else if (state === "ERROR") {
                var errors = response.getError();
                if (errors) {
                    if (errors[0] && errors[0].message) {
                        console.log("Error message on createReport: " +
                                    errors[0].message);
                    }
                } else {
                    console.log("Unknown error");
                }
            }
        });
        $A.enqueueAction(action);
    }
})

Lightning Component:

<aura:component controller="ReportsClass">
<ltng:require scripts="{!join(',',$Resource.requireJS,$Resource.ChartX/src/chart.js)}" afterScriptsLoaded="{!c.afterScriptsLoaded}"/>
<aura:attribute name="ready" type="Boolean" default="false"/>
<div class="slds-grid slds-wrap slds-grid--pull-padded ">
    <div class="slds-p-horizontal--small slds-size--1-of-3 slds-m-top--medium">
        <canvas aura:id="chart" height="300"></canvas>
    </div>
</div>
</aura:component>

---

Apex Class:

public class ReportsClass {


    @AuraEnabled
public static String getreport(){
    Report reportRec = [SELECT Id FROM Report WHERE Id = '00O90000008xEoh'];

    Reports.ReportResults reportResult =
            Reports.ReportManager.runReport(reportRec.Id, true);

    return JSON.serialize(reportResult);
}
}

I referred this article to met my requirement but seems not working for me. Can someone kindly help me out here.

Answer 1

The problem here is with the URL you are using to load the Static resource

{!join(',',$Resource.requireJS,$Resource.ChartX/src/chart.js)}

So the correct format is:

{!join(',', $Resource.requireJS, $Resource.ChartX + '/src/chart.js')}