canimus
12/7/2010 - 8:40 PM

## How to create a block graph to show min, max and gross values with Raphael JS library

How to create a block graph to show min, max and gross values with Raphael JS library

``````<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/raphael.js" type="text/javascript" charset="utf-8"></script>
<script src="js/g.raphael-min.js" type="text/javascript" charset="utf-8"></script>
<title>Test: SVG</title>
<style type="text/css" media="screen">
div,h5,h6,h1,h2,h3,h4 {
font-family:"Lucida Grande";
margin:0px;
padding:0px;
}
#holder {
margin-top: 20px;
width:1000px;
height:500px;
position:relative;
top: 10px;
-moz-box-shadow: 1px 1px 5px #777;
-webkit-box-shadow: 1px 1px 5px #777;
}
</style>

<script type="text/javascript" charset="utf-8">

\$(document).ready(function() {
var r = Raphael("holder", 1000, 500);
var paper = r.rect(0,0,1000,500).attr({fill: "#fff", stroke: "none"});

// This is the axis
// Y AXIS
r.path("M40 35L40 425").attr({stroke: "#999", "stroke-linecap": "round", "stroke-width": 1});

// X AXIS
r.path("M20 415L970 415").attr({stroke: "#999", "stroke-linecap": "round", "stroke-width": 1});

// This are the markers
for (var i=1,j=9; i<20; i++) {
var current_path = "M36 "+(i*20)+"L44 "+(i*20);
var current_dash = "M36 "+(i*20)+"L950 "+(i*20);
if ( (i%2) == 0) {
r.path(current_path).attr({stroke: "#999", "stroke-linecap": "round", "stroke-width": 1});
r.path(current_dash).attr({stroke: "#555", "stroke-dasharray": ["-"], "opacity": .3, "stroke-width": 1});
r.text(18,(i*20), j).attr({"font-family": "Lucida Grande", "font-size": 9});
j--;
}

}

var st = r.set();
// Draw the line of first transaction
var currentColor =  "#58aedf";

var thin1 = r.path("M60 340L60 340").attr({stroke: currentColor, "stroke-linecap": "square", "stroke-width": 1});
thin1.animate({path: "M60 220L60 340"}, 800, "linear", function() {
var thick1 = r.path("M60 260L60 280").attr({stroke: "#58aedf", "stroke-linecap": "square", "stroke-width": 1}).animate({"stroke-width": 10}, 1000, "bounce");
});

// Draw the paths covering the top
var covert1 = r.path("M55 220L65 220").attr({stroke: currentColor, "stroke-linecap": "round", "stroke-width": 2, opacity: 1});
var tx1pop = r.g.popup(60,217, "68").attr({stroke: "#aaa", gradient: "90-#ddd-#fff", "stroke-width": 0.5});
var test11 = \$(tx1pop);
test11[1].attr({fill: "#444", "font-family": "Monaco", "font-size": 8, "font-weight": "normal", stroke: "none"});
//fill: "#eee", stroke: "#555", "stroke-width": .5
tx1pop.hide();
covert1.node.onmouseover = function() {
tx1pop.show();
covert1.animate({"stroke-width": 4}, 200, "linear");
};
covert1.node.onmouseout = function() {
tx1pop.hide();
covert1.animate({"stroke-width": 2}, 200, "linear");
}

var coverb1 = r.path("M55 340L65 340").attr({stroke: currentColor, "stroke-linecap": "square", "stroke-width": 1});

// SERIES 2
var currentColor =  "#b8405b";

var thin2 = r.path("M80 280L80 310").attr({stroke: currentColor, "stroke-linecap": "square", "stroke-width": 1});
thin2.animate({path: "M80 200L80 310"}, 800, "linear", function() {
var thick2 = r.path("M80 220L80 250").attr({stroke: "#b8405b", "stroke-linecap": "square", "stroke-width": 1}).animate({"stroke-width": 10}, 1000, "bounce");
});

// Draw the paths covering the top
var covert2 = r.path("M75 200L85 200").attr({stroke: currentColor, "stroke-linecap": "square", "stroke-width": 1});
var coverb2 = r.path("M75 310L85 310").attr({stroke: currentColor, "stroke-linecap": "square", "stroke-width": 1});

});

</script>
</head>
<body>
<h2>Diagram</h2>
<div id="holder"></div>
</body>
</html>
``````