Wednesday, 20 May 2015

SVG with RaphaelJS - Using RaphaelJS with Other JavaScript Libraries

Welcome to this section of the weekly series SVG with RaphaelJS.

The node property is a reference to the DOM object so that you can manipulate elements in RaphaelJS using third party libraries.

In order to work with other JavaScript libraries our RaphaelJS elements must have their DOM exposed. So far we have used jQuery in our code but we haven't integrated it into RaphaelJS. In this section, we will do that.

Our template code file is given below:

$(function(){ var paper = Raphael('container', 500, 500);
Note that the first line is actually a jQuery command that lets the page load first before we do any other thing on the page.

Google Developer Tools
Google Chrome browser is in my opinion the best browser for a web developer because of its simplicity.

In order to use it, view the template code in the Google Chrome browser (I admit that I have always assumed you were using it). Hold down Ctrl + Shift and then press I on your keyboard. It will bring out the developer tools. The diagram is shown below:

The most important tab is the Console tab. It allows us to detect errors in our programs and will even inform you of the line causing the problem.

Accessing a RaphaelJS Element in the DOM
It is important to understand that SVG is part of the DOM structure. As a result, you can inspect SVG elements in the Chrome console.

In this example, I will use a circle to illustrate this concept. The circle will be given an id of circle using the Element.node method and we will use that reference to assign a click method to the circle in jQuery.

The code to do this is given below:

// Draw a circle at the center of your canvas var circle =, 250, 50);
// Set the attributes of the circle
circle.attr({ fill: "red", cursor: "pointer" }); = "circle";

Copy and paste the above code below your the var paper = Raphael('container', 500, 500); in your init.js file.

You can view the repository here.

Using Qtip
Qtip is a JavaScript library that provides tooltips on DOM elements. In order to use it, simply download it and include its CSS file in the css directory of your project and the JavaScript file in the js directory of your project.

Next call them from your index.html file. The file now looks like this:

<!DOCTYPE html> <html>
<meta charset="utf-8">
<title>RaphaelJS Template</title>
<link rel="stylesheet" href="css/default.css">
<link rel="stylesheet" href="css/jquery.qtip.css">
<script src="js/jquery.js"></script>
<script src="js/jquery.qtip.js"></script>
<script src="js/raphael.js"></script>
<script src="js/init.js"></script>
<div id="container"></div>

Note the inclusion of both the CSS and JavaScript files of qtip. In order to use qtip in our code, we access the node element of the RaphaelJS element in our code. Paste the following lines of code below code in your init.js
$(circle.node).qtip({ content: { text: 'Hello. I am in the DOM' },
style: {
background: '#000000',
color: '#ffffff',
border: { width: 6, radius: 3, color: '#ff0000' }
position: {
my: 'left center',
at: 'bottom center',
target: 'mouse',
adjust: { x: 20, y: 25 }
Save your work and check it out in the browser. Now when you mouse over the circle, it pops up a message. You can view it on my dropbox.

In this section, we have looked at how to use RaphaelJS with other JavaScript libraries. This concept will prove useful when we want to create interactive maps.

No comments:

Post a Comment