From Zenoss Wiki
This is the approved revision of this page, as well as being the most recent.
Jump to: navigation, search
Daniel Robbins
Current Maintainer(s)
Daniel Robbins
Zenoss, Inc.
GNU General Public License, Version 2, or later
ZenPack name
More Information
GitHub page/HomePage
Git sources (for cloning)

RaphaelJS ZenPack

This ZenPack provides the RaphaelJS SVG/VML JavaScript rendering framework, which can be used by other ZenPacks.


The ZenPack Catalog has moved to its new home at https://www.zenoss.com/product/zenpacks as of January 17, 2017. The following information may be out of date, and this page will eventually be removed.


This is an Open Source ZenPack developed by Zenoss, Inc. Enterprise support for this ZenPack is available to commercial customers with an active subscription.


Version 2.1.0- Download
Compatible with Zenoss Core 3.2.x, Zenoss Core 4.2.x, Zenoss Resource Manager 4.1.x, Zenoss Resource Manager 4.2.x
Incompatible with Zenoss Core 2.5.x


The RaphaelJS ZenPack brings VML/SVG (Scalable Vector Graphics) rendering and animation capabilities to Zenoss. From the Raphael Web Site:

Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.

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’s goal is to provide an adapter that will make drawing vector art compatible cross-browser and easy.

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

Why RaphaelJS?

The primary benefit of using Raphael over pure SVG is that Microsoft Internet Explorer started supporting SVG in Internet Explorer 9. If you want to maintain compatibility with IE8 and earlier, you cannot use SVG.

Raphael allows you to deliver rich vector-based experiences that are compatible with IE6 and later by providing a JavaScript API that will target SVG on SVG-compatible browsers such as Firefox, Chrome and Safari, while using Microsoft's VML to target IE8 and earlier.


To use RaphaelJS for rendering in Zenoss, add the following JavaScript code to your ZenPack:

Ext.ux.Raphael = Ext.extend(Ext.BoxComponent, {
    onRender: function(ct) {
        var p = this.paper = Raphael(ct.dom), v;
        this.el = Ext.get(p.canvas);
//      Export all methods from this paper object which will not override our native
//      methods like setSize etc.
        for (var prop in p) {
            v = p[prop];
            if (!this[prop] && Ext.isFunction(v)) {
                this[prop] = v.createDelegate(p);
//      We always cache our size
        this.cacheSizes = true;
    getWidth: function() {
        return this.lastSize.width;
    getHeight: function() {
        return this.lastSize.height;
    onResize: function(w, h) {
        this.paper.setSize(w, h);
Ext.reg('raphael', Ext.ux.Raphael);
// end of file

This code extends Ext.BoxComponent so that it displays a Raphael VML/SVG rendering area that is the size of the component.

You will now be able to define new Ext.ux.Raphael components, which provide Raphael rendering capabilities within Zenoss, via the component's paper property:

var r = new Ext.ux.Raphael();
var myrect = r.paper.rect(0,0,r.getWidth(),r.getHeight()/2).attr({"fill" : "90-#000000:0-#5100ad:99.70238095238095"});



Normal Installation (packaged egg)

  1. Download the appropriate egg file for the version of Zenoss you are running.
  2. Ensure you are logged in as the zenoss user:
    $ sudo su - zenoss
  3. Install the ZenPack:
    $ zenpack --install ZenPacks.zenoss.RaphaelJS-*.egg
  4. Restart these services:
    $ zenoss restart

Developer Mode Installation

In order to do a development mode installation you will want to clone the existing git repository, and then use the --link flag with the zenpack command:

  1. Ensure you are logged in as the zenoss user:
    $ sudo su - zenoss
  2. Start by cloning the upstream repository:
    $ git clone git://github.com/zenoss/ZenPacks.zenoss.RaphaelJS.git
  3. Next, perform the installation:
    $ zenpack --link --install ZenPacks.zenoss.RaphaelJS
  4. Finally, restart these serivices:
    $ zenoss restart


Purplemarker.png New: Don't forget to add yourself to the Zenoss User Map!

blog comments powered by Disqus