CODEWITHSUNDEEP
javascriptjqueryraphaelconflictgraphael
Klemola
Klemola

Reputation: 91

gRaphael - animating line chart fails

I am running into a problem with gRaphael javascript line chart library.

I am building a line chart from a CSV file that has five columns (# of minutes, time, waiting time, in treatment, closed, in location).

Previously I have been able to draw the full chart without animation. It correctly had all four lines etc.

Now my code fails on the animation function. Here is the error:

Uncaught TypeError: Object # has no method 'animate'

I assume that jQuery is somehow messing with animate function, and trying to take the reins of it. 

        function animateChart(newX, newW, newInT, newC, newInL){
            var chart2 = paper.linechart(
                20, 20, // padding
                newX.length, 400, // dimensions
                newX, [newW, newInT, newC, newInL] // values
            );

            for (i = 0; i < chart.lines.length; i++){
                elem = chart.lines[i][0];
                elem.animate({ path: chart2.lines[i][0].getAttribute("d") }, 200);
            }

            chart2.remove();
        }

Full code:

http://pastebin.com/YmvkrmQ3

I have the following libraries loaded, in order:

  1. raphael-min.js
  2. g.raphael-min.js
  3. g.line.min.js
  4. jquery.js

Thanks in advance for any help.

UPDATE: The problem is in the animate method. Even though I am calling the method on a path element, I get the error. I still don't know why Raphael doesn't recognize the path element as path element.

I tried disabling jQuery (and replacing it's ajax function with vanilla javascript), but it didn't help.

Upvotes: 4

Views: 940

Answers (1)

Plynx
Plynx

Reputation: 11461

You probably have an SVG path element and not a Raphael path element. It's probably the [0] at the end of elem = chart.lines[i][0];.

Upvotes: 3

Related Questions