Created
December 7, 2010 20:40
-
-
Save canimus/732369 to your computer and use it in GitHub Desktop.
How to create a block graph to show min, max and gross values with Raphael JS library
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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