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

graph_block_raphael.html
content_copyfile_download
<!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>