2

I'm using the chart's library C3.js in a Visualforce page. I'm loading the C3.js library using static resources. Everything works great in Salesforce Classic, the beautiful charts show up like expected. But in Lightning Experience, with the exact same Visualforce page, the charts do not display.

I checked the source files in Chrome dev tool, all files are loading. No errors are shown in the Chrome dev console either, just a few warnings that generally I don't understand.

Here is my Visualforce page code:

<apex:page standardController="Opportunity" showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
<html>
<head>
  <title>Test</title>
  <apex:stylesheet value="{!URLFOR($Resource.C3Charts, '/c3.min.css')}" />
</head>    
<body>    
    <div id="myChart1"></div>
  <apex:includeScript value="{!URLFOR($Resource.jquery310)}"/>
  <apex:includeScript value="{!URLFOR($Resource.C3Charts, '/d3.min.js')}"/>
  <apex:includeScript value="{!URLFOR($Resource.C3Charts, '/c3.min.js')}"/>
  <script>
    $( document ).ready(function() {
        var chart = c3.generate({
            bindto: '#myChart1',
            data: {
                columns: [
                    ['Intersection Growth', 25]
                ],
                type: 'gauge',
                onclick: function (d, i) { console.log("onclick", d, i); },
                onmouseover: function (d, i) { console.log("onmouseover", d, i); },
                onmouseout: function (d, i) { console.log("onmouseout", d, i); }
            },
            gauge: {
            },
            color: {
                pattern: ['#FF0000', '#F97600', '#F6C600', '#60B044'], // the three color levels for the percentage values.
                threshold: {
                    values: [30, 60, 90, 100]
                }
            },
            size: {
                height: 170
            }
        });
    });
  </script>
</body>
</html>
</apex:page>

Can any help me with this? Thanks!

3

I'm assuming you have LockerService turned on and this is an example of a 3rd party library that isn't compatible with it.

In the comment thread of the answer to None of the JS external library work with locker services Salesforce lightning enabled (in that case ChartJs and D3) is this comment by Salesforce's Doug Chasman:

.. we've stepped back this summer and really looked at our testing methodology and have radically changed our approach to testing and verification of the secure virtual DOM. The fruit of that labor will start to show up in Winter'17 shortly. It won't fix everything but we looked at patterns of issues and there are a fairly small number of distinct root causes that we are attacking in a much more methodical manner. We're also working on performance improvements (some tactical ones in Winter'17 with a major improvement slated for Spring'17 - requires browser support of Proxy).

So it sounds like compatibility with 3rd party JavaScript libraries will improve. But meanwhile unless you engage with the authors of the library and/or fix it yourself you are stuck.

The core problem is that there are thousands of attractive 3rd party JavaScript libraries working perfectly in other environments: the extra constraints imposed by the LockerService will be unknown (or at best a low priority) to most of the developers of those libraries. AFAIK (others may know better) which work (and which versions work) is not listed anywhere and who should/will do the work to fix the problems is unclear.

  • We're taking a multi pronged approach to this: radically improved secure virtual DOM (scheduled to deploy on or near 10/18) and reaching out to popular library owners and working with them to get their libraries not LS compliant but strict mode and CSP compliant (both recognized by the web security community as critical to next gen protection). This has already born fruit with D3 v4 which is now working correctly with strict mode (and LS) unmodified. – Doug Chasman Oct 7 '16 at 11:13
  • ... "The core problem is that there are thousands of attractive 3rd party JavaScript libraries working perfectly in other environments" - unfortunately that definition of working perfectly does not include the multi author/multi tenant security requirements that Salesforce requires. They are not working perfectly wrt Trust because they allow data scraping, XSS attack surface area that is unmanageable, etc. These are all things that Locker is required to eliminate. – Doug Chasman Oct 7 '16 at 11:21
  • 1
    ... The difference with what works once the 10/18 patch goes live and what did not before it is nothing short of dramatic. It also results in an order of magnitude reduction in performance overhead introduced by the current version of Locker. – Doug Chasman Oct 7 '16 at 11:21
  • 1
    @DougChasman Thanks for the comments - all helpful. Its hard to find guidance on what libraries should/will work now. If your 10/18 patch included a list of the "known working" major library versions that would be great. – Keith C Oct 7 '16 at 11:49

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.