C3 charts on Saleforce Winter16

As @devinthecloud points out in his Blog post Salesforce Winter 16 wrecked C3 charts on the pages he and I had developed. he found the removal of <apex:form> fixed the issue on his pages, but on my page the charts were still broken, so instead of this:

 

 

You get this

 

 

I stripped the page down to a bare minimum that you can use to recreate the issue, see below,

<apex:page docType="html-5.0" 
           applyBodyTag="false"
           showHeader="true"
           readOnly="true"
           sidebar="false">
<html lang="en">
  <head>
      <!-- Static Resources for CSS -->
        <link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet"/>
    </head>
    <body>
      <div id="chart"></div>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js" />
      <script>
        var chart = c3.generate({
          data: {
            columns: [
  //            ["setosa", 0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2],
              ["versicolor", 1.4, 1.5, 1.5, 1.3, 1.5, 1.3, 1.6, 1.0, 1.3, 1.4, 1.0, 1.5, 1.0, 1.4, 1.3, 1.4, 1.5, 1.0, 1.5, 1.1, 1.8, 1.3, 1.5, 1.2, 1.3, 1.4, 1.4, 1.7, 1.5, 1.0, 1.1, 1.0, 1.2, 1.6, 1.5, 1.6, 1.5, 1.3, 1.3, 1.3, 1.2, 1.4, 1.2, 1.0, 1.3, 1.2, 1.3, 1.3, 1.1, 1.3],
              ["virginica", 2.5, 1.9, 2.1, 1.8, 2.2, 2.1, 1.7, 1.8, 1.8, 2.5, 2.0, 1.9, 2.1, 2.0, 2.4, 2.3, 1.8, 2.2, 2.3, 1.5, 2.3, 2.0, 2.0, 1.8, 2.1, 1.8, 1.8, 1.8, 2.1, 1.6, 1.9, 2.0, 2.2, 1.5, 1.4, 2.3, 2.4, 1.8, 1.8, 2.1, 2.4, 2.3, 1.9, 2.3, 2.5, 2.3, 1.9, 2.0, 2.3, 1.8],
              ["setosa", 30],
  //            ["versicolor", 40],
  //            ["virginica", 50],
            ],
            type : 'pie',
            onmouseover: function (d, i) { console.log("onmouseover", d, i, this); },
            onmouseout: function (d, i) { console.log("onmouseout", d, i, this); },
            onclick: function (d, i) { console.log("onclick", d, i, this); },
          },
          axis: {
            x: {
              label: 'Sepal.Width'
            },
            y: {
              label: 'Petal.Width'
            }
          }
        });
        setTimeout(function () {
          chart.load({
            columns: [
              ["setosa", 130],
            ]
          });
        }, 1000);
        setTimeout(function () {
          chart.unload({
            ids: 'virginica'
          });
        }, 2000);
      </script>
    </body>
</html>
</apex:page>

 

This let me narrow it down to the Salesforce header.
when you set **showHeader=”true”** it breaks
if you set **showHeader=”false”** it starts working
As this is obviously and provably down to a change in winter 16 I can raise it with Salesforce and get a fix.
…….. Wrong!
I quote

“At times, Client Side JS conflict with SFDC header JS will collide with already defined functions with the same name.”

“the behaviour of JavaScript is inconsistent with Salesforce components.”

and

“as we don’t support JavaScript”

Ah it’s nice to see that young Internet companies have the same grasp of customer service as the traditional IT companies and thus it falls back on consultants to fix, in this case with an Iframe, I’m not a fan of Iframes normally but as Salesforce use them themselves there is precedent
And so we now split our single page into 2 pages, an inner content and an outer Iframe wrapper
First we take out the existing page (it was called **”chart_test”**), rename it to **”chart_test_inner”** and set **showHeader=”false”**
Then we put in a Iframe wrapper with the old name and a bit of CSS to make it size properly then point it to the inner content

<apex:page docType="html-5.0" 
           applyBodyTag="false"
           showHeader="true"
           readOnly="true"
           sidebar="false">
<html lang="en">
  <head>
  <style>
  .fluidMedia {
    position: relative;
    padding-bottom: 56.25%; /* proportion value to aspect ratio 16:9 (9 / 16 = 0.5625 or 56.25%) */
    padding-top: 30px;
    height: 0;
    overflow: hidden;
  }
    .fluidMedia iframe {
        position: absolute;
        top: 0; 
        left: 0;
        width: 100%;
        height: 100%;
    }
      </style>
  </head>
    <body>
    <div class="fluidMedia">
        <iframe src="../apex/chart_test_inner" frameborder="0" > </iframe>
    </div>
    </body>
</html>
</apex:page>

 

And now instead of a broken

We have a working

Hooray!!!

Leave a Reply

Your email address will not be published. Required fields are marked *