Results 1 to 3 of 3

Thread: Chart SVG not working with prototype/scriptaculous

  1. #1
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    23
    Answers
    1

    Default Chart SVG not working with prototype/scriptaculous

    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:
    Screen shot 2012-06-25 at 11.09.19 AM.jpg
    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.
    Screen shot 2012-06-25 at 11.38.23 AM.jpg

    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.

  2. #2
    Sencha Premium User
    Join Date
    Nov 2010
    Location
    Chicago
    Posts
    2,339
    Answers
    20

    Default

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

    http://perfectionkills.com/whats-wro...nding-the-dom/

  3. #3
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    23
    Answers
    1

    Default Issue Resolved

    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.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •