View Full Version : Chart SVG not working with prototype/scriptaculous

25 Jun 2012, 9:51 AM
I am having a problem getting my charts to render correctly inside my institution's web template that uses prototype/scriptaculous. I've tried with both a column bar chart and a pie chart, and both are showing the same thing.

Here is a screenshot of both:
As you can see, the SVG image doesn't render any of the columns. When I inspect the image, I can see the tags that are supposed to be there, but it just didn't render. If you notice on the pie chart, it knows what colors of each of the slices should be. The numbers are light or dark depending on the color of the backdrop. It's just not rendering. Interesting...

What I am using:

Ext Designer 1.2.2
Ext Js 4.1
Firefox 13.0 / Chrome 19.0
Firebug 1.8.4
A web template that uses prototype/scriptaculous

I am primarily using Firefox, but the SVG images are generated the same way in Chrome as well. Also, the dynamic data from the stores is loaded into the charts without any problems.

When I remove the web template I am using from the equation, it renders perfectly fine.

I'm not sure if Extjs 4.1 is guaranteed to work with other frameworks, but any help with this would be nice, as I am expected to implement my institution's web templates. I couldn't seem to find anything remotely related to this problem in the forums.

25 Jun 2012, 11:54 AM
Ext JS 4.0 (and later) works well with other frameworks. I'd not be surprised if this problem is created by Prototype.

Prototype has some serious design problems (even by admission of its own developers).


2 Jul 2012, 7:05 AM
So it turns out that Prototype doesn't conflict with Ext Js 4 in the template I am using. It was the CSS that was actually causing the problem. Apparently CSS affects SVG tags as well.

The template CSS was "[hidden] {display:none}", so it was overwritten to be "[hidden] {display:inline;}". This made the invisible chart elements become visible.