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 –
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");
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.
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)
- 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!!!