setTimeout(start, 1000);
		function start () {
                var r = Raphael("grapher"),

                fin = function () {
                    this.flag = r.g.popup(this.bar.x, this.bar.y, this.bar.value || "0").insertBefore(this);
                },
                fout = function () {
                    this.flag.animate({opacity: 0}, 300, function () {this.remove();});

                },
                data1 = [[55, 20, 13, 32, 5, 11, 22, 10], [10, 42, 21, 5, 32, 13, 20, 55], [12, 20, 30, 12, 44, 50, 32, 46]]
				var box4 = r.rect(150, -50, 200, 50, 10).attr({fill: "90-#E8DDCB-#CDB380", stroke: "#E8DDCB"});
                var text4 = r.g.text(250, 30, "Playing with gRaphael Charts").attr({fill:"#333", opacity:0});
				text4.animate({opacity:10}, 15000);
				
				
				data2 = [240, 200, 160, 120, 80, 40, 6]
				data3 = ["0", "10", "20", "30", "40", "50", "60"]
				var text0 = r.g.text(7, data2[0], data3[0]).attr({fill:"#D89145"});
				r.g.text(8, data2[1], data3[1]).attr({fill:"#D89145"});
				r.g.text(8, data2[2], data3[2]).attr({fill:"#D89145"});
				r.g.text(8, data2[3], data3[3]).attr({fill:"#D89145"});
				r.g.text(8, data2[4], data3[4]).attr({fill:"#D89145"});
				r.g.text(8, data2[5], data3[5]).attr({fill:"#D89145"});
				r.g.text(8, data2[6], data3[6]).attr({fill:"#D89145"});
				
                var bc = r.g.barchart(10, 10, 500, 250, data1).hover(fin, fout);

				bc.bars[0].attr({fill: "90-#E8DDCB-#CDB380", stroke: "#E8DDCB"});
				bc.bars[1].attr({fill: "90-#036564-#033649", stroke: "#036564"});
				bc.bars[2].attr({fill: "90-#AE906F-#D89145", stroke: "#D89145"});
				var line1 = r.path("M 17 0 L 17 240");
				var line2 = r.path("M 18 240 L 500 240");
				line1.attr({stroke:"#D89145"});
				line2.attr({stroke:"#D89145"});
				
				var box1 = r.rect(10, 400, 20, 20).attr({fill: "90-#E8DDCB-#CDB380", stroke: "#E8DDCB"});
                r.g.text(65, 310, "Attribute 1").attr({fill: "#CDB380"});
				
				var box2 = r.rect(130, 400, 20, 20).attr({fill: "90-#036564-#033649", stroke: "#036564"});
				r.g.text(185, 310, "Attribute 2").attr({fill: "#036564"});
				box2.animate({x:130, y:300}, 3000, "elastic");
				
				var box3 = r.rect(250, 400, 20, 20).attr({fill: "90-#AE906F-#D89145", stroke: "#D89145"});
				r.g.text(305, 310, "Attribute 3").attr({fill: "#D89145"});
				
				setTimeout(jumper, 1000);
				
				function jumper() {
				box1.animate({x:10, y:300}, 3000, "elastic");
				box2.animate({x:130, y:300}, 3000, "elastic");
				box3.animate({x:250, y:300}, 3000, "elastic");
				box4.animate({x:150, y:5}, 3000, "elastic");
				
			};		
            };