5 ms·

RaphaëlJS — A JavaScript library for drawing, using SVG and VML

64 points by jeff18 17y ago

diN0bot 17y ago
i like raphaeljs. i'm right now hacking on some graphs and wondering if i should merge some of the demo's from raphaeljs's homepage into a graphing library or not... i'm on iteration 2 after static google code api charts, so a little library building could be ok. normally i'd shoot to reuse a js library, eg flot, for an iteration 2 hack, but some of this work may be useful for my startup... i found this jquery+raphael simple graphing library: http://github.com/benaskins/simplegraph http://github.com/benaskins/simplegraph it's definitely simple and...not pretty, though that might be easily tweakable. could be a good starting place. Prototype+Raphaeljs http://github.com/alexyoung/ico http://github.com/alexyoung/ico has some nice screenshots Prototype+raphaeljs library under "heavy pre-alpha" development, help desirable: http://github.com/savetheclocktower/krang http://github.com/savetheclocktower/krang
mahmud 17y ago
Raphael replaced flash for us. Nice little thing.
ddispaltro 17y ago
They are beginning to release some charting api built on top of raphael here http://g.raphaeljs.com/ http://g.raphaeljs.com/. The project is at this url http://github.com/DmitryBaranovskiy/g.raphael http://github.com/DmitryBaranovskiy/g.raphael
- diN0bot 17y ago
  thanks for the heads up!! i'm mucking with the code now. edit: i had to patch uses of this.raphael.is(obj, "array") with my own isArray function, since the raphael object doesn't have an is property. i was using the latest raphael.js in the github repo. probably the g.raphael repo is out of synch. anyway, i got the demo graphs on test2.html working. the look ok, but clearly pre-alpha. very little features, definitely rough. i can't wait to see where this goes, though. i tried a quick hack using one of the hard coded demos from the raphael demo page. dang. it's late. i'm not sure how far i should persue this. time to sleep on it.... it's so hard to escape the pull of pretty AND fast graphs....
  - ddispaltro 17y ago
    Dmitry Baranovskiy is the guy who wrote the http://raphaeljs.com/analytics.html http://raphaeljs.com/analytics.html page too.
    - diN0bot 17y ago
      i was hacking on http://raphaeljs.com/chart.html http://raphaeljs.com/chart.html first because the animation is just so beautiful. definitely got me digging into the SVG path specs http://www.w3.org/TR/SVG/paths.html#PathData http://www.w3.org/TR/SVG/paths.html#PathData but man is that code a rats nest. i just had a look at analytics.html and it is a breath of good design. i really want analytics and chart demos, plus http://raphaeljs.com/github/impact.html http://raphaeljs.com/github/impact.html to be part of g.raphael.
  - ddispaltro 17y ago
    I just checked, make sure and use raphael 1.0 rc.
sh1mmer 17y ago
The developer, Dmitry, is a nice guy and pretty responsive on Twitter to questions about Raphaël.
sunkencity 17y ago
Looks really good! This could be really useful. I've been looking for something to replace openflashchart, but I would ideally like something with stacked bar charts. Maybe there's a charting engine written on top of this somewhere (or that could be written).
Tichy 17y ago
It looks great, but is browser support sufficient? I don't care about IE5 that much, but has everybody upgraded to Firefox 3 yet?
conesus 17y ago
Thanks jeff18 for submitting this. I am attending the SVG Open 2009 conference in a couple weeks to present a paper and a workshop on RaphaëlJS. As a quick intro, Raphaël can be used to create rich interactive graphics, generating vector elements that are native to the browser and the DOM. Native DOM elements are exposed to Javascript, allowing for them to be used in the same manner as any other HTML element. Raphaël can attach Javascript handlers, events, animations, and other features native to Javascript to SVG/VML elements created in Raphaël. Raphaël works in IE6+, FF3+, Safari 3+, and Opera 9.5+. The presentation and paper will be available on the SVG Open website (as soon as I finish it): http://www.svgopen.org/2009/registration.php?section=abstracts_and_proceedings#paper_20 http://www.svgopen.org/2009/registration.php?section=abstrac...
igrekel 17y ago
Very very nice, it seems to offer more capabilities than using the javascript canvas facilities (dashed or dotted lines for example) plus the fact that the graphic elements are in a DOM structure makes it easier to update existing graphics rather than having to redraw everything. Its now on my todo list to experiment with it.

64 points by jeff18 17y ago

i like raphaeljs. i'm right now hacking on some graphs and wondering if i should merge some of the demo's from raphaeljs's homepage into a graphing library or not... i'm on iteration 2 after static google code api charts, so a little library building could be ok. normally i'd shoot to reuse a js library, eg flot, for an iteration 2 hack, but some of this work may be useful for my startup... i found this jquery+raphael simple graphing library: http://github.com/benaskins/simplegraph http://github.com/benaskins/simplegraph it's definitely simple and...not pretty, though that might be easily tweakable. could be a good starting place. Prototype+Raphaeljs http://github.com/alexyoung/ico http://github.com/alexyoung/ico has some nice screenshots Prototype+raphaeljs library under "heavy pre-alpha" development, help desirable: http://github.com/savetheclocktower/krang http://github.com/savetheclocktower/krang

mahmud 17y ago

Raphael replaced flash for us. Nice little thing.

ddispaltro 17y ago

They are beginning to release some charting api built on top of raphael here http://g.raphaeljs.com/ http://g.raphaeljs.com/. The project is at this url http://github.com/DmitryBaranovskiy/g.raphael http://github.com/DmitryBaranovskiy/g.raphael

diN0bot 17y ago
thanks for the heads up!! i'm mucking with the code now. edit: i had to patch uses of this.raphael.is(obj, "array") with my own isArray function, since the raphael object doesn't have an is property. i was using the latest raphael.js in the github repo. probably the g.raphael repo is out of synch. anyway, i got the demo graphs on test2.html working. the look ok, but clearly pre-alpha. very little features, definitely rough. i can't wait to see where this goes, though. i tried a quick hack using one of the hard coded demos from the raphael demo page. dang. it's late. i'm not sure how far i should persue this. time to sleep on it.... it's so hard to escape the pull of pretty AND fast graphs....
- ddispaltro 17y ago
  Dmitry Baranovskiy is the guy who wrote the http://raphaeljs.com/analytics.html http://raphaeljs.com/analytics.html page too.
  - diN0bot 17y ago
    i was hacking on http://raphaeljs.com/chart.html http://raphaeljs.com/chart.html first because the animation is just so beautiful. definitely got me digging into the SVG path specs http://www.w3.org/TR/SVG/paths.html#PathData http://www.w3.org/TR/SVG/paths.html#PathData but man is that code a rats nest. i just had a look at analytics.html and it is a breath of good design. i really want analytics and chart demos, plus http://raphaeljs.com/github/impact.html http://raphaeljs.com/github/impact.html to be part of g.raphael.
- ddispaltro 17y ago
  I just checked, make sure and use raphael 1.0 rc.

sh1mmer 17y ago

The developer, Dmitry, is a nice guy and pretty responsive on Twitter to questions about Raphaël.

sunkencity 17y ago

Looks really good! This could be really useful. I've been looking for something to replace openflashchart, but I would ideally like something with stacked bar charts. Maybe there's a charting engine written on top of this somewhere (or that could be written).

Tichy 17y ago

It looks great, but is browser support sufficient? I don't care about IE5 that much, but has everybody upgraded to Firefox 3 yet?

conesus 17y ago

Thanks jeff18 for submitting this. I am attending the SVG Open 2009 conference in a couple weeks to present a paper and a workshop on RaphaëlJS. As a quick intro, Raphaël can be used to create rich interactive graphics, generating vector elements that are native to the browser and the DOM. Native DOM elements are exposed to Javascript, allowing for them to be used in the same manner as any other HTML element. Raphaël can attach Javascript handlers, events, animations, and other features native to Javascript to SVG/VML elements created in Raphaël. Raphaël works in IE6+, FF3+, Safari 3+, and Opera 9.5+. The presentation and paper will be available on the SVG Open website (as soon as I finish it): http://www.svgopen.org/2009/registration.php?section=abstracts_and_proceedings#paper_20 http://www.svgopen.org/2009/registration.php?section=abstrac...

igrekel 17y ago

Very very nice, it seems to offer more capabilities than using the javascript canvas facilities (dashed or dotted lines for example) plus the fact that the graphic elements are in a DOM structure makes it easier to update existing graphics rather than having to redraw everything. Its now on my todo list to experiment with it.