Radar chart using Chart.js not working

Question

I am trying to follow the chart example listed in salesforce doc and a blog, i am getting an error on the JS load functionality as below and the charts are not getting loaded and i get the error screen that Radar.function(xxxX) is not valid.

I have used a static resource with name chart_js and included in the component. Is there anything missing?

below is my code :

Component:

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

    <div class="heading">
        Radar Chart showing Lead count by Source
    </div>

    <div>  
        <canvas aura:id="radarChart" id="radarCHart123" width="400" height="400"/>
    </div>

</aura:component>

Error

JS controller

({
    init : function(component, event, helper) { 
        helper.setupRadarChart(component);
    }
})

Helper

 ({
        setupRadarChart : function(component) {

        var action = component.get("c.getLeadJSON");
        action.setCallback(this, function(a){
            var jsonRetVal = JSON.parse(a.getReturnValue()); 
            console.log(jsonRetVal.radarLabels);

            var radarChartData = {
            labels: jsonRetVal.radarLabels,
            datasets: [
                { 
                    fillColor: "rgba(220,220,220,0.2)",
                    strokeColor: "rgba(220,220,220,1)",
                    pointColor: "rgba(220,220,220,1)",
                    pointStrokeColor: "#fff",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "rgba(220,220,220,1)",
                    data: jsonRetVal.radarData
                }
            ]
        };

        var el = component.find('radarChart').getElement();
        var ctx = el.getContext('2d');
        new Chart(ctx).Radar(radarChartData);   

        });
        $A.enqueueAction(action); 
    },  

})

Answer 1

There are couple of problems here causing the issue

1.The server is returning JSON and you are using JSON.parse to manually deserialise the JSON .The app is breaking due to this .

2.The locker does not support the function "gContext2D.webkitImageSmoothingEnabled"

gContext2D.webkitImageSmoothingEnabled' is deprecated and will be removed in M55, around November 2016. Please use 'CanvasRenderingContext2D.imageSmoothingEnabled' instead.

So this means you will manually edit the file and where ever you used gContext2D.webkitImageSmoothingEnabled you will use "CanvasRenderingContext2D.imageSmoothingEnabled"

I have tried by disabling locker and just not using the apex controller to narrow down the issue .

Here is the code thats completely working now

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes" access="global" controller="RadarChartData">
 <ltng:require scripts="{!$Resource.Chartjs}" afterScriptsLoaded="{!c.init}"/>
<div class="heading">
    Radar Chart showing Lead count by Source
</div>

<div>  
    <canvas aura:id="radarChart" id="radarChart" width="400" height="400"/>
</div>

The JS controller

({
init : function(component, event, helper) { 
    console.log('Test');
    helper.setupRadarChart(component);
 }

})

The Helper code

({
setupRadarChart : function(component) {

var data = {
labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
    datasets: [
        {
            label: "My First dataset",
            backgroundColor: "rgba(179,181,198,0.2)",
            borderColor: "rgba(179,181,198,1)",
            pointBackgroundColor: "rgba(179,181,198,1)",
            pointBorderColor: "#fff",
            pointHoverBackgroundColor: "#fff",
            pointHoverBorderColor: "rgba(179,181,198,1)",
            data: [65, 59, 90, 81, 56, 55, 40]
        },
        {
            label: "My Second dataset",
            backgroundColor: "rgba(255,99,132,0.2)",
            borderColor: "rgba(255,99,132,1)",
            pointBackgroundColor: "rgba(255,99,132,1)",
            pointBorderColor: "#fff",
            pointHoverBackgroundColor: "#fff",
            pointHoverBorderColor: "rgba(255,99,132,1)",
            data: [28, 48, 40, 19, 96, 27, 100]
        }
    ]
};
    var el = component.find('radarChart').getElement();
    var ctx = el.getContext('2d');
    console.log(ctx);
    new Chart(ctx, {
    type: "radar",
    data: data,
    options: {
            scale: {
                reverse: true,
                ticks: {
                    beginAtZero: true
                }
            }
      }
   });

  } 
})

Here is the screenshot

You can deactivate locker by using critical updates but strongly suggest not to and instead once you tested the code ,edit the Static resource chartJs library and modify to use CanvasRenderingContext2D.imageSmoothingEnabled wherever applicable .