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
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
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.
Developing in the cloud 
When you use tags or have showHeader=”true” within tags Salesforce will load their own Javascript files like SfdcCore.js which are likely causing conflicts with C3.js
LikeLike
My comment meant to say “” and “” tags.
LikeLike
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.
LikeLiked by 1 person
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.
LikeLike
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.
LikeLike
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.
LikeLike
Thanks for that – good to know!
LikeLike
Here is my work around at GitHub,
refer issue number: #1452(https://github.com/masayuki0812/c3/issues/1452)
try this and let me know if it is working for you.
LikeLike