Graphs animations

[GoogleCodeExporter]

Hey Guys,

Animation would be a good selling point for this charting solution so I started 
messing around with the code and managed to create a few animations for the 
graphs : 2 for the pie chart and one for each other graph type.

The code is in no way stable or optimized but I think it would be a good 
starting point for this feature. Basically, I figured out all the maths.

Original issue reported on code.google.com by Laurent....@gmail.com on 22 Sep 2010 at 6:24

Attachments:

• Visualize_animation.zip

[GoogleCodeExporter]

It looks nice on my Win7 64bit with Firefox 3.6 and Chrome. :)

BTW: I think You could write some quick and short explanation to easily 
understand the differences with the original package. You packed all the files 
together so I must check all the differences to understand how it works :-\

Original comment by mr.tee...@gmail.com on 30 Sep 2010 at 2:44

[GoogleCodeExporter]

Its still full of bug and the original code is not perfectly suited for 
animations so maybe it would require a new version. Anyways, basically my 
changes are in jquery.Visualize.js. Inside the charts class, I create a sub 
class called animations where i store the code for the animation for each graph 
type. I created a jquery event called visualize_animate that is trigger by a 
timer every 1/100th of a second. 

To control the animation there are two properties, animSpeed (the time it takes 
to animated it) and the animCount which is the progress of the animation. Each 
animation does calculation with these parameter to draw each "frame".

The biggest bug is that when trying to animate two charts of the same type, it 
draws 4 graphs instead of two. I think the bug is cause by the inability to 
find a specific canvas on the page so it draws on all of them.

Hope this helps. Don't hesitate to ask more questions.

Original comment by Laurent....@gmail.com on 30 Sep 2010 at 3:54

[GoogleCodeExporter]

Also, you can see a sample animation for each graph types by changing the 
comments in the following section from charts-eng.html:

<script type="text/javascript">
    /* <![CDATA[ */
        var params = {
            charts:{chart : encodeURIComponent('[{selector: "#graphme", type: "pie", height:"400px", width:"500px"}]')}
            //charts:{chart : encodeURIComponent('[{selector: "#graphme", type: "line", height:"400px", width:"500px"}]')}
            //charts:{chart : encodeURIComponent('[{selector: "#graphme", type: "area", height:"400px", width:"500px"}]')}
            //charts:{chart : encodeURIComponent('[{selector: "#graphme", type: "bar", height:"400px", width:"500px"}]')}
        };
        PE.progress(params);
    /* ]]> */
    </script>

Original comment by Laurent....@gmail.com on 30 Sep 2010 at 7:48

[GoogleCodeExporter]

Thanks, I've found the sample animations.
I made a horizontal chart (range - 
http://code.google.com/p/dwpe/issues/detail?id=41 ) and during that I also 
found out that a lot of things are not optimal for expanding the charting. I 
think the best should be a charting framework and separate modules in separate 
files as a chart type.
Also I made a 'strokeLine()' function that saves a lot of lines in the code and 
thus making it more readable. (Altough I had no experience with canvas before 
it was clear that it should be done - there were a lot of repetitious commands 
with variable parameters...)

Thanks, when I have some time I'll check Your code more detailed. :)

Original comment by mr.tee...@gmail.com on 30 Sep 2010 at 8:54

[GoogleCodeExporter]

Hey,

Btw, I am working for the Government of Canada and we are working on a complete 
Web Toolkit and developing plugins (such as Charts) is part of this project. 
Would you like our assitance in developing this framework and make it better?

You can find more details about our project here:
http://tbs-sct.ircan.gc.ca/projects/gcwwwtemplates?lang=eng

Original comment by Laurent....@gmail.com on 1 Oct 2010 at 7:18