Winter 16: The Curious Incident of the chart with the form tag

Winter 16 has arrived and a fellow lotus-domino-now-a-Salesforce-Developer, Mark Myers (@stickfight) discovered the dead body of a visualforce page, with beautiful C3.js charts, speared by a garden fork an unknown illness.

The Charts stopped working.

The Visualforce page was still displaying, and the area the chart was to be displayed was apportioned correctly – just no chart being generated.

In order to illustrate this, I have created a simple Visualforce Page that displays a chart with c3.js. The following code displayed the chart fine before the Winter 16 rlease – but it does not now.

<apex:page docType="html-5.0" applyBodyTag="false" applyHtmlTag="false" showHeader="false" sidebar="false">
<html>
    <head>
        <!-- Load c3.css -->
        <link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.css" rel="stylesheet" type="text/css" />
        <!-- Load d3.js and c3.js -->
        <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.js"></script>       
    </head>
<body>
<apex:form >
</apex:form>


<div id="chart"></div>


</body>
<script>
var chart = c3.generate({
    bindto: '#chart',
    data: {
      columns: [
        ['data1', 30, 200, 100, 400, 150, 250],
        ['data2', 50, 20, 10, 40, 15, 25]
      ]
    }
});
    </script>    
    </html>
</apex:page>
C3.js not working in Winter 16

C3.js not working in Winter 16

Even more curious – there is no controller here nor is the Javascript doing a lot. And my Project Timesheets app – which uses c3.js – has no issues after the new release.

So, like our 15-year-old blog post hero – Christopher John Francis Boone, I decided to investigate and after stripping out Visualforce mark-up – I found the culprit.

<apex:form>

Removing this tag means the charts get rendered fine.

<apex:page docType="html-5.0" applyBodyTag="false" applyHtmlTag="false" showHeader="false" sidebar="false">
<html>
    <head>
        <!-- Load c3.css -->
        <link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.css" rel="stylesheet" type="text/css" />
        <!-- Load d3.js and c3.js -->
        <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.js"></script>       
    </head>
<body>


<div id="chart"></div>


</body>
<script>
var chart = c3.generate({
    bindto: '#chart',
    data: {
      columns: [
        ['data1', 30, 200, 100, 400, 150, 250],
        ['data2', 50, 20, 10, 40, 15, 25]
      ]
    }
});
    </script>    
    </html>
</apex:page>
C3.js is happy in Visualforce once more

C3.js is happy in Visualforce once more

Sometimes we like to avoid the <apex:form> tag to avoid View State limits and now it seems we, Javascript developers, have a new (unexplained) reason for avoiding it in our Visualforce.

Curious.

Advertisements

8 thoughts on “Winter 16: The Curious Incident of the chart with the form tag

    • We did submit a case for this and this was the explanation given by Salesforce.

      The long term answer is probably to create charts with a Lightning Component and surface it in the Visualforce page.

      Most chart reports I create don’t have the header or sidebar included – and yet adding the apex:form tag stopped the charts rendering.

      Liked by 1 person

  1. In my page I need to have a form as well. Any workaround to use C3 chart with the form in the same page. I can use iFrame but it will not be mobile compatible.

    Like

    • I was fortunate in that my apex:form tag was being used to contain fields that filtered the overall report.

      I was able to change to a regular html form tag and use RemoteAction methods to perform the required tasks.

      This is probably your best solution – painful if you have a lot of fields and you are submitting via a standard controller.

      Like

      • other JS charts like morris.js is working fine.. (Which is also not reaching to my requirement).
        Also i have more inputCheckboxes, selectLists and submit button with multiple forms which will be more painful by removing..

        Seems that C3.js library file need to be updated regarding this issue. Asked for the issue in c3js forum.

        Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s