To draw a simple rectangle making use of Raphaël is much more comfortable than building the same rectangle in XML. The library can be included either from the disc or from a CDN such as CloudFlare, as shown in the following code:
<html> <body>…</body> <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script> </html>
We can draw any shape in the following manner:
function drawRectangle()
{
var paper = Raphael("visualization", 320, 200);
paper.rect(50, 20, 50, 150);
}This code finds the element with an ID of visualization and appends an SVG to it with a dimension of 320 x 200 pixels. It then inserts a new rectangle at (50, 20), with width 50 and height 150.
If we wanted to create a simple column graph with Raphaël, it would not be difficult. Let's give it a shot. The first thing we'll need is some data. We can use a JavaScript array for now, but in the real world this information could be retrieved from a web service...