laboratory

[ , , ]
Project type
jQuery plugin
Original post
jQuery Inline Help Plugin with JSON
Posted in laboratory as , ,
Date: Aug 18, 2011
No comments

Experiment with Simple Inline Bar Charts – Now with Drop Shadows (jQuery Plugin)

In a meeting a few days ago, the subject of visual effects on data visualization came up (pause to accept just how nerdy that is).

Scale with drop shadow

My studies say that the more effected charts and graphs are, the harder they are to read. My colleague felt otherwise. I showed him my experiment for simple bar charts with jQuery. He preferred a stronger effect than I. He said he like a drop shadows on bar graphs. I think they’re an eye sore.

So I’ve updated the experiment (originally called “inline percentage scales“) so we can now play around with the level of drop shadowing.

Here’s the JavaScript for version 0.0.2:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

/* 
 
jQuery measurement unit switcher 
by Weszt Hart
 
*/
(function ($) {
    $.fn.hd_percentage_graph = function (options) {
 
        var defaults = {
            bevel_opacity: 45,
            shadow_opacity: 45
        };
 
        var options = $.extend(defaults, options);
 
        return this.each(function () {
 
            $('.hd-percentage-scale').each(function () {
 
                var percentage = $(this).attr('rel');
                var structure = "<div class='scale-container'><div class='scale'><div class='grad'></div></div><div class='bevel b-bottom'></div><div class='bevel b-left'></div><div class='bevel b-right'></div><div class='bevel b-top'></div></div><div class='dropshadow'><div class='main'></div><div class='top'></div><div class='left'></div></div>";
                var bevelLevel = options.bevel_opacity / 100;
                var shadowLevel = options.shadow_opacity / 100;
 
                $(this).append(structure);
 
                // set the effect levels
                $('.bevel').css('opacity', bevelLevel);
                $('.grad').css('opacity', bevelLevel);
                $('.dropshadow').css('opacity', shadowLevel);
 
                // Let's scale up from the left
                $('.scale', this).css('width:0');
 
                $('.scale', this).animate({
                    width: percentage
                }, 500, function () {
                    // Animation complete.
                });
            });
        });
    };
})(jQuery);

Here’s the CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

/* -----------------------------------------------
 
Inline percentage scale
an experiment by Weszt @ Hanami Design 
weszt@hanamidesign.com
 
 -----------------------------------------------*/
 
/* wrapper */
.hd-percentage-scale {display:inline-block;min-width:100px;position:relative;}
.hd-percentage-scale .scale-container {background:#e8e8e8;height:18px;min-width:100px;margin:0 3px 4px 0;position:relative;z-index:5}
	.hd-percentage-scale .scale-container .scale {height:18px;width:0;position:relative;z-index:2}
	.hd-percentage-scale.positive .scale-container .scale {background:#5cbd52;}
	.hd-percentage-scale.negative .scale-container .scale {background:#ff4343;}
	.hd-percentage-scale.caution .scale-container .scale {background:#ffd800;}
		.hd-percentage-scale .scale-container .scale .grad {background:url(../../../images/hd-ps-grad.png) 0 0 repeat-x;height:18px;width:100%;}
 
 
	.hd-percentage-scale .scale-container .bevel {position:absolute;z-index:3;}
	.hd-percentage-scale .scale-container .bevel.b-top {background:#000;height:1px;left:1px;top:0px;right:1px;}
	.hd-percentage-scale .scale-container .bevel.b-left {background:#000;bottom:1px;left:0px;top:0px;width:1px;}
	.hd-percentage-scale .scale-container .bevel.b-right {background:#ededed;right:0px;top:0px;width:1px;}
	.hd-percentage-scale .scale-container .bevel.b-bottom {background:#ededed;height:1px;left:1px;bottom:0px;right:1px;}
 
	.hd-percentage-scale .dropshadow {bottom:0;left:0;position:absolute;right:0;top:0;z-index:4}
		.hd-percentage-scale .dropshadow .main,
		.hd-percentage-scale .dropshadow .top,
		.hd-percentage-scale .dropshadow .left {background-image:url(../../../images/hd-scale-dropshadow.png);background-repeat:no-repeat;position:absolute;}
		.hd-percentage-scale .dropshadow .main {background-position:100% 100%;bottom:0;left:6px;right:0;top:6px;}
		.hd-percentage-scale .dropshadow .top {background-position:100% 0;height:6px;right:0;top:0px;width:8px;}	
		.hd-percentage-scale .dropshadow .left {background-position:0 100%;height:8px;left:0;bottom:0px;width:6px;}

View experiment

Related Posts:

0

This entry was posted on Thursday, August 18th, 2011 at 3:54 pm and is filed under laboratory . You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply