/jsbin.xajom.html

## jsbin.xajom.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .diagram {
      padding:40px;
      width:150px;
      height: 30px;
    }

    .svg {
      width: 150px;
      height: 30px;
    }
  </style>
</head>
<body>

  <div style="margin:20px auto 20px;position:relative;background-color:#444448" id="body-wrapper">
		<div id="body-container" style=""></div>
        <div class="diagram"><div id="svg1" class="svg"></div></div>
        <div class="diagram"><div id="svg2" class="svg"></div></div>
        <div class="diagram"><div id="svg3" class="svg"></div></div>
        <div class="diagram"><div id="svg4" class="svg"></div></div>
	</div>

</body>
</html>

## jsbin.xajom.js
var svgWidth = 150, svgHeight = 32;
var width = 150, height = 15;

function normalizeData(data) {
  //{lowestValue: 53, lowerQuartile: 63, medianValue: 73, upperQuartile: 80, highestValue: 99, targetValue: 80}
  //{lowestValue: 0, lowerQuartile: 32.60, medianValue: 65.21, upperQuartile: 88.04, highestValue: 150, targetValue: 88.04}


  var scaleRatio = (data.highestValue - data.lowestValue)/width;

  console.log(scaleRatio);

  var normalizedData = {
    lowestValue: 0,
    lowerQuartile: (data.lowerQuartile - data.lowestValue) / scaleRatio,
    medianValue: (data.medianValue - data.lowestValue) / scaleRatio,
    upperQuartile:(data.upperQuartile - data.lowestValue) / scaleRatio,
    highestValue:(data.highestValue - data.lowestValue) / scaleRatio,
    targetValue:(data.targetValue - data.lowestValue) / scaleRatio
  };

  return normalizedData;
}

function generateWhisketPlot(paper, width, height, data) {
    var normalizedData = normalizeData(data);
    console.log(data);
    console.log(normalizedData);
    var outerPath = paper.path( [ "M", 0, height * 0.25,
                                   "L", 0, height * 0.75,
                                   "M", 0, height / 2,
                                   "L", width, height / 2,
                                   "M", width, height * 0.25,
                                   "L", width, height * 0.75 ] )
                           .attr( { fill : 'none', stroke: '#878690' } );

     var box = paper.rect( normalizedData.lowerQuartile,
                          0,
                          (normalizedData.upperQuartile - normalizedData.lowerQuartile),
                          height,
                          0 )
                         .attr( { fill: '#444448', stroke: '#878690' } );


     var median = paper.path( [ "M", normalizedData.medianValue, 0,
                               "L", normalizedData.medianValue, height ] )
                       .attr( { fill: 'none', stroke: '#878690' } );


     var target = paper.circle( normalizedData.targetValue, height / 2, height / 4 )
                       .attr( { fill: '#00B7F0', stroke: 'none' } );

     // http://stackoverflow.com/questions/2124763/raphael-js-and-text-positioning
     var textLowestValue = paper.text(0, 25, data.lowestValue.toFixed(2)).attr( { "font-family":"Gibson Helvetica,Arial,sans-serif", "font-size":"10", stroke: '#878690', 'text-anchor': 'start' } );
     var textHighestValue = paper.text(125, 25, data.highestValue.toFixed(2)).attr( { "font-family":"Gibson Helvetica,Arial,sans-serif", "font-size":"10", stroke: '#878690', 'text-anchor': 'start'} );
     var textWidth = textHighestValue.getBBox().width;
     textHighestValue.attr({"x" : width - textWidth});


}

function renderPlotOne() {
   var paper = Raphael( document.getElementById('svg1'), svgWidth, svgHeight);
   var data1 = {
       "lowestValue":53,
       "lowerQuartile":63,
       "medianValue":73,
       "upperQuartile":80,
       "highestValue":89,
       "targetValue":80
   };
   generateWhisketPlot(paper, width, height, data1);
}

function renderPlotTwo() {
   var paper = Raphael( document.getElementById('svg2'), svgWidth, svgHeight);
   var data1 = {
     "lowestValue":13,
       "lowerQuartile":18,
       "medianValue":31,
       "upperQuartile":38,
       "highestValue":45,
       "targetValue":30
   };
   generateWhisketPlot(paper, width, height, data1);
}

function renderPlotThree() {
   var paper = Raphael( document.getElementById('svg3'), svgWidth, svgHeight);
   var data1 = {
       "lowestValue":153,
       "lowerQuartile":193,
       "medianValue":273,
       "upperQuartile":680,
       "highestValue":889,
       "targetValue":780
   };
   generateWhisketPlot(paper, width, height, data1);
}

function renderPlotFour() {
   var paper = Raphael( document.getElementById('svg4'), svgWidth, svgHeight);
   var data1 = {
       "lowestValue":53,
       "lowerQuartile":63,
       "medianValue":73,
       "upperQuartile":80,
       "highestValue":89,
       "targetValue":80
   };
   generateWhisketPlot(paper, width, height, data1);
}


$(window).ready( function() {
   renderPlotOne();
  renderPlotTwo();
  renderPlotThree();
  renderPlotFour();

});

/*outerPath.hover(function () {
                    outerPath.attr({"stroke":"white"});
                  },
                  function () {
                    outerPath.attr({"stroke":"gray"});
                  });*/
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	<style>
	.diagram {
	padding:40px;
	width:150px;
	height: 30px;
	}

	.svg {
	width: 150px;
	height: 30px;
	}
	</style>
	</head>
	<body>

	<div style="margin:20px auto 20px;position:relative;background-color:#444448" id="body-wrapper">
	<div id="body-container" style=""></div>
	<div class="diagram"><div id="svg1" class="svg"></div></div>
	<div class="diagram"><div id="svg2" class="svg"></div></div>
	<div class="diagram"><div id="svg3" class="svg"></div></div>
	<div class="diagram"><div id="svg4" class="svg"></div></div>
	</div>

	</body>
	</html>
	var svgWidth = 150, svgHeight = 32;
	var width = 150, height = 15;

	function normalizeData(data) {
	//{lowestValue: 53, lowerQuartile: 63, medianValue: 73, upperQuartile: 80, highestValue: 99, targetValue: 80}
	//{lowestValue: 0, lowerQuartile: 32.60, medianValue: 65.21, upperQuartile: 88.04, highestValue: 150, targetValue: 88.04}


	var scaleRatio = (data.highestValue - data.lowestValue)/width;

	console.log(scaleRatio);

	var normalizedData = {
	lowestValue: 0,
	lowerQuartile: (data.lowerQuartile - data.lowestValue) / scaleRatio,
	medianValue: (data.medianValue - data.lowestValue) / scaleRatio,
	upperQuartile:(data.upperQuartile - data.lowestValue) / scaleRatio,
	highestValue:(data.highestValue - data.lowestValue) / scaleRatio,
	targetValue:(data.targetValue - data.lowestValue) / scaleRatio
	};

	return normalizedData;
	}

	function generateWhisketPlot(paper, width, height, data) {
	var normalizedData = normalizeData(data);
	console.log(data);
	console.log(normalizedData);
	var outerPath = paper.path( [ "M", 0, height * 0.25,
	"L", 0, height * 0.75,
	"M", 0, height / 2,
	"L", width, height / 2,
	"M", width, height * 0.25,
	"L", width, height * 0.75 ] )
	.attr( { fill : 'none', stroke: '#878690' } );

	var box = paper.rect( normalizedData.lowerQuartile,
	0,
	(normalizedData.upperQuartile - normalizedData.lowerQuartile),
	height,
	0 )
	.attr( { fill: '#444448', stroke: '#878690' } );


	var median = paper.path( [ "M", normalizedData.medianValue, 0,
	"L", normalizedData.medianValue, height ] )
	.attr( { fill: 'none', stroke: '#878690' } );


	var target = paper.circle( normalizedData.targetValue, height / 2, height / 4 )
	.attr( { fill: '#00B7F0', stroke: 'none' } );

	// http://stackoverflow.com/questions/2124763/raphael-js-and-text-positioning
	var textLowestValue = paper.text(0, 25, data.lowestValue.toFixed(2)).attr( { "font-family":"Gibson Helvetica,Arial,sans-serif", "font-size":"10", stroke: '#878690', 'text-anchor': 'start' } );
	var textHighestValue = paper.text(125, 25, data.highestValue.toFixed(2)).attr( { "font-family":"Gibson Helvetica,Arial,sans-serif", "font-size":"10", stroke: '#878690', 'text-anchor': 'start'} );
	var textWidth = textHighestValue.getBBox().width;
	textHighestValue.attr({"x" : width - textWidth});


	}

	function renderPlotOne() {
	var paper = Raphael( document.getElementById('svg1'), svgWidth, svgHeight);
	var data1 = {
	"lowestValue":53,
	"lowerQuartile":63,
	"medianValue":73,
	"upperQuartile":80,
	"highestValue":89,
	"targetValue":80
	};
	generateWhisketPlot(paper, width, height, data1);
	}

	function renderPlotTwo() {
	var paper = Raphael( document.getElementById('svg2'), svgWidth, svgHeight);
	var data1 = {
	"lowestValue":13,
	"lowerQuartile":18,
	"medianValue":31,
	"upperQuartile":38,
	"highestValue":45,
	"targetValue":30
	};
	generateWhisketPlot(paper, width, height, data1);
	}

	function renderPlotThree() {
	var paper = Raphael( document.getElementById('svg3'), svgWidth, svgHeight);
	var data1 = {
	"lowestValue":153,
	"lowerQuartile":193,
	"medianValue":273,
	"upperQuartile":680,
	"highestValue":889,
	"targetValue":780
	};
	generateWhisketPlot(paper, width, height, data1);
	}

	function renderPlotFour() {
	var paper = Raphael( document.getElementById('svg4'), svgWidth, svgHeight);
	var data1 = {
	"lowestValue":53,
	"lowerQuartile":63,
	"medianValue":73,
	"upperQuartile":80,
	"highestValue":89,
	"targetValue":80
	};
	generateWhisketPlot(paper, width, height, data1);
	}


	$(window).ready( function() {
	renderPlotOne();
	renderPlotTwo();
	renderPlotThree();
	renderPlotFour();

	});

	/*outerPath.hover(function () {
	outerPath.attr({"stroke":"white"});
	},
	function () {
	outerPath.attr({"stroke":"gray"});
	});*/