Skip to content

Instantly share code, notes, and snippets.

@canimus

canimus/graph_block_raphael.html

Created December 7, 2010 20:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save canimus/732369 to your computer and use it in GitHub Desktop.
Save canimus/732369 to your computer and use it in GitHub Desktop.
Download ZIP
How to create a block graph to show min, max and gross values with Raphael JS library
Raw
graph_block_raphael.html
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment