Skip to content

Instantly share code, notes, and snippets.

/jsbin.xajom.html

Created February 12, 2014 22:38
Show Gist options
  • Save anonymous/8965967 to your computer and use it in GitHub Desktop.
Save anonymous/8965967 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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>
Raw
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"});
});*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment