PERCENTAGE CHANGE BAR CHART CODE

Friday, 2 October 2015

PERCENTAGE CHANGE BAR CHART CODE

-----------------------------------------------------------------------------------------------------------------
COPY AND PASTE BELOW CODE IN POST HTML SECTION
-----------------------------------------------------------------------------------------------------------------

<html>
<head>
<style type="text/css">
.CalcTable {
padding: 4px 6px;
border: solid #ddd 1px;
border-collapse: collapse
}
.CalcTitleCell {
background-color: transparent;
color: #1d487e;
font-family: Verdana, Arial, sans-serif;
font-size: 130%;
font-weight: bold;
text-align: center;
height: 30px
}
.CalcInstructCell {
padding: 5px;
border-bottom: solid #ddd 1px
}
.CalcRowTitleCell {
background-color: #ccc;
color: #1d487e;
font-family: Verdana, Arial, sans-serif;
font-size: 85%;
font-weight: bold;
text-align: left;
border: solid #ddd 1px
}
.CalcColCell {
background-color: #1d487e;
color: #fff;
font-family: Verdana, Arial, sans-serif;
font-size: 100%;
font-weight: bold;
text-align: center;
border: solid #ddd 1px
}
.CalcColCellLeft {
background-color: #1d487e;
color: #fff;
font-family: Verdana, Arial, sans-serif;
font-size: 100%;
font-weight: bold;
text-align: left;
padding-left: 5px;
border: solid #ddd 1px
}
.CalcColCellRight {
background-color: #1d487e;
color: #fff;
font-family: Verdana, Arial, sans-serif;
font-size: 100%;
font-weight: bold;
text-align: right;
border: solid #ddd 1px
}
.CalcRowOdd {
background-color: #eee
}
.CalcRowEven {
background-color: #fff
}
.CalcInDescCell {
padding-left: 5px;
padding-right: 5px
}
.CalcOutDescCell {
text-align: left
}
.CalcInFldCell {
text-align: right;
padding-right: 5px;
font-size: 8pt
}
.CalcOutFldCell {
text-align: right;
padding-right: 5px;
border-left: solid #ddd 1px;
border-right: solid #ddd 1px;
font-size: 8pt
}
.CalcInFld {
font-size: 8pt
}
.CalcInFldFix {
font-size: 8pt
}
.CalcSelectFix {
font-size: 8pt
}
.CalcOutFldOddFix {
border: medium none;
background-color: #eee;
font-weight: normal;
text-align: right;
font-size: 8pt
}
.CalcOutFldEvenFix {
border: medium none;
background-color: #fff;
font-weight: normal;
text-align: right;
font-size: 8pt
}
.CalcOutFldOdd {
border: medium none;
background-color: #eee;
font-weight: normal;
text-align: right;
font-size: 8pt
}
.CalcOutFldEven {
border: medium none;
background-color: #fff;
font-weight: normal;
text-align: right;
font-size: 8pt
}
.CalcOutFldBoldOdd {
border: medium none;
background-color: #eee;
font-weight: bold;
text-align: right;
font-size: 8pt
}
.CalcOutFldBoldEven {
border: medium none;
background-color: #fff;
font-weight: bold;
text-align: right;
font-size: 8pt
}
.CalcButtonCell {
text-align: center;
border: solid #ddd 1px
}
.CalcButton {}.CalcSummaryCell {
padding-left: 5px;
padding-right: 5px;
background-color: #fff;
border: solid #ddd 1px
}
.ChartTable {
border-collapse: collapse
}
.ChartBody {}.ChartColHead1 {
background-color: #1d487e;
color: #fff;
font-family: Verdana, Arial, sans-serif;
font-size: 100%;
font-weight: bold;
text-align: center;
border: solid #ccc 1px
}
.ChartColHead1Small {
background-color: #1d487e;
color: #fff;
font-family: Arial, sans-serif;
font-size: 80%;
font-weight: bold;
text-align: center;
border: solid #ccc 1px
}
.ChartColHead2 {
background-color: #ccc;
color: #1d487e;
font-family: Verdana, Arial, sans-serif;
font-size: 85%;
font-weight: bold;
text-align: center;
border: solid #ddd 1px
}
.ChartRowOdd {
background-color: #eee
}
.ChartRowEven {
background-color: #fff
}
.ChartTextCell {
text-align: center;
padding-left: 2px;
padding-right: 2px;
border: solid #ddd 1px
}
.ChartTextCellLeft {
text-align: left;
padding-left: 2px;
padding-right: 2px;
border: solid #ddd 1px
}
.ChartNumCell {
text-align: right;
padding-left: 2px;
padding-right: 2px;
border: solid #ddd 1px
}
.ChartNumCellSmall {
font-family: Arial, sans-serif;
font-size: 85%;
text-align: right;
padding-left: 2px;
padding-right: 2px;
border: solid #ddd 1px
}
.ChartSubCell {
text-align: right;
border-top: solid #000 2px;
border-left: solid #ddd 1px;
border-right: solid #ddd 1px;
font-weight: bold;
background-color: #ccc;
padding-left: 4px;
padding-right: 2px
}
.ChartTotCell {
text-align: right;
border-top: double #000 3px;
border-bottom: double #000 3px;
border-left: solid #ddd 1px;
border-right: solid #ddd 1px;
font-weight: bold;
background-color: #ccc;
padding-left: 4px;
padding-right: 2px
}
#dhtmltooltip {
position: absolute;
left: -300px;
width: 150px;
border: 1px solid #000;
padding: 2px;
background-color: #ffffe0;
visibility: hidden;
z-index: 100;
filter: progid: DXImageTransform.Microsoft.Shadow(color=gray, direction=135)
}
#dhtmlpointer {
position: absolute;
left: -300px;
z-index: 101;
visibility: hidden
}
.div_help {
font-family: arial, verdana, helvetica, sans-serif;
font-size: small;
text-align: left;
padding: 10px
}
.SideCalcTitleCell {
font-size: 100%;
background-color: #000;
font-weight: bold;
color: #fff
}
.SideCalcResult {
text-align: right;
width: 94%;
background-color: #eee;
border: solid #000 1px;
font-family: arial, sans-serif;
font-size: 11pt;
color: #000;
padding-right: 5px
}
.SideCalcNum {
font-weight: bold;
width: 30px
}
.SideCalcSign {
font-weight: bold;
color: #00f;
width: 30px
}
.SideCalcClr {
font-weight: bold;
width: 30px;
color: red
}
.SideCalcClrTape {
font-weight: bold;
width: 94%;
color: #000
}
.SideCalcTapeCell {
text-align: center;
background-color: #ccc;
border-top: solid #ccc 1px;
border-left: solid #ccc 1px;
border-right: solid #ccc 1px;
border-bottom: dashed #000 1px;
font-family: courier, arial, sans-serif;
font-size: 10pt;
color: #000;
padding-right: 0px;
padding-left: 0px
}
.BelowCalcTable {
border-collapse: collapse
}
.BelowCalcAdCell {}.BelowCalcColHead {
background-color: #ccc;
color: #1d487e;
font-family: Verdana, Arial, sans-serif;
font-size: 85%;
font-weight: bold;
text-align: center;
border: solid #ccc 1px
}
.BelowCalcImgHead {
background-color: #ccc;
text-align: center;
border: solid #ccc 1px
}
.BelowCalcLinkCell {
text-align: left;
padding-left: 2px;
padding-right: 2px;
border: solid #ddd 1px
}
.sppTable {
width: 300px;
border-collapse: collapse
}
.sppRow {
background-color: #ddd
}
.sppColHead {
background-color: #fff;
color: #1d487e;
font-family: Verdana, Arial, sans-serif;
font-size: 85%;
font-weight: bold;
text-align: center;
width: 240px;
border-left: solid #8f8fb3 1px;
border-top: solid #8f8fb3 1px
}
.sppImgHead {
background-color: #fff;
text-align: center;
width: 60px;
border-right: solid #8f8fb3 1px;
border-top: solid #8f8fb3 1px
}
.sppLinkCell {
font-size: 85%;
text-align: left;
padding-left: 2px;
padding-right: 2px;
border-left: solid #8f8fb3 1px;
border-bottom: solid #8f8fb3 1px;
border-right: solid #8f8fb3 1px
}
.fb_like_button {
border: 1px dotted #000;
background-color: #eee;
padding: 10px;
width: 320px;
float: right
}
.blogItItem {
margin: 18px 0;
padding: 0 12px;
border: 1px solid #ccc;
background: #eee;
box-shadow: 4px 4px 4px #ccc
}
.blogItItem h6 {
font-style: normal;
font-weight: normal;
font-size: 80%
}
.leftnav_heading {
text-align: center
}
.leftnav_heading a {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
text-align: left;
line-height: 14px;
background-image: url();
color: #333;
text-decoration: none;
width: 169px;
height: 41px;
display: block;
font-weight: bold;
margin-top: 18px
}
.leftnav_heading a:hover {
background-image: url()
}
.leftnav_heading span {
display: block;
padding: 7px
}
.texttop {
font-size: 15px;
line-height: 14px;
color: #333;
text-shadow: 0px 0px 2px #fff;
margin-bottom: 10px
}
.textbottom {
color: #333;
font-size: 15px;
text-shadow: 0px 0px 2px #fff
}
#mobileBtnDiv {
display: none
}
@media only screen and (max-device-width: 640px) {
#mobileBtnDiv {
display: block;
width: 100%;
text-align: center;
padding: 10px
}
#mobileBtn {
display: inline-block;
text-align: center;
width: 50%;
font-size: 2em;
line-height: 2em;
background-color: #0f5378;
color: #fff;
text-decoration: none;
border-radius: 10px;
border: 1px solid #fff
}
#mobileBtn:hover {
background-color: #4cc2ce;
color: #087197
}
}
</style>

<script>
var mod_pagespeed_ZJn6U$$ocT = "function calc_change(form){var v_num_1=sn(document.calc.num_1.value);var v_num_2=sn(document.calc.num_2.value);if(v_num_1==0){alert(\"Please enter the oldest non-zero number of the two numbers.\");document.calc.num_1.focus();}else\nif(v_num_2==0){alert(\"Please enter the newest non-zero number of the two numbers.\");document.calc.num_2.focus();}else\nif(v_num_1==v_num_2){alert(\"The first and second number are equal. Please enter two different numbers.\");document.calc.num_1.focus();}else{var v_ans=0;var v_perc=0;var v_places=document.calc.places.selectedIndex;var v_2_more_places=Number(v_places)+Number(2);var v_summary=\"<br /><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHSLSkgqRY3PY_iFXdVxZzoPMK12-GxS8IPLF3nONJTGil5Q6QndcuvQRCPGPByHYCMcgl3VSzfR0qAkMJvnpaz6V-xzGJNDWC00aZY3aPNIIPzoesvPpp_qVyIrdLbs69xt8kNPaco3ZR/s72-c/BASIC+JAVA+CALCULATOR.png' width='60' height='54' class='ItemLeft' />\";var v_change_1=Math.round((Number(v_num_2)-Number(v_num_1))*100)/100;var v_diff=Math.abs(v_change_1);document.calc.diff.value=v_diff;var v_frac_change=\"\"+v_diff+\"/\"+v_num_1+\"\";document.calc.frac_change.value=v_frac_change;var v_change_2=v_change_1/v_num_1;var v_change_3=v_change_2*100;var v_perc_change=v_change_3;document.calc.perc_change.value=fns(v_perc_change,v_places,0,0,0)+\"%\";var v_perc_diff_1=Number(v_num_1)+Number(v_num_2);var v_perc_diff_2=v_perc_diff_1/2;var v_perc_diff_3=v_diff/v_perc_diff_2;var v_perc_diff=v_perc_diff_3*100;document.calc.perc_diff.value=fns(v_perc_diff,v_places,0,0,0)+\"%\";v_summary+=\"According to my calculations, the percentage difference between \"+v_num_1+\" and \"+v_num_2+\" \";v_summary+=\"is \"+fns(v_perc_diff,v_places,0,0,0)+\"%, \";var chart_max=0;var chart_title=\"\";if(v_change_1<0){v_summary+=\"and the \"+v_diff+\" drop (from \"+v_num_1+\" to \"+v_num_2+\") equates to a \";v_summary+=\"\"+fns(Math.abs(v_change_3),v_places,0,0,0)+\"% decrease, calculated as follows:\";chart_max=v_num_1;chart_title=\"\"+fns(Math.abs(v_change_3),v_places,0,0,0)+\"%+Decrease\";}else{v_summary+=\"and the \"+v_diff+\" rise (from \"+v_num_1+\" to \"+v_num_2+\") equates to a \";v_summary+=\"\"+fns(Math.abs(v_change_3),v_places,0,0,0)+\"% increase, calculated as follows:\";chart_max=v_num_2;chart_title=\"\"+fns(Math.abs(v_change_3),v_places,0,0,0)+\"%+Increase\";}\nvar numer_style=\"style='border-bottom: 1px solid black; text-align: center; font-weight: normal;'\";var equal_style=\"style='vertical-align: middle; text-align: center; font-weight: normal;'\";var whole_style=\"style='vertical-align: middle; text-align: center; font-weight: normal;'\";var par_style=\"style='vertical-align: middle; text-align: center; font-weight: normal; font-size: 24pt;'\";var rtbl=\"<center><table>\";rtbl+=\"<tr>\";rtbl+=\"<td rowspan='2' \"+whole_style+\">% Change</td>\";rtbl+=\"<td rowspan='2' \"+equal_style+\">=</td>\";rtbl+=\"<td rowspan='2' \"+par_style+\">(</td>\";rtbl+=\"<td \"+numer_style+\">\"+v_num_2+\" - \"+v_num_1+\"</td>\";rtbl+=\"<td rowspan='2' \"+par_style+\">)</td>\";rtbl+=\"<td rowspan='2' \"+whole_style+\">100</td>\";rtbl+=\"</tr>\";rtbl+=\"<tr>\";rtbl+=\"<td style='text-align: center; font-weight: normal;'>\"+v_num_1+\"</td>\";rtbl+=\"</tr>\";rtbl+=\"</table></center><br />\";rtbl+=\"<center><table>\";rtbl+=\"<tr>\";rtbl+=\"<td rowspan='2' \"+whole_style+\">% Change</td>\";rtbl+=\"<td rowspan='2' \"+equal_style+\">=</td>\";rtbl+=\"<td rowspan='2' \"+par_style+\">(</td>\";rtbl+=\"<td \"+numer_style+\">\"+v_change_1+\"</td>\";rtbl+=\"<td rowspan='2' \"+par_style+\">)</td>\";rtbl+=\"<td rowspan='2' \"+whole_style+\">100</td>\";rtbl+=\"</tr>\";rtbl+=\"<tr>\";rtbl+=\"<td style='text-align: center; font-weight: normal;'>\"+v_num_1+\"</td>\";rtbl+=\"</tr>\";rtbl+=\"</table></center><br />\";rtbl+=\"<center><table>\";rtbl+=\"<tr>\";rtbl+=\"<td \"+whole_style+\">% Change</td>\";rtbl+=\"<td \"+equal_style+\">=</td>\";rtbl+=\"<td \"+whole_style+\">\"+fns(v_change_2,v_2_more_places,0,0,0)+\"</td>\";rtbl+=\"<td \"+equal_style+\">*</td>\";rtbl+=\"<td \"+whole_style+\">100</td>\";rtbl+=\"</tr>\";rtbl+=\"</table></center><br />\";rtbl+=\"<center><table>\";rtbl+=\"<tr>\";rtbl+=\"<td \"+whole_style+\">Change</td>\";rtbl+=\"<td \"+equal_style+\">=</td>\";rtbl+=\"<td \"+whole_style+\">\"+fns(v_change_3,v_places,0,0,0)+\"%</td>\";rtbl+=\"</tr>\";rtbl+=\"</table></center><br />\";var chart=\"\";chart+=\"<center><img src='http://chart.apis.google.com/chart?\";chart+=\"chxr=0,0,\"+chart_max+\"\";chart+=\"&chxt=y\";chart+=\"&chbh=a\";chart+=\"&chs=500x250\";chart+=\"&cht=bvg\";chart+=\"&chco=FF9900,3399CC\";chart+=\"&chds=0,\"+chart_max+\",0,\"+chart_max+\"\";chart+=\"&chd=t:\"+v_num_1+\"|\"+v_num_2+\"\";chart+=\"&chdl=Old|New\";chart+=\"&chts=676767,18\";chart+=\"&chtt=\"+chart_title+\"' width='500' height='250' alt='Percent Change Chart' /></center>\";document.getElementById(\"summary\").innerHTML=v_summary+\"<br /><br />\"+rtbl+\"<br /><br />\"+chart+\"<br /><br />\";}}\nfunction clear_results(form){document.calc.diff.value=\"\";document.calc.frac_change.value=\"\";document.calc.perc_diff.value=\"\";document.calc.perc_change.value=\"\";document.getElementById(\"summary\").innerHTML=\"\";}\nfunction reset_calc(form){document.getElementById(\"summary\").innerHTML=\"\";document.calc.reset();}";
var mod_pagespeed_PJWHvBYF1j = "var offsetfromcursorX=12\nvar offsetfromcursorY=10\nvar offsetdivfrompointerX=10\nvar offsetdivfrompointerY=14\ndocument.write('<div class=\"div_help\" id=\"dhtmltooltip\" onClick=\"hideddrivetip()\"></div>')\ndocument.write('<img id=\"dhtmlpointer\" src=\"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHSLSkgqRY3PY_iFXdVxZzoPMK12-GxS8IPLF3nONJTGil5Q6QndcuvQRCPGPByHYCMcgl3VSzfR0qAkMJvnpaz6V-xzGJNDWC00aZY3aPNIIPzoesvPpp_qVyIrdLbs69xt8kNPaco3ZR/s72-c/BASIC+JAVA+CALCULATOR.png\">')\nvar ie=document.all\nvar ns6=document.getElementById&&!document.all\nvar enabletip=false\nif(ie||ns6)\nvar tipobj=document.all?document.all[\"dhtmltooltip\"]:document.getElementById?document.getElementById(\"dhtmltooltip\"):\"\"\nvar pointerobj=document.all?document.all[\"dhtmlpointer\"]:document.getElementById?document.getElementById(\"dhtmlpointer\"):\"\"\nfunction ietruebody(){return(document.compatMode&&document.compatMode!=\"BackCompat\")?document.documentElement:document.body}\nfunction ddrivetip(thetext,thewidth,thecolor){if(ns6||ie){if(typeof thewidth!=\"undefined\")tipobj.style.width=thewidth+\"px\"\nif(typeof thecolor!=\"undefined\"&&thecolor!=\"\")tipobj.style.backgroundColor=thecolor\ntipobj.innerHTML=thetext\nenabletip=true\nreturn false}}\nfunction positiontip(e){if(enabletip){var nondefaultpos=false\nvar curX=(ns6)?e.pageX:event.clientX+ietruebody().scrollLeft;var curY=(ns6)?e.pageY:event.clientY+ietruebody().scrollTop;var winwidth=ie&&!window.opera?ietruebody().clientWidth:window.innerWidth-20\nvar winheight=ie&&!window.opera?ietruebody().clientHeight:window.innerHeight-20\nvar rightedge=ie&&!window.opera?winwidth-event.clientX-offsetfromcursorX:winwidth-e.clientX-offsetfromcursorX\nvar bottomedge=ie&&!window.opera?winheight-event.clientY-offsetfromcursorY:winheight-e.clientY-offsetfromcursorY\nvar leftedge=(offsetfromcursorX<0)?offsetfromcursorX*(-1):-1000\nif(rightedge<tipobj.offsetWidth){tipobj.style.left=curX-tipobj.offsetWidth+\"px\"\nnondefaultpos=true}\nelse if(curX<leftedge)\ntipobj.style.left=\"5px\"\nelse{tipobj.style.left=curX+offsetfromcursorX-offsetdivfrompointerX+\"px\"\npointerobj.style.left=curX+offsetfromcursorX+\"px\"}\nif(bottomedge<tipobj.offsetHeight){tipobj.style.top=curY-tipobj.offsetHeight-offsetfromcursorY+\"px\"\nnondefaultpos=true}\nelse{tipobj.style.top=curY+offsetfromcursorY+offsetdivfrompointerY+\"px\"\npointerobj.style.top=curY+offsetfromcursorY+\"px\"}\ntipobj.style.visibility=\"visible\"\nif(!nondefaultpos)\npointerobj.style.visibility=\"visible\"\nelse\npointerobj.style.visibility=\"hidden\"}}\nfunction hideddrivetip(){if(ns6||ie){enabletip=false\ntipobj.style.visibility=\"hidden\"\npointerobj.style.visibility=\"hidden\"\ntipobj.style.left=\"-1000px\"\ntipobj.style.backgroundColor=''\ntipobj.style.width=''}}\ndocument.onmousemove=positiontip\nfunction sn(num){num=num.toString();var len=num.length;var rnum=\"\";var test=\"\";var j=0;var b=num.substring(0,1);if(b==\"-\"){rnum=\"-\";}\nfor(i=0;i<=len;i++){b=num.substring(i,i+1);if(b==\"0\"||b==\"1\"||b==\"2\"||b==\"3\"||b==\"4\"||b==\"5\"||b==\"6\"||b==\"7\"||b==\"8\"||b==\"9\"||b==\".\"){rnum=rnum+\"\"+b;}}\nif(rnum==\"\"||rnum==\"-\"){rnum=0;}\nrnum=Number(rnum);return rnum;}\nfunction fns(num,places,comma,type,show){var sym_1=\"$\";var sym_2=\"\";var isNeg=0;if(num<0){num=num*-1;isNeg=1;}\nvar myDecFact=1;var myPlaces=0;var myZeros=\"\";while(myPlaces<places){myDecFact=myDecFact*10;myPlaces=Number(myPlaces)+Number(1);myZeros=myZeros+\"0\";}\nonum=Math.round(num*myDecFact)/myDecFact;integer=Math.floor(onum);if(Math.ceil(onum)==integer){decimal=myZeros;}else{decimal=Math.round((onum-integer)*myDecFact)}\ndecimal=decimal.toString();if(decimal.length<places){fillZeroes=places-decimal.length;for(z=0;z<fillZeroes;z++){decimal=\"0\"+decimal;}}\nif(places>0){decimal=\".\"+decimal;}\nif(comma==1){integer=integer.toString();var tmpnum=\"\";var tmpinteger=\"\";var y=0;for(x=integer.length;x>0;x--){tmpnum=tmpnum+integer.charAt(x-1);y=y+1;if(y==3&x>1){tmpnum=tmpnum+\",\";y=0;}}\nfor(x=tmpnum.length;x>0;x--){tmpinteger=tmpinteger+tmpnum.charAt(x-1);}\nfinNum=tmpinteger+\"\"+decimal;}else{finNum=integer+\"\"+decimal;}\nif(isNeg==1){if(type==1&&show==1){finNum=\"-\"+sym_1+\"\"+finNum+\"\"+sym_2;}else{finNum=\"-\"+finNum;}}else{if(show==1){if(type==1){finNum=sym_1+\"\"+finNum+\"\"+sym_2;}else\nif(type==2){finNum=finNum+\"%\";}}}\nreturn finNum;}\nfunction side_calc_b(num){var v_result=document.side_calc.result.value;if(v_result.length<10){var v_new_result=v_result+\"\"+num;document.side_calc.result.value=v_new_result;}}\nfunction side_calc_del(num){var v_result=document.side_calc.result.value;if(v_result.length>0){var v_new_result=v_result.substring(0,v_result.length-1);document.side_calc.result.value=v_new_result;}}\nfunction side_calc_sign(sgn){document.side_calc.h_sign.value=sgn;document.side_calc.h_num_1.value=document.side_calc.result.value;document.side_calc.result.value=\"\";var tape_sgn=\"\";if(sgn!=\"\"){if(sgn==\"/\"){tape_sgn=\"÷\";}else\nif(sgn==\"*\"){tape_sgn=\"×\";}else\nif(sgn==\"-\"){tape_sgn=\"-\";}else\nif(sgn==\"+\"){tape_sgn=\"+\";}}\nvar tape_new=document.getElementById(\"side_calc_tape_new\").innerHTML;var new_tape=\"\"+document.side_calc.h_num_1.value+\" \"+tape_sgn+\"\";document.getElementById(\"side_calc_tape_new\").innerHTML=new_tape;}\nfunction side_calc_equal(form){var v_1=Number(document.side_calc.h_num_1.value);var v_2=Number(document.side_calc.result.value);var v_sign=document.getElementById(\"h_sign\").value;var v_new_result=0;if(v_sign!=\"\"){if(v_sign==\"/\"){v_new_result=v_1/v_2;}else\nif(v_sign==\"*\"){v_new_result=v_1*v_2;}else\nif(v_sign==\"-\"){v_new_result=v_1-v_2;}else\nif(v_sign==\"+\"){v_new_result=v_1+v_2;}\nif(v_new_result>99999999.99||v_new_result<-99999999.99){alert(\"Sorry, the result is too big (greater than 1 billion) for this calculator.\");}else{document.side_calc.result.value=v_new_result;document.side_calc.h_num_1.value=v_new_result;document.side_calc.h_sign.value=\"\";var tape_new=document.getElementById(\"side_calc_tape_new\").innerHTML;var new_tape=\"\"+tape_new+\" \"+v_2+\" = \"+v_new_result+\"\";document.getElementById(\"side_calc_tape_new\").innerHTML=\"\";var tape_old=document.getElementById(\"side_calc_tape_old\").innerHTML;document.getElementById(\"side_calc_tape_old\").innerHTML=\"\"+new_tape+\"<hr style='border: dashed #EEEEEE 1px; line-height: 1;'>\"+tape_old+\"\";document.getElementById(\"side_calc_tape_but\").innerHTML=\"<input type='button' value='Throw Away' onClick='side_calc_clr_tape(this.form)' class='SideCalcClrTape' />\";}}}\nfunction side_calc_pm(form){var v_pm=Number(document.side_calc.result.value);v_pm=v_pm*-1;document.side_calc.result.value=v_pm;}\nfunction side_calc_clr(form){document.side_calc.result.value=\"\";document.side_calc.h_num_1.value=\"\";document.side_calc.h_sign.value=\"\";}\nfunction side_calc_clr_tape(form){document.getElementById(\"side_calc_tape_new\").innerHTML=\"\";document.getElementById(\"side_calc_tape_old\").innerHTML=\"\";document.getElementById(\"side_calc_tape_but\").innerHTML=\"\";}\nvar soc_ad_ar=[[0,\"\",\"\",\"\"],[1,\"Auto\",\"SocialMedia\",\"If you like this calculator, please pay it forward with a <strong>Like</strong>, <strong>Tweet</strong>, <strong>+1</strong>, or <strong>Pin</strong>.\"],[2,\"Budget\",\"SocialMedia\",\"If you like this calculator, please pay it forward with a <strong>Like</strong>, <strong>Tweet</strong>, <strong>+1</strong>, or <strong>Pin</strong>.\"],[3,\"Credit\",\"SocialMedia\",\"If you like this calculator, please pay it forward with a <strong>Like</strong>, <strong>Tweet</strong>, <strong>+1</strong>, or <strong>Pin</strong>.\"],[4,\"Debt\",\"SocialMedia\",\"If you like this calculator, please pay it forward with a <strong>Like</strong>, <strong>Tweet</strong>, <strong>+1</strong>, or <strong>Pin</strong>.\"],[5,\"Income\",\"SocialMedia\",\"If you like this calculator, please pay it forward with a <strong>Like</strong>, <strong>Tweet</strong>, <strong>+1</strong>, or <strong>Pin</strong>.\"],[6,\"Invest\",\"SocialMedia\",\"If you like this calculator, please pay it forward with a <strong>Like</strong>, <strong>Tweet</strong>, <strong>+1</strong>, or <strong>Pin</strong>.\"],[7,\"Loan\",\"SocialMedia\",\"If you like this calculator, please pay it forward with a <strong>Like</strong>, <strong>Tweet</strong>, <strong>+1</strong>, or <strong>Pin</strong>.\"],[8,\"Mortgage\",\"SocialMedia\",\"If you like this calculator, please pay it forward with a <strong>Like</strong>, <strong>Tweet</strong>, <strong>+1</strong>, or <strong>Pin</strong>.\"],[9,\"Finance\",\"SocialMedia\",\"If you like this calculator, please pay it forward with a <strong>Like</strong>, <strong>Tweet</strong>, <strong>+1</strong>, or <strong>Pin</strong>.\"],[10,\"Retire\",\"SocialMedia\",\"If you like this calculator, please pay it forward with a <strong>Like</strong>, <strong>Tweet</strong>, <strong>+1</strong>, or <strong>Pin</strong>.\"],[11,\"College\",\"WyzAnt\",\"Find a <a href='http://www.shareasale.com/r.cfm?b=246096&u=724440&m=28558&urllink=&afftrack=' rel='nofollow' target='_blank'>local tutor</a> today!\"],[12,\"Business\",\"SocialMedia\",\"If you like this calculator, please pay it forward with a <strong>Like</strong>, <strong>Tweet</strong>, <strong>+1</strong>, or <strong>Pin</strong>.\"],[13,\"\",\"\",\"\"],[14,\"\",\"\",\"\"],[15,\"\",\"\",\"\"],[16,\"\",\"\",\"\"],[17,\"\",\"\",\"\"],[18,\"\",\"\",\"\"],[19,\"\",\"\",\"\"],[20,\"Date\",\"SocialMedia\",\"If you like this calculator, please pay it forward with a <strong>Like</strong>, <strong>Tweet</strong>, <strong>+1</strong>, or <strong>Pin</strong>.\"],[21,\"Conversion\",\"SocialMedia\",\"If you like this calculator, please pay it forward with a <strong>Like</strong>, <strong>Tweet</strong>, <strong>+1</strong>, or <strong>Pin</strong>.\"],[22,\"Math\",\"WyzAnt\",\"Find a local <a href='http://www.shareasale.com/r.cfm?b=246097&u=724440&m=28558&urllink=&afftrack=' rel='nofollow' target='_blank'>math tutor</a> today!\"],[23,\"Date\",\"SocialMedia\",\"If you like this calculator, please pay it forward with a <strong>Like</strong>, <strong>Tweet</strong>, <strong>+1</strong>, or <strong>Pin</strong>.\"],[24,\"Sports\",\"SocialMedia\",\"If you like this web app, please pay it forward with a <strong>Like</strong>, <strong>Tweet</strong>, <strong>+1</strong>, or <strong>Pin</strong>.\"]];";
</script>

<script>eval(mod_pagespeed_ZJn6U$$ocT);</script>
<script>eval(mod_pagespeed_PJWHvBYF1j);</script>

</head>

<body>
<form name="calc" method="post" action="#">
<table class="CalcTable">
<tbody>
<tr>
<td colspan="2" align="center" class="CalcTitleCell">
PERCENTAGE CHANGE BAR CHART CALCULATOR
</td>
</tr>
<tr>
<td colspan="2" class="CalcInstructCell">
<br/>
<br/>
<strong>Instructions:</strong> Enter beginning or oldest number and enter the ending or most recent number, and then click the "Calculate Percent Change" button.
<p>
Mouse over the blue question marks for a further explanation of each entry field or button. More in-depth explanations can be found in the glossary of terms located beneath the Percentage Change Calculator.
</p>
</td>
</tr>
<tr class="ChartRowOdd">
<td width="475" class="ChartTextCellLeft">
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/2wBDAAYEBAQFBAYFBQYJBgUGCQsIBgYICwwKCgsKCgwQDAwMDAwMEAwODxAPDgwTExQUExMcGxsbHB8fHx8fHx8fHx//2wBDAQcHBw0MDRgQEBgaFREVGh8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx//wAARCAAPAA8DAREAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAABQP/xAAkEAACAgEDBAIDAAAAAAAAAAABAgMFBAYRIQAHEjETIhUjYf/EABYBAQEBAAAAAAAAAAAAAAAAAAIDBf/EACARAQAABgIDAQAAAAAAAAAAAAEAAgMREkExURNhceH/2gAMAwEAAhEDEQA/AL5OrLB+4uo6+zvdSmBLLKhra6kyX+UkZLqEVXYqqog4AH862SkeOVCXjcZjO5os3OoYr/z+J3mXSA1ZcZ9ZNj5SMWzJWnjaSvlbY/Yx/NE+xU7cMAffU5sWjniD89wy5UxybfkDrp3VEHd+1salYcvMaysHxMbCtqyHM/Y8vlskrZDKRGW81aLcDf0eRTOVpA9Gm0DCbyKduyAtHaOu4LvId8iuLmutUAS1rZH85K3IQcJkM23k32b0o5OwBPVatUtvk09nqBTpt9cOzqP/2Q==" alt="Help" onMouseover="ddrivetip('Select how many decimal places you would like the percentage change result rounded to.', 250)" ; onMouseout="hideddrivetip()">
Number of decimal places to round result to:
</td>
<td width="125" class="ChartTextCell">
<select name="places" size="1" onChange="clear_results(this.form)">
<option value="0">0</option>
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</td>
</tr>
<tr class="ChartRowEven">
<td width="475" class="ChartTextCellLeft">
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/2wBDAAYEBAQFBAYFBQYJBgUGCQsIBgYICwwKCgsKCgwQDAwMDAwMEAwODxAPDgwTExQUExMcGxsbHB8fHx8fHx8fHx//2wBDAQcHBw0MDRgQEBgaFREVGh8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx//wAARCAAPAA8DAREAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAABQP/xAAkEAACAgEDBAIDAAAAAAAAAAABAgMFBAYRIQAHEjETIhUjYf/EABYBAQEBAAAAAAAAAAAAAAAAAAIDBf/EACARAQAABgIDAQAAAAAAAAAAAAEAAgMREkExURNhceH/2gAMAwEAAhEDEQA/AL5OrLB+4uo6+zvdSmBLLKhra6kyX+UkZLqEVXYqqog4AH862SkeOVCXjcZjO5os3OoYr/z+J3mXSA1ZcZ9ZNj5SMWzJWnjaSvlbY/Yx/NE+xU7cMAffU5sWjniD89wy5UxybfkDrp3VEHd+1salYcvMaysHxMbCtqyHM/Y8vlskrZDKRGW81aLcDf0eRTOVpA9Gm0DCbyKduyAtHaOu4LvId8iuLmutUAS1rZH85K3IQcJkM23k32b0o5OwBPVatUtvk09nqBTpt9cOzqP/2Q==" alt="Help" onMouseover="ddrivetip('Enter the beginning or past number.', 250)" ; onMouseout="hideddrivetip()">
Beginning number (#):
</td>
<td width="125" class="ChartTextCell">
<input type="text" id="num_1" name="num_1" size="12" value="" class="CalcInFld" onKeyUp="clear_results(this.form)"/>
</td>
</tr>
<tr class="ChartRowOdd">
<td width="475" class="ChartTextCellLeft">
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/2wBDAAYEBAQFBAYFBQYJBgUGCQsIBgYICwwKCgsKCgwQDAwMDAwMEAwODxAPDgwTExQUExMcGxsbHB8fHx8fHx8fHx//2wBDAQcHBw0MDRgQEBgaFREVGh8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx//wAARCAAPAA8DAREAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAABQP/xAAkEAACAgEDBAIDAAAAAAAAAAABAgMFBAYRIQAHEjETIhUjYf/EABYBAQEBAAAAAAAAAAAAAAAAAAIDBf/EACARAQAABgIDAQAAAAAAAAAAAAEAAgMREkExURNhceH/2gAMAwEAAhEDEQA/AL5OrLB+4uo6+zvdSmBLLKhra6kyX+UkZLqEVXYqqog4AH862SkeOVCXjcZjO5os3OoYr/z+J3mXSA1ZcZ9ZNj5SMWzJWnjaSvlbY/Yx/NE+xU7cMAffU5sWjniD89wy5UxybfkDrp3VEHd+1salYcvMaysHxMbCtqyHM/Y8vlskrZDKRGW81aLcDf0eRTOVpA9Gm0DCbyKduyAtHaOu4LvId8iuLmutUAS1rZH85K3IQcJkM23k32b0o5OwBPVatUtvk09nqBTpt9cOzqP/2Q==" alt="Help" onMouseover="ddrivetip('Enter the ending or current number.', 250)" ; onMouseout="hideddrivetip()">
Ending number (#):
</td>
<td width="125" class="ChartTextCell">
<input type="text" id="num_2" name="num_2" size="12" value="" class="CalcInFld" onKeyUp="clear_results(this.form)"/>
</td>
</tr>
<tr class="ChartRowEven">
<td colspan="2" class="ChartTextCell">
<input type="button" value="Calculate Percent Change" class="CalcButton" onClick="calc_change(this.form)">
<input type="button" value="Reset" class="CalcButton" onClick="reset_calc(this.form)">
</td>
</tr>
<tr class="ChartRowOdd">
<td width="475" class="ChartTextCellLeft">
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/2wBDAAYEBAQFBAYFBQYJBgUGCQsIBgYICwwKCgsKCgwQDAwMDAwMEAwODxAPDgwTExQUExMcGxsbHB8fHx8fHx8fHx//2wBDAQcHBw0MDRgQEBgaFREVGh8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx//wAARCAAPAA8DAREAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAABQP/xAAkEAACAgEDBAIDAAAAAAAAAAABAgMFBAYRIQAHEjETIhUjYf/EABYBAQEBAAAAAAAAAAAAAAAAAAIDBf/EACARAQAABgIDAQAAAAAAAAAAAAEAAgMREkExURNhceH/2gAMAwEAAhEDEQA/AL5OrLB+4uo6+zvdSmBLLKhra6kyX+UkZLqEVXYqqog4AH862SkeOVCXjcZjO5os3OoYr/z+J3mXSA1ZcZ9ZNj5SMWzJWnjaSvlbY/Yx/NE+xU7cMAffU5sWjniD89wy5UxybfkDrp3VEHd+1salYcvMaysHxMbCtqyHM/Y8vlskrZDKRGW81aLcDf0eRTOVpA9Gm0DCbyKduyAtHaOu4LvId8iuLmutUAS1rZH85K3IQcJkM23k32b0o5OwBPVatUtvk09nqBTpt9cOzqP/2Q==" alt="Help" onMouseover="ddrivetip('This is the absolute value of the difference between the beginning number and the ending number.', 250)" ; onMouseout="hideddrivetip()">
Numerical difference:
</td>
<td width="125" class="ChartTextCell">
<input type="text" id="diff" name="diff" size="15" value="" class="CalcOutFldOdd"/>
</td>
</tr>
<tr class="ChartRowEven">
<td width="475" class="ChartTextCellLeft">
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/2wBDAAYEBAQFBAYFBQYJBgUGCQsIBgYICwwKCgsKCgwQDAwMDAwMEAwODxAPDgwTExQUExMcGxsbHB8fHx8fHx8fHx//2wBDAQcHBw0MDRgQEBgaFREVGh8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx//wAARCAAPAA8DAREAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAABQP/xAAkEAACAgEDBAIDAAAAAAAAAAABAgMFBAYRIQAHEjETIhUjYf/EABYBAQEBAAAAAAAAAAAAAAAAAAIDBf/EACARAQAABgIDAQAAAAAAAAAAAAEAAgMREkExURNhceH/2gAMAwEAAhEDEQA/AL5OrLB+4uo6+zvdSmBLLKhra6kyX+UkZLqEVXYqqog4AH862SkeOVCXjcZjO5os3OoYr/z+J3mXSA1ZcZ9ZNj5SMWzJWnjaSvlbY/Yx/NE+xU7cMAffU5sWjniD89wy5UxybfkDrp3VEHd+1salYcvMaysHxMbCtqyHM/Y8vlskrZDKRGW81aLcDf0eRTOVpA9Gm0DCbyKduyAtHaOu4LvId8iuLmutUAS1rZH85K3IQcJkM23k32b0o5OwBPVatUtvk09nqBTpt9cOzqP/2Q==" alt="Help" onMouseover="ddrivetip('This is the percentage difference between the two entered numbers (not the same as percentage change).', 250)" ; onMouseout="hideddrivetip()">
Percentage difference:
</td>
<td width="125" class="ChartTextCell">
<input type="text" id="perc_diff" name="perc_diff" size="15" value="" class="CalcOutFldEven"/>
</td>
</tr>
<tr class="ChartRowOdd">
<td width="475" class="ChartTextCellLeft">
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/2wBDAAYEBAQFBAYFBQYJBgUGCQsIBgYICwwKCgsKCgwQDAwMDAwMEAwODxAPDgwTExQUExMcGxsbHB8fHx8fHx8fHx//2wBDAQcHBw0MDRgQEBgaFREVGh8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx//wAARCAAPAA8DAREAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAABQP/xAAkEAACAgEDBAIDAAAAAAAAAAABAgMFBAYRIQAHEjETIhUjYf/EABYBAQEBAAAAAAAAAAAAAAAAAAIDBf/EACARAQAABgIDAQAAAAAAAAAAAAEAAgMREkExURNhceH/2gAMAwEAAhEDEQA/AL5OrLB+4uo6+zvdSmBLLKhra6kyX+UkZLqEVXYqqog4AH862SkeOVCXjcZjO5os3OoYr/z+J3mXSA1ZcZ9ZNj5SMWzJWnjaSvlbY/Yx/NE+xU7cMAffU5sWjniD89wy5UxybfkDrp3VEHd+1salYcvMaysHxMbCtqyHM/Y8vlskrZDKRGW81aLcDf0eRTOVpA9Gm0DCbyKduyAtHaOu4LvId8iuLmutUAS1rZH85K3IQcJkM23k32b0o5OwBPVatUtvk09nqBTpt9cOzqP/2Q==" alt="Help" onMouseover="ddrivetip('This is difference of the beginning and ending numbers, over the beginning number.', 250)" ; onMouseout="hideddrivetip()">
Fractional change:
</td>
<td width="125" class="ChartTextCell">
<input type="text" id="frac_change" name="frac_change" size="15" value="" class="CalcOutFldOdd"/>
</td>
</tr>
<tr class="ChartRowEven">
<td width="475" class="ChartTextCellLeft">
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/2wBDAAYEBAQFBAYFBQYJBgUGCQsIBgYICwwKCgsKCgwQDAwMDAwMEAwODxAPDgwTExQUExMcGxsbHB8fHx8fHx8fHx//2wBDAQcHBw0MDRgQEBgaFREVGh8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx//wAARCAAPAA8DAREAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAABQP/xAAkEAACAgEDBAIDAAAAAAAAAAABAgMFBAYRIQAHEjETIhUjYf/EABYBAQEBAAAAAAAAAAAAAAAAAAIDBf/EACARAQAABgIDAQAAAAAAAAAAAAEAAgMREkExURNhceH/2gAMAwEAAhEDEQA/AL5OrLB+4uo6+zvdSmBLLKhra6kyX+UkZLqEVXYqqog4AH862SkeOVCXjcZjO5os3OoYr/z+J3mXSA1ZcZ9ZNj5SMWzJWnjaSvlbY/Yx/NE+xU7cMAffU5sWjniD89wy5UxybfkDrp3VEHd+1salYcvMaysHxMbCtqyHM/Y8vlskrZDKRGW81aLcDf0eRTOVpA9Gm0DCbyKduyAtHaOu4LvId8iuLmutUAS1rZH85K3IQcJkM23k32b0o5OwBPVatUtvk09nqBTpt9cOzqP/2Q==" alt="Help" onMouseover="ddrivetip('This is the rounded version of the result derived from calculating percent change. After clicking the <strong>Calculate Percent Change</strong> button the percentage change calculator will display an explanation of the result, show the calculations it performed, and display a bar chart for a visual representation of the change.', 250)" ; onMouseout="hideddrivetip()">
Percent change:
</td>
<td width="125" class="ChartTextCell">
<input type="text" id="perc_change" name="perc_change" size="15" value="" class="CalcOutFldEven"/>
</td>
</tr>
<tr class="ChartRowOdd">
<td colspan="2" class="CalcSummaryCell" id="summary">
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>

How to Calculate Percent Change

The formula used for calculating percent increase or decrease is as follows:

Percentage Change Formula

% Change	=	(	V₂ - V₁	)	100
			V₁

Where V₁ is the starting number and V₂ is the ending number

To see how the percent change formula works, let's suppose you wanted to calculate the percent change in the cost of attending college from the previous year. If the tuition last year was $5,000, and tuition this year is $5,500, here is how you would calculate the percent increase in college tuition:

Calculate Percent Change from 5000 to 5500

% Chg.	=	(	5500 - 5000	)	100
			5000

% Chg.	=	(	500	)	100
			5000

% Chg.

0.10 * 100

Change

10% Increase

On the other hand, let's suppose tuition last year was $5,500, and tuition this year is $5,000 (I know, wishful thinking), here is how you would calculate the percent decrease in college tuition:

Calculate Percent Change from 5500 to 5000

% Chg.	=	(	5000 - 5500	)	100
			5500

% Chg.	=	(	-500	)	100
			5500

% Chg.

-0.0909 * 100

Change

-9.09%, or a 9.09% Decrease

If you are wondering why a 500 increase results in a higher percentage change (10%) than a 500 decrease (9.09%) in the above example, it's because the denominator in the percentage change formula is always greater in the case of a percentage decrease (higher of the two numbers is the divisor).

With that, let's use the percentage change calculator to calculate percent increase or decrease.