4

I am trying to use the C3 library to display charts in a Visualforce page but the charts are coming up empty. All of the elements are rendering but there is no chart.

I found this post regarding the issue and tried the solution listed. The charts were showing, but the functionality of the charts was still broken. Another solution suggested to remove the header and <apex:form> tags but I need both of those in my page.

Has anyone successfully gotten C3 to work in a Visualforce page or can suggest a possible solution?

  • Will displaying these charts in an iframe, isolate your DOM and hence free you from Salesforce D3 + Sizzle conflict ? – karthikselva Feb 22 '16 at 19:31
  • You cant do it if you need headers or apex:form because Salesforce imports their own versions of those libraries before anything on your page executes. You would have to have another VF page that is just the charts and probably iFrame it so you can control it entirely outside the current page with the form and header elements. – cricketlang Feb 22 '16 at 19:42
  • The iframe did work, however, I was able to comment out one line, d3_selectAll = Sizzle;, in the D3 javascript file to get it to work without the iframe. – Liz Feb 22 '16 at 23:24
1

I was able to get this to work by commenting out the line d3_selectAll = Sizzle; from the D3 javascript file. After that, all the charts and functionality came through correctly.

I found this case on GitHub that suggested it was more of a D3 issue not C3 and one comment referenced this line of code calling Sizzle. I'm assuming that it worked because it was no longer trying to reference Sizzle a second time. Not 100% though.

| improve this answer | |
  • 1
    Can you add any explanation as to why this fixes the issue? – Adrian Larson Feb 23 '16 at 0:10

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.