fusioncharts/redraphael

JavaScript Graphics library built on top of raphaeljs to enhance rendering graphics on the browser.

RedRaphael - A JavaScript graphics library on steroids!

Install from npm

npm install redraphael

Draw a basic rectangle using RedRaphael

var RedRaphael = require('redraphael');

RedRaphael(10, 10, 600, 400, function () {
    var paper = window.pap = this;

    // Draw a red rectangle with red fill color.
    rect = paper.rect({
    	x: 0,
    	y: 0,
    	width: 500,
    	height: 200
    })
    .attr({
    	fill: '#FF0000'
    });
});

Usage

RedRaphael is a fork of Raphael with a number of added features and slightly changed development philosophy. The best place to start is the API and usage docuentation.

To learn how to use RedRaphael visit documentation page

RedRaphael specific features

Here is a brief overview of added benefits of using RedRaphael.

Group

Creating a RedRaphael group

var mygroup = paper.group([optional_group_name]);

Adding elements to a group

var myrect = paper.rect(x, y, width, height, mygroup);

NOTE: Irrespective of the number of arguments needed to be passed to the Element construtor,
passing the group element as the last argument will ensure that the element gets added to the group.
So the following are all valid ways of adding elements to groups.

var myrect = paper.rect(mygroup);

var myrect = paper.rect(x, y, mygroup);

You can also add an existing element to a group using the appendChild method.

var mycircle = paper.circle(x, y, radius); // Added directly to the paper

mygroup.appendChild(mycircle);

Groups come in especially handy when you have to perform transformations on the collection as a whole.

Followers & Stalkers

Any element in RedRaphael can be converted into a follower element (or stalker element) by invoking the follow method.

element.follow(<target_element>, [supervisor_function], ['before' || 'after']);

The supervisor function, when provided, governs how the target element's attributes control the attributes of the follower element. The supervisor function is invoked whenever the attributes of the target element are changed using the element.attr method.

The third argument, when provided will make the follower element position the itself w.r.t to the target element based on the value of the parameter. If the target element is now moved around the DOM tree using Raphael methods insertBefore or insertAfter etc, the follower (now a stalker) will also move along with it.

Check out a demo here

Custom Attributes

With RedRaphaelel, custom attributes can be added per element using element.ca object.

var rectEl = paper.rect(x, y, width, height);

rectEl.ca.borderWidth = function (value) {
	this.attr('stroke-width', value);

	// Returning false will prevent the attribute from being processed
	// any further by the element.attr method
	return false;
}

// Using the custom attributes
rectEl.attr('borderWidth', '5');

Note: The original Raphael way of adding custom attributes is also supported.

Raphael.define

RedRaphel has encapsulated all the ways of extending the framework in the define API.

Raphael.define(
	name,
	initializing_funciton,
	custom_attributes,
	element_specific_methods,
	pre_defined_eventlisteners
);

Raphael.define({
    name: 'componentName',
    componentName: initializing_funciton,
    ca: { /* custom_attributes */ },
    fn: { /* element_specific_methods */ },
    e: { /* pre_defined_eventlisteners */ },
    data: { /* element_specific_data */ }
});

See it in action

Undocumented features and improvements

• array as multi-line text
• directly pass attr object during element construction
• Support for alpha on every gradient stop in SVG and support for first and last alpha in VML
• Support for radial gradient on every shape and support for gradient radius using xr(fx,fy,r,cx,cy,unit)
• Suport for linear gradient options angle(units,spread)
• Support for shape-rendering attribute
• R.cispBound amd Element.crisp for avoiding sub-pixel blurring
• Global mouseUp tracking using el.mouseup(fn, scope, true);
• Support for customizable dash-style
• Support for attribute key in attr.* events
• Support for Raphael.ca for common customAttributes across papers
• Support for text-bound: [stroke, fill, stroke-width, padding, corner-radius, dash-style] on texts
• Support for opacity in fill color (rgba, hsla, etc) for elements
• Support for visibility on elements via attr
• Support for element rotation via rotation attr
• Support for vertical-align attr on text

Guidelines for contribution

Fork and send PR!

redraphael's Issues

Clear elements of group

Feature suggestion

Group.clear()
A function on group to clear the elements of the group similar to set.clear present in Raphael.js

Extend support for default easing animations for paper element

Currently there is support for only 'linear' easing animation for the paper element, which remains hardcoded in raphael.core.js file as:
// For now it supports only 'linear' animation style
effect = 'linear';

But Raphael provides a list of default easing formulas for animating the elements. A beautiful illustration of them is shown here.

So, in order to have a sync in animation with other elements contained in the paper, paper element should also be supported with the default easing animation formulas namely:

• “linear”
• “<” or “easeIn” or “ease-in”
• “>” or “easeOut” or “ease-out”
• “<>” or “easeInOut” or “ease-in-out”
• “backIn” or “back-in”
• “backOut” or “back-out”
• “elastic”
• “bounce”

Applying attr for the non-availableAnim attributes

In redraphael, we have a list of availableAnimAttrs e.g. "stroke-opacity", ""stroke-width", etc. Apart from these other attributes are not even applied if asked to animate.

To illustrate the fact, say elem is the concerned element,

elem.animate({ path: <Array>, 'stroke-opacity': <Number>, 'stroke-dasharray': <Array>, 'stroke-linecap': <String> }, <animDuration>)

As path and 'stroke-opacity' are animatable or to say at present, we have a support for them, gets applied with an animation but for the other two attributes(namely 'stroke-dasharray' and 'stroke-linecap') do not even get applied as:

elem.attr({ 'stroke-dasharray': <Array>, 'stroke-linecap': <String> })

That is where I suggest some improvement. We do not have code for supporting animation of these attributes, thats fine, but if an user gives it should at least get applied.

The release/1.1.12 lacks tag and GitHub release

I was trying to find the tag for the latest 1.1.12 release, but it seems that the tag was not pushed.

Update grunt script to output svg-only package

The target is to have raphael-svg.js and raphael-svg-min.js with no VML code during compilation and minification of scripts.

Followers not in sync with the leader's updates.

Create a text, e.g.
t = paper.text().attr({x:100,y:100, text: "Ayan", 'text-bound': ["#ff0000","#00ff00",2,5,10]});

Now keep on applying for a repeated times

t.attr({transform: 't10,10'});

After some transformations, text although remains intact, the bounding-box(i.e. the text-bound) gets shifted with no capping.

gradient element issue in safari 5.0.3

Gradient element ids with capital letters makes the chart black in Safari (MAC) 5.0.3

getBBox on a group returns all attributes as NaN

The group has elements inside it and when getBBox is called it returns all NaNs while doing the same thing on the actual svg node returns correct result.

`tuneText` does not utilise `getComputedStyle` for `line-height`

The tuneText function for SVG and (equivalent for VML) utilises getComputedStyle to procure effective font-size of a text, but does not do the same to determine the effective line-height. This is counter productive when using CSS to improve rendering performance of text elements.