This FAQ includes some of the common questions about customizing our new V3 financial calculators. Note that this FAQ doesn't apply to use of the financial calculators on dinkytown.net, only to licensed websites that have deployed our V3 software. This document is not yet complete, please contact support with any questions you have when deploying or using the calculators. Feel free to contact us via email at or by phone at (612) 331 2291.
More information can be found at:
Latest update instructions: Update Instructions 12/31/2016
This new feature saves calculator information as it is entered to the user's browser local storage. This great feature allows you to exit the calculator and then come back later, with all entries preserved. No more starting over! No data is sent over the internet, and all local data is stored locally and obfuscated. This feature is available on any browser that supports local storage including IE8 and above.
To turn this feature off, you can include the parameter in your KJESiteSpecific.js file:
To turn this feature on, you can include the parameter in your KJESiteSpecific.js file:
KJE.ReportHeader="<div style='text-align:center; width:100%'></div>";
KJE.ReportFooter="<div class=KJECenter><p class='KJEReportFooter KJECenter'>Information and interactive calculators are made available to you as self-help tools for your independent use and are not intended to provide investment advice. We cannot and do not guarantee their applicability or accuracy in regards to your individual circumstances. All examples are hypothetical and are for illustrative purposes. We encourage you to seek personalized advice from qualified professionals regarding all personal finance issues. </p></div>";
When you edit JS files to include changes to the JS code, from examples below or as instructed by KJE make sure that you follow these basic rules of thumb:
To change any default, simply edit the value in each parameter line. For example, to change the default term from 15 to 30 change 15 to 30 in the TERM line:
Some parameter values use global defaults that can be modified for all calculators that use them in one location. But these can be changed for a specific calculator simply replacing the default value variable with the actual value you wish to use. For example to change the default loan amount to $100,000 for this calculator you would edit the line:
Please note that for larger numbers do not include dollars signs or commas. Decimals are acceptable where appropriate. Any changes you make to a Params file is kept intact when you apply an update, these changes will not be overwritten or require you to recreate them after applying an update.
Not all defaults are used by all calculators. To change a global default, simply copy the appropriate line of code listed below and put as a line in your KJESiteSpecific.js file.
Rate of return defaults:
KJE.Default.RORMarket = 7.0;
KJE.Default.RORRetire = 4.0;
KJE.Default.RORSave = 0.25;
Interest rate defaults:
KJE.Default.RateCard = 16.00;
KJE.Default.RateFix15 = 4.00;
KJE.Default.RateFix30 = 4.50;
KJE.Default.RateAdj = 4.00;
KJE.Default.RateAuto = 7;
KJE.Default.RateAutoLow = 1.9;
KJE.Default.MortgageAmt = 200000;
KJE.Default.HomePrice = 220000;
KJE.Default.MortgageMin = 0;
KJE.Default.MortgageMax = 10000000;
KJE.Default.MortgageRateMin = 1;
KJE.Default.MortgageRateMax = 25;
Mortgage Term Defaults, range and increment settings:
KJE.Default.MortgageTerm = 30;
KJE.Default.MortgageTermMin = 1;
KJE.Default.MortgageTermMax = 40;
KJE.Default.MortgageTermIncrement = 5;
KJE.Default.MortgageShowAll = true;
KJE.Default.MortgageShowAllMax = 25;
Investment Rate of Return Range Defaults and settings:
KJE.Default.InvestRateMin = 0;
KJE.Default.InvestRateMax = 20;
KJE.Default.InvestSliderRateMax = 12;
Inflation Range Defaults and settings:
KJE.Default.InflationRateMin = 0;
KJE.Default.InflationRateMax = 20;
KJE.Default.InflationSliderRateMax = 12;
This color list 10 has HEX color codes used in order by the calculators. Most calculators only use the first two colors defined. You can change any of these colors, but they need to be HEX codes.
You can use this page to help select HEX colors to use in your page.
You can also control the behavior of the input sections on a calculator by calculator basis by adding the code above to a specific calculator's PARAMS file. For example, for the Mortgage Loan Calculator you would add these lines to the MortgageLoanParams.js file.
If a calculator had only two graphs, GRAPH_OPEN3 would be ignored.
You can also control the behavior of the graphs on a calculator by calculator basis by adding the code above to a specific calculators PARAMS file. For example, for the Mortgage Loan Calculator you would add these lines to the MortgageLoanParams.js file.
If a calculator had only two input sections, DROPPER _OPEN3 would be ignored.
You can also control the behavior of the input sections on a calculator by calculator basis by adding the code above to a specific calculators PARAMS file. For example, for the Mortgage Loan Calculator you would add these lines to the MortgageLoanParams.js file.
KJE.gColorList = ["#000055","#7B68EE","#64A650","#FFF200","#5f007f","#F15A22","#B72467","#6DC8BF","#00007f","#ff00ff","#ffff00","#00ffff","#7f007f","#7f0000","#007f7f","#0000ff","#00c8ff","#60ffff","#bfffbf","#ffff90","#a0c8ef"];
This color list 20 has HEX color codes used in order by the calculators. Most calculators only use the first few colors defined. You can change any of these colors, but they need to be HEX codes. You can use this page to help select HEX colors to use in your page: Color Selector
Graph fonts: There are three graph fonts and their associated attributes used by the graphs. Editing the values of these variables in the KJESiteSpecific.js file will change the font face, style and size.
Graph Height: You can adjust the height of the graphs in the main calculator and the report with these two variables:
Additional color variables that you can adjust include:
To change the font used on the calculator edit the #KJEAllContent class:
To change the logo in the upper right hand corner of the calculator box edit the .KJETitle class by changing the value in the background-image (the position and size may need adjustments as well):
If you have some experience in CSS you can also cut and paste classes out of the KJE.css file into the KJESiteSpecific.css file to override other default values. It is not safe to edit the KJE.css file directly. Any changes you make to the KJE.css file will be lost in future updates. But by placing a class defined in the KJE.css file into the KJESiteSpecific.css file, it will be overwritten when the page loads allowing you change virtually all CSS formatting contained within the calculator.
You have two options. You can hide the definitions on the page while still allowing them to appear when someone clicks a label, or you can remove the definitions completely from the page. Both are controlled by simply setting a variable in the KJESiteSpecific.js file.
To hide the definitions but still allow context sensitive help, include the line below to set the ShowDefinitions variable (the default if this line is missing is true):
KJE.ShowDefinitions = false;
To not include the definitions definitions on the page or in the context sensitive help set the IncludeDefinitions variable (the default if this line is missing is true):
KJE.IncludeDefinitions = false;
We have created a "hook" that lets you define the function KJE.customInit and this will be called immediately after the end of our normal initialization to allow to load content like the above. You most likely would need to set the variable ShowDefinitions to false so that two copies of the definitions would not appear on the page. For example, to get the definition text and put it into a div with the ID YourDefinitionLocation you would need to put the function below in the KJESiteSpecific.js file:
To take a JSON object that you have retrieved and populate the values back into the calculator you would use code like this:
© 1998-2016 KJE Computer Solutions, LLC
Financial Calculators at http://www.dinkytown.net
1730 New Brighton Blvd. PMB #111
Minneapolis, MN 55413