Raphael.js – Javascript Vector Drawing Library

In my previous blog, I discussed the basics of Canvas and SVG. Also, I discussed about some of the libraries that are available in the market to help us work easily with these two. In this blog, I have picked Raphael.js as my focus area.

So, How did I approach Raphael.js –

Recently I was assigned a task to generate a client side bubble chart with some really advanced features. In the list below, for each point, I have put some text in brackets which describes the  technical mappings of my chart requirements.

  • weighted bubble (for circle radius hold )
  • bubble labels & connectors (for text & path drawing )
  • bubble – label connectors (for relationships )
  • drag-able labels (for dragging feature )
  • editable titles, texts & headings (for text drawing )
  • gridlines and quadrants (for line drawing )
  • colored bubbles (for circle with color attribute)
  • picture replacement of bubbles (for image rendering)
  • slanted axes (for transformations)
  • zooming/scrolling (for Re-rendering… means performance will matter)

After searching and studying a lot of charting libraries available on the web (free as well as paid), I decided to draw the chart myself (without any charting library). There were two options available to me – 1. Canvas 2. SVG. I decided to go with SVG (because of precision, user interaction, zooming, dom support, limited data, limited drawing area). [In my previous blog, I have discussed all these scenarios.]

Now the problem was that I had no previous knowledge of SVG. And so  I started looking for SVG drawing helper libraries available on the web and Rapahel came out as the best. I found Raphael’s samples very exciting and motivating. And I started building my chart using Raphael.js.

Introduction to Rapahel.js –

Raphael.js is javascript library for SVG. If I pick its introduction lines from Raphael’s website:

“Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. Raphaël [‘ræfeɪəl] uses the SVG W3C Recommendation and VML as a base for creating graphics. This means every graphical object you create is also a DOM object, so you can attach JavaScript event handlers or modify them later.”

Raphaël currently supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.

How to use Raphael –

Download and include raphael.js in your HTML page, then use the following code to get started on it:

var raphPaper = Raphael(10, 50, 320, 200);     
var circle = raphPaper.circle(50, 40, 10);
circle.attr("fill", "#f00");
circle.attr("stroke", "#fff");

The documentation provided by Raphael.js is good enough for understanding how to use its various features. You can also go through its live demo on Raphael’s website. You will find it very exciting.

I am posting the demo images of my chart here. Each and every visible element in this chart has been drawn using Raphael’s features, which ultimately turns into SVG tags in the final markup.

Bubble Chart
Fig1. – Bubble chart with x axis, y axis, quadrants, bubbles, bubble related information(dragable), connectors

Wieghted Chart

Fig 2. – Chart with pictures representing bubbles in which picture size variations represents z-Axis.
While developing the chart, specific functions of Raphael.js were used like

  • Paper.text(x, y, text)
  • Paper.rect(x, y, width, height)
  • Paper.image(src, x, y, width, height)
  • Raphael.getColor()
  • Element.toBack() & .toFront()

Once we initialize the Raphael object by:

Var raphaelObj = Raphael(self.containerHTMLElementId, 850, 600);

the following SVG tag will be generated in html –

<svg style=”left: -0.5px; top: 0.59px; overflow: hidden; position: relative;” width=”850″ height=”600″ xmlns=”http://www.w3.org/2000/svg” version=”1.1″>

If we want to add text, we will simply use text function –

chart.text(50, 50, “Title”);

It will put a text tag inside the SVG tag –

<text font-size="16px" font-weight="bold" style="line-height: normal; font-family: "Arial"; font-size: 16px; font-style: normal; font-variant: normal; font-weight: bold; font-size-adjust: none; font-stretch: normal; text-anchor: middle;" fill="#000000" stroke="none" text-anchor="middle" x="50" y="50" font="10px "Arial"">
<tspan dy="5.29">
	- Text-Title

To draw a line/path –

var svgPath = “M” + 60 + ” “ + 70 + “L” + 80 + ” “ + 70;


It will add the following path element inside SVG –

<path fill=”none” stroke=”#000000″ d=”M 60 70 L 80 70″/>

The only thing we need to make sure is that we draw the elements at correct positions. While drawing any chart like the one used above, we have to be sure about the positions and it will be possible only by mathematical calculations of pixels and values.

In my next blog, I will try to introduce you with some other popular client side libraries. Till then, happy coding!!!



Comments are closed.