2

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 enter image description here

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); 
    },  

})
6
  • Possibly related: salesforce.stackexchange.com/questions/124690 – sfdcfox Nov 18 '16 at 4:49
  • 1
    Also, can we see your JavaScript controller code that involves Radar? It may be related. – sfdcfox Nov 18 '16 at 4:50
  • @Anil Without seeing your JS code ,nobody will be able to help you .Please post the JS code you are using . – Mohith Shrivastava Nov 18 '16 at 4:55
  • thanks guys, just added my JS code too, honestly i am still playing around with the charts and the code is straight from the blog post. – Anil Shivaraj Nov 18 '16 at 4:57
  • @Anil Are you using same controller class as that blog suggests ? – Mohith Shrivastava Nov 18 '16 at 4:58
4

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

enter image description here

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 .

8
  • I second that - spectacular work on this Mohith! As a follow up have either of you opened an Issue or submitted a pull request to get this fixed in Chartjs github.com/chartjs/Chart.js ? What version of Chartjs are you using? – Doug Chasman Nov 18 '16 at 12:06
  • @doug It's 2.4 latest release in the chart.js library .The file is in their git repo – Mohith Shrivastava Nov 18 '16 at 12:13
  • Are you going to submit a pull request to Chartjs with the proposed fix to remove the use of a WebKit specific deprecated API? – Doug Chasman Nov 18 '16 at 13:39
  • 1
    Are you going to submit a pull request to Chartjs with the proposed fix to remove the use of a WebKit specific deprecated API? – Doug Chasman Nov 18 '16 at 13:39
  • @DougChasman Going to create an issue that there library should use this to be locker compliant and will take from there .Thanks ! – Mohith Shrivastava Nov 18 '16 at 19:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.