search

c3js / c3

:bar_chart: A D3-based reusable chart library
http://c3js.org
MIT License
9.34k stars 1.39k forks source link

Blank Charts on Visualforce Page containing <apex:form> tag and Salesforce1 #1452

Closed JeetAtGitHub closed 6 years ago

JeetAtGitHub commented 9 years ago

I have implemented c3 charts with visualforce page(Salesforce). But facing some issues from new release of Salesforce. here is the scenarios. If there will be one apex:form tag in Visualforce page, the charts are displaying as blank. Also it doesn't work on the Salesforce1 App for more details: https://devinthecloud.wordpress.com/2015/10/23/winter-16-the-curious-incident-of-the-chart-in-the-form-tag/

I would like to appreciated the help, If this can be fixed as earlier; will help my app to release with c3js.

ajagnanan commented 9 years ago

+1 on this, we did try removing the apex:form tag also, but no luck. The charts are rendered in a component, not sure if thats a reason too.

aendra-rininsland commented 8 years ago

I have honestly no experience with anything Salesforce or Visualforce, though seems like there's been some investigation at here. Seems the issue is that Salesforce includes Sizzle globally, which D3 picks up and makes it choke. It's really more a D3 + Sizzle issue than anything.

aendra-rininsland commented 8 years ago

If one of y'all could create a test case in a jsFiddle or something, that would help everyone tremendously.

If the issue is due to Sizzle as mentioned in #1189, this test case suffices. It's weird, D3 has had support for Sizzle since 2011, so bizarre this is the first time it's come up. I misunderstood what the second select box in "Frameworks and extensions" did — it was putting the C3 code before the element, which causes it to fail.

Here's an updated test case, and it seems the problem is replicable as per the devinthecloud post.

aendra-rininsland commented 8 years ago

Okay, more investigation. It seems if you remove the clip-path on the main .c3-chart object, all the lines suddenly reappear... Diffing the clip-path between Sizzle and non-, the latter has width and height whereas the former does not. So therefore, the issue is with how Sizzle is creating the dimensions of the main clip path.

I've already wasted half a day on this and don't have any more time to fix Salesforce's problem of including Sizzle globally. If somebody is willing to investigate further and write a PR, I'd be grateful.

JeetAtGitHub commented 8 years ago

I appreciate your help. Thanks for your investigation and support towards this. I will try to find out the solution and update the PR.

JeetAtGitHub commented 8 years ago

here is my work around, it could be a hack,but making this as the solution for the time being. first of all thanks to @aendrew for showing lights into this issue. also to @impatient ( #1189 ).

which is causing blank graphs. I was trying to dig into the c3js library codes, but unable to find the "rect" formation section. thought of to update above with width and height after the DOM loads. then it worked for me. :smile: Just add these few lines on your page: window.onload = function () { $(document).find('svg').each(function(){ var svgHeight = $(this).attr("height"); var svgWidth = $(this).attr("width");
$(this).find("rect").each( function() { $(this).attr('width',svgHeight).attr('height',svgHeight); return false;}); }); }; This worked for me. Please comment if it worked for you. if anyone can fix it at the library side will be great !!!