I'm currently working on my portfolio website and on the about me page I would like to display this in the form of an info-graphic (text, images/illustrations, charts etc).

I've been following this tutorial to create a diagram, with the help of Raphaël.js and everything seems to be fine, however, I am now at the stage of creating another chart, only this time in the form of a bar graph. It needs to have the same characteristics as the first (color-wise and on-hover effects) but I have no idea how to do this.

I know of gRaphaël and in those examples, you don't get the same effect and I'm finding it even harder to stylize.

I'm currently working on my portfolio website and on the about me page I would like to display this in the form of an info-graphic (text, images/illustrations, charts etc).

I've been following this tutorial to create a diagram, with the help of Raphaël.js and everything seems to be fine, however, I am now at the stage of creating another chart, only this time in the form of a bar graph. It needs to have the same characteristics as the first (color-wise and on-hover effects) but I have no idea how to do this.

I know of gRaphaël and in those examples, you don't get the same effect and I'm finding it even harder to stylize.

• javascript
• jquery
• html
• css

• To be honest a 2d bar graph is really simple you don't really need raphael for that. You can of course but maybe if you don't know where to start google charts or jquery might be easier. – Tosh Commented Sep 1, 2012 at 21:56
• You obviously didn't read the question...I am after the exact same effect only in the form of a bar graph. "It's simple" and "do a google search" isn't very helpful. – user1752759 Commented Sep 2, 2012 at 5:45
• Haha obviously I didn't. Or maybe i did. To be honest your question is to general. The only satisfying s – Tosh Commented Sep 2, 2012 at 9:30
• 1 Haha obviously I didn't. Or maybe i did. To be honest your question is to general. Raphael is quiete a big tool for somehing simple. The hover effect in the examples is really cool but it can be imitated with pure css and javascript. Since you don't know where to start, this might be easier. At the same time creating rectangles in raphael is really easy, there's a function for it. If you use this function then you can apply the same code on hover as they did with the example you referred to. – Tosh Commented Sep 2, 2012 at 9:39

1 Answer 1

Is this what you are looking for?

I've mented the script, kept it close to the original from the link you provided.

JsFiddle

(Decided to add the script here, for archival purposes and b/c Stack Overflow has been encouraging the inclusion of pertinent source.)

HTML Source used:

<div id="diagram"></div>
<div class="get">
    <div class="skill">
        <span class="text">jQuery</span>
        <input type="hidden" class="percent" value="95" />
        <input type="hidden" class="color" value="#97BE0D" />
    </div>
    <div class="skill">

        <span class="text">CSS3</span>
        <input type="hidden" class="percent" value="90" />
        <input type="hidden" class="color" value="#D84F5F" />
    </div>
    <div class="skill">
        <span class="text">HTML5</span>
        <input type="hidden" class="percent" value="80" />
        <input type="hidden" class="color" value="#88B8E6" />

    </div>
    <div class="skill">
        <span class="text">PHP</span>
        <input type="hidden" class="percent" value="53" />
        <input type="hidden" class="color" value="#BEDBE9" />
    </div>
    <div class="skill">
        <span class="text">MySQL</span>
        <input type="hidden" class="percent" value="45" />
        <input type="hidden" class="color" value="#EDEBEE" />
    </div>
</div>

Javascript:

var o = {
    init: function(){
        this.diagram();
    },
    random: function(l, u){
        return Math.floor((Math.random()*(u-l+1))+l);
    },
    diagram: function(){
        var originX = 10;
        var originY = 50;
        var barHeight = 30;
        var barMargin = 10;

        var r = Raphael('diagram', 600, 600);

        // We don't need the customAttributes, so we drop that, 
        // and replace with a simple call to rect()
        r.rect(10,10,300,barHeight,6).attr({ stroke: 'none', fill: '#193340' });
        // Similarly, we reposition the title to center
        // it with our new rectangle.
        var title = r.text(160, 25, 'Skills').attr({
            font: '20px Arial',
            fill: '#fff'
        }).toFront();

        $('.get').find('.skill').each(function(i){
            // I've added in a width field, and calculate
            // it based on turning its value to a percentage
            // of the width of the Raphael element.
            var t = $(this),
                color = t.find('.color').val(),
                value = t.find('.percent').val(),
                width = r.width * (t.find('.percent').val() *.01),
                text = t.find('.text').text();
            // create a new rectangle, providing X, Y, width, 
            // and height. Base the fill and stroke on the color
            var z = r.rect(originX, originY, width, barHeight).attr({ 'fill': color, 'stroke': color, 'stroke-width':0 });
            // update our originY to acodate shifting the next
            // bar down by the barHeight + barMargin
            originY = originY + barHeight + barMargin;

            z.mouseover(function(){
                // I added X in to animation, so that it would
                // appear to expand from the left, and the 
                // expansion would not bleed off-canvas
                this.animate({ 'x': 10, 'stroke-width': 20, opacity: .75 }, 1000, 'elastic');
                if(Raphael.type != 'VML') //solves IE problem
                    this.toFront();
                title.animate({ opacity: 0 }, 500, '>', function(){
                    this.attr({ text: text + ': ' + value + '%' }).animate({ opacity: 1 }, 500, '<');
                });
            }).mouseout(function(){
                // and here I revert back to the originX after the
                // mouse has moved on...
                this.animate({ x: originX, 'stroke-width': 0, opacity: 1 }, 1000, 'elastic');
            });
        });
    }
}

$(function(){ o.init(); });