How to shorten the JavaScript in Raphaël?

Question

The Rapheal script seems to be too long. Is there any option to make it shorter ?

I think loop can make this script smaller. Does anyone have good suggestions or advice?

http://jsfiddle.net/sweetmaanu/Ta8mR/5/

Here is the long script :

var barTitle = { "font-size": 9};
var svgWidth = 480;
var svgHeight = 300;
var safety02 = new Raphael('safety02-mobile', 'svgWidth', 'svgHeight');
safety02.setViewBox(-30, 0, svgWidth, svgHeight, false); //false
safety02.setSize('100%', '100%');

// Create options object that specifies the rectangle
var safetyBar1_1 = { width:30, height:150, x:60,y:50};
var safetyBar1_2 = { width:30, height:130, x:90,y:70};
var safetyBar2_1 = { width:30, height:165, x:140, y:35};
var safetyBar2_2 = { width:30, height:100, x:170, y:100};
var safetyBar3_1 = { width:30, height:130, x:220,y:70};
var safetyBar3_2 = { width:30, height:65, x:250,y:135};
var safetyBar4_1 = { width:30, height:120, x:300, y:80};
var safetyBar4_2 = { width:30, height:100, x:330, y:100};

var rect1_1 = safety02.rect(safetyBar1_1.x, 200, safetyBar1_1.width, 0).attr({fill: '#F6A01A', stroke:'#000'});
var rect1_2 = safety02.rect(safetyBar1_2.x, 200, safetyBar1_2.width, 0).attr({fill: '#CCC', stroke:'#000'});
var rect2_1 = safety02.rect(safetyBar2_1.x, 200, safetyBar2_1.width, 0).attr({fill: '#F6A01A', stroke:'#000'});
var rect2_2 = safety02.rect(safetyBar2_2.x, 200, safetyBar2_2.width, 0).attr({fill: '#CCC', stroke:'#000'});
var rect3_1 = safety02.rect(safetyBar3_1.x, 200, safetyBar3_1.width, 0).attr({fill: '#F6A01A', stroke:'#000'});
var rect3_2 = safety02.rect(safetyBar3_2.x, 200, safetyBar3_2.width, 0).attr({fill: '#CCC', stroke:'#000'});
var rect4_1 = safety02.rect(safetyBar4_1.x, 200, safetyBar4_1.width, 0).attr({fill: '#F6A01A', stroke:'#000'});
var rect4_2 = safety02.rect(safetyBar4_2.x, 200, safetyBar4_2.width, 0).attr({fill: '#CCC', stroke:'#000'});

var p1title = safety02.text(0, 110, "Percentage (%)").rotate(-90);
var unicorn = safety02.path("M400 200 H40 V10").attr({stroke: "#000","stroke-width": 1});
var s1firstBar = safety02.text(90, 210, "Headache").attr(barTitle);
var p1thirdBar = safety02.text(250, 210, "Nausea").attr(barTitle);
var p1firstBar = safety02.text(165, 210, "Diarrhoea").attr(barTitle);
var p1thirdBar = safety02.text(330, 215, "Abdminal \n pain").attr(barTitle);


var anim1_1 = Raphael.animation({y:safetyBar1_1.y,height:safetyBar1_1.height}, 2000);
var anim1_2 = Raphael.animation({y:safetyBar1_2.y,height:safetyBar1_2.height}, 2000);
var anim2_1 = Raphael.animation({y:safetyBar2_1.y,height:safetyBar2_1.height}, 1000);
var anim2_2 = Raphael.animation({y:safetyBar2_2.y,height:safetyBar2_2.height}, 1000);
var anim3_1 = Raphael.animation({y:safetyBar3_1.y,height:safetyBar3_1.height}, 2000);
var anim3_2 = Raphael.animation({y:safetyBar3_2.y,height:safetyBar3_2.height}, 2000);
var anim4_1 = Raphael.animation({y:safetyBar4_1.y,height:safetyBar4_1.height}, 1000);
var anim4_2 = Raphael.animation({y:safetyBar4_2.y,height:safetyBar4_2.height}, 1000);

rect1_1.animate(anim1_1);
rect1_2.animate(anim1_2.delay(300));
rect2_1.animate(anim2_1);
rect2_2.animate(anim2_2.delay(300));
rect3_1.animate(anim3_1);
rect3_2.animate(anim3_2.delay(300));
rect4_1.animate(anim4_1);
rect4_2.animate(anim4_2.delay(300));

$('#viewFreqFirst-big').click(function(){
    rect1_1.animate({y:80,height:120}, 1500);
    rect1_2.animate({y:100,height:100}, 1500);
    rect2_1.animate({y:105,height:95}, 1500);
    rect2_2.animate({y:115,height:85}, 1500);
    rect3_1.animate({y:140,height:60}, 1500);
    rect3_2.animate({y:160,height:40}, 1500);
    rect4_1.animate({y:120,height:80}, 1500);
    rect4_2.animate({y:140,height:60}, 1500);
});
$('#viewFreqSecond-big').click(function(){
    rect1_1.animate({y:safetyBar1_1.y,height:safetyBar1_1.height}, 1500);
    rect1_2.animate({y:safetyBar1_2.y,height:safetyBar1_2.height}, 1500);
    rect2_1.animate({y:safetyBar2_1.y,height:safetyBar2_1.height}, 1500);
    rect2_2.animate({y:safetyBar2_2.y,height:safetyBar2_2.height}, 1500);
    rect3_1.animate({y:safetyBar3_1.y,height:safetyBar3_1.height}, 1500);
    rect3_2.animate({y:safetyBar3_2.y,height:safetyBar3_2.height}, 1500);
    rect4_1.animate({y:safetyBar4_1.y,height:safetyBar4_1.height}, 1500);
    rect4_2.animate({y:safetyBar4_2.y,height:safetyBar4_2.height}, 1500);    
});

Answer 1

A naming scheme like foo3_2 suggests that you want a two-dimensional array instead:

var safetyBar1_1 = { width:30, height:150, x:60,y:50};
var safetyBar1_2 = { width:30, height:130, x:90,y:70};
var safetyBar2_1 = { width:30, height:165, x:140, y:35};
var safetyBar2_2 = { width:30, height:100, x:170, y:100};
var safetyBar3_1 = { width:30, height:130, x:220,y:70};
var safetyBar3_2 = { width:30, height:65, x:250,y:135};
var safetyBar4_1 = { width:30, height:120, x:300, y:80};
var safetyBar4_2 = { width:30, height:100, x:330, y:100};

becomes

var safetyBars = [
                   [ { width: 30, height: 150, x:  60, y:  50},
                     { width: 30, height: 130, x:  90, y:  70}],
                   [ { width: 30, height: 165, x: 140, y:  35},
                     { width: 30, height: 100, x: 170, y: 100}],
                   [ { width: 30, height: 130, x: 220, y:  70},
                     { width: 30, height:  65, x: 250, y: 135}],
                   [ { width: 30, height: 120, x: 300, y:  80},
                     { width: 30, height: 100, x: 330, y: 100}]
                 ];

(note also how the indentation of numbers was improved to increase readability. You do not have to like this indention style, I'm using it here because it is fairly compact).

Once we add further information like fill and `stroke to these records, we can change other parts of your code to loops:

var rects = []
for (var i = 0; i < safetyBars.length; i++) {
    rects[i] = [];
    for (var j = 0; j < safetyBars[i].length; j++) {
        var bar = safetyBars[i][j];
        rects[i][j] = safety02.rect(bar.x, 200, bar.width, 0).
                               attr({fill: bar.fill, stroke: bar.stroke});
    }
}

This iteration pattern is so frequent here that I would abstract it:

function map2d(in, fn) {
    var out = []
    for (var i = 0; i < in.length; i++) {
        out[i] = [];
        for (var j = 0; j < in[i].length; j++) {
            out[i][j] = fn(in[i][j]);
        }
    }
    return out;
}

var rects = map2d(safetyBars, function (bar) {
    return safety02.rect(bar.x, 200, bar.width, 0).
                    attr({fill: bar.fill, stroke: bar.stroke});
});

… and similar for all the other blocks of related code.