Financial Calculators from Dinkytown.net

Dinkytown AutoSaveThe best financial calculators anywhere! Now even better with Dinkytown AutoSave. Work, save and email your results!

Dinkytown V3 Customizing FAQ

Tips and techniques to customize V3 calculator installations.


Dinkytown V3 Customizing FAQ


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:


How can I save calculator values?

As of 12/31/2014 all calculators now include "Dinkytown AutoSave".

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:
KJE.parameters.set("LOCAL_STORAGE",KJE.STORAGE_NONE);

To turn this feature on, you can include the parameter in your KJESiteSpecific.js file:
KJE.parameters.set("LOCAL_STORAGE",KJE.STORAGE_AUTO);

How do I add my logo and information to the printed report?

To be able to add the logo to your printed reports. Modify the following in the code 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>";

Above are two javascript variables that can contain any HTML markup as you wish it to appear on the reports. ReportHeader is at the top, ReportFooter is at the bottom. Changing this in the KJESiteSpecific.js file will make the change appear on all of your calculators. These two variables only affect the printed report, not main calculator page.


How do I edit a JS file?

First, keep in mind you should only edit JS files that are designed to be edited. This includes the PARAMS files and the KJESiteSpecific.js file. No other JS files should be modified. Doing so may break your calculators. In addition, any changes you make to any other JS file (other than the KJESiteSpecific.js or the PARAMS files) will be wiped out with the application of any future update.

To edit, simply open the file in any text editor make your changes (and of course save them). Notepad can work, but may be difficult to manage long lines that wrap. We simply can't live without our WebStorm editor: http://www.jetbrains.com/webstorm/ . You can also find free JavaScript editor options on the web. You don't need to know JavaScript to make simple changes, but some knowledge will be very helpful. Programmers with JavaScript experience will find making changes and edits a simple process.

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:

  1. Make a backup first (or at least be able to redownload your original package)
  2. JS files are JavaScript code files. The code will execute from the top down. If an error is created in the code no other lines of code in the file will be executed. So if you made a change at the bottom of the file that never seems to make a difference, there could be an error in the file above it.
  3. All lines need to end with a ; and should not have a line break. If you have a long string of text inside quotation markes, it needs to be all on the same line to work.
  4. When in doubt, contact us. We can help out with a lot of code examples and trouble shoot should a JS file that has you stumped. Please feel free to contact us before you spend countless hours trying to figure something out. If you are stuck, give us a shout!

How do I change default values for a specific calculator?

You can change any default values for a calculator by editing the calculator's specific PARAMS file. Each calculator should have a file with the extension Params.js. For example, the Mortgage Loan Calculator uses the files that begin with “MortgageLoan”. All default parameters are contained within the file MortgageLoanParams.js. Edit this file to change values. For example, the file will start with the following parameters defined:

    KJE.parameters.set("INTEREST_RATE",KJE.Default.RateFix30);
    KJE.parameters.set("LOAN_AMOUNT",KJE.Default.MortgageAmt);
    KJE.parameters.set("PREPAY_TYPE",KJE.MortgageLoanCalculation.PREPAY_NONE);
    KJE.parameters.set("PREPAY_STARTS_WITH",1);
    KJE.parameters.set("PREPAY_AMOUNT","0");
    KJE.parameters.set("TERM",15);

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:

Replace
KJE.parameters.set("TERM",15);

With:
KJE.parameters.set("TERM",30);

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:

Replace
KJE.parameters.set("LOAN_AMOUNT",KJE.Default.MortgageAmt);

With:
KJE.parameters.set("LOAN_AMOUNT",100000);

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.


How can I change global defaults and what are the global defaults that are available?

All global changes for default values are made in the KJESiteSpecific.js file. This file overrides normal settings that are defined in the KJE.js file. The KJESiteSpecific.js file is designed to be modified so that changes you make are retained when you apply updates to the calculator.

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.RatePersonal= 7.50;
    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.StateTaxRate=8.00;
    KJE.Default.InflationRate=3.0;
    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;


How do I change the background colors on the input sections ?

To change the colors used as backgrounds to the input sections, you need to edit the KJESiteSpecific.js file and change the line below (note that this line in your actual file should not have any line returns):

KJE.colorList=["#eeeeee","#ccccff","#cccccc","#BE4262","#FABB50","#DDCCDD","#CCCCCC","#CCCCDD","#CCDDCC","#CCDDDD","#CCCCDD"];

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.


How do I default a graph to be open (or closed) ?

To change this behavior on all of your installed calculators you need to edit the KJESiteSpecific.js file and add GRAPH_OPEN parameters. Set this parameter to true to have them default open and false to default close. The first graph is controlled by GRAPH_OPEN1, the second by GRAPH_OPEN2, etc. The lines below would default the first three graphs to be open:

KJE.parameters.set("GRAPH_OPEN1",true);
KJE.parameters.set("GRAPH_OPEN2",true);
KJE.parameters.set("GRAPH_OPEN3",true);

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.


How do I default a input section to be open (or closed)?

To change this behavior on all of your installed calculators you need to edit the KJESiteSpecific.js file and add DROPPER _OPEN parameters. Set this parameter to true to have them default open and false to default close. The first input section is controlled by DROPPER _OPEN1, the second by DROPPER _OPEN2, etc. The lines below would default the first three input sections to be open:

KJE.parameters.set("DROPPER_OPEN1", true);
KJE.parameters.set("DROPPER_OPEN2", true);
KJE.parameters.set("DROPPER_OPEN3", true);

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.


How can I change the graph colors and fonts?

To change the colors used on the bars, lines and pie charts, you need to edit the KJESiteSpecific.js file and change the line below (note that this line in your actual file should not have any line returns):

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


    KJE.gFont = ["Helvetica","Helvetica","Helvetica"];
    KJE.gFontStyle = ["bold","bold",""];
    KJE.gFontSize = [13,10,10];
    KJE.gHeight = 250;
    KJE.gHeightReport = 350;
    KJE.gColorBackground ="#FFFFFF";
    KJE.gColorForeground ="#000000";
    KJE.gColorGrid ="#BBBBBB";
    KJE.gColorGridBackground1 ="#FFFFFF";
    KJE.gColorGridBackground2 ="#CCCCCC";
    KJE.gColorAxisLine ="#666666";
    KJE.gColorText ="#000000";

How can I change the graph size, colors and fonts?

The KJESiteSpecific.js file as the variables required to change many aspects of the graph. Simply edit values of the variables in the KJESiteSpecific.js file to make these changes (note that all of the code lines below are in the file already, you only need to change the value after the = sign.)

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.


    KJE.gFont = ["Helvetica","Helvetica","Helvetica"];
    KJE.gFontStyle = ["bold","bold",""];
    KJE.gFontSize = [13,10,10];

Graph Height: You can adjust the height of the graphs in the main calculator and the report with these two variables:


    KJE.gHeight = 250;
    KJE.gHeightReport = 350;

Additional color variables that you can adjust include:


    KJE.gColorBackground ="#FFFFFF";
    KJE.gColorForeground ="#000000";
    KJE.gColorGrid ="#BBBBBB";
    KJE.gColorGridBackground1 ="#FFFFFF";
    KJE.gColorGridBackground2 ="#CCCCCC";
    KJE.gColorAxisLine ="#666666";
    KJE.gColorText ="#000000";

How can I change fonts and other CSS settings?

You can edit the KJESiteSpecific.css file to change any of the predefined fonts, colors and styles. For example, to change the color of headings you can edit the KJESiteSpecific.css class:

    .KJEFontHeading {
    color:#000000;
    }

To change the font used on the calculator edit the #KJEAllContent class:


    #KJEAllContent {
    font: normal 10pt arial, sans-serif;
    background: #FFFFFF;
    color: #000000;
    padding: 20px 0 0 0;
    }

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):


    .KJETitle {
    font-size: 14pt;
    text-align: center;
    background-image: url(data:'yourimage.png');
    background-repeat: no-repeat;
    background-position: -8px -8px;
    background-size:85px 85px;
    }

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.


Can I hide the definitions?

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;


How can put the definitions in a different location on the page?

We hold definition contents in the variable: KJE.DefinitionText You can use this variable to insert the definition text to a different location on your page. For example here is the Javascript that would need to run after the calculator initializes (this code assumes you have created a DIV with the ID YourDefinitionLocation):


    var oDefinitions = document.getElementById("YourDefinitionLocation");
    oDefinitions.innerHTML = KJE.DefinitionText;

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:


    KJE.ShowDefinitions = false;
    KJE.customInit = function() {
    var oDefinitions = document.getElementById("YourDefinitionLocation");
    oDefinitions.innerHTML = KJE.DefinitionText;
    }

Can I save the user inputs on my server?

The calculators don't have any backend database, but provide means for you to retreive the input data, which you can then handle anyway you wish.    We have an interface that uses a JSON object to gather input values and you can create a function to POST them to your server.  This type of programming would require someone with experience in JavaScript, HTML and HTTP Server Side processing.  

It is a JavaScript function that creates a JSON object that you can then POST to your server.  You need to create the programming to hook this up, but the function call is simple.  If you use JQuery you can easily create a small AJAX function to send this data to your server.  To get the JSON object you would use the following JavaScript function on the calculator page and it would return the input values from the calculator on the page (note that the server-side process and the AJAX function are not shown below):  


    Var oCalculatorJSONObject = KJE.getJSONFromInputs();
 

To take a JSON object that you have retrieved and populate the values back into the calculator you would use code like this:  

     
    var oStorageItems=null;  
    try {oStorageItems = JSON.parse(oCalculatorJSONObject);} catch (errors) {oStorageItems =null;}  
    if (oStorageItems==null) oStorageItems={};  

    // Populate the calculator from the retrieved object:  
    KJE.bStoragePopulate(oStorageItems);


The Best Financial Calculators Anywhere!

Put them on your website!

© 1998-2016 KJE Computer Solutions, LLC
Financial Calculators at http://www.dinkytown.net
(612) 331-2291
1730 New Brighton Blvd. PMB #111
Minneapolis, MN 55413