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
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
