This
information is obsolete. Version 3 creates live 2d-charts automatically.
How to create live charts
The graph package we use is from Netscape and can be found
here.
I have patched it slightly to make it easier to update the
chart after each recalculation. The only file that has change is
graphs.js.The difference is that before the g.build()
wrote into the document, now it returns a string which can be assigned to the
innerHTML-property.
The steps
- Created mortgage.xls and converted it into a
webpage.
- Copied part between <!-- Header
start --> and
<!-- Header end --> into
<head
- Copied part between <!-- Body
start --> and
<!-- Body end --> into
<body
- Removed bottom of table (row 7 and down)
- Removed references to removed row from function
recalc_onclick (after calc)
- Inserted <div id="chart"></div>
into the body where I wanted the chart
Must be placed before
<script language="javascript">
recalc_onclick('');
</script>
- Added <SCRIPT
LANGUAGE="JavaScript1.2" SRC="graph.js"></SCRIPT>
- Added a test chart to the end of the function
recalc_onclick. This was just to make sure that the page worked
var g = new Graph(400,300);
g.scale = 100000;
g.setXScale(0,2,1);
g.addRow(co.p1B6,co.p1B9);
g.addRow(co.p1B7,co.p1B10);
document.getElementById("chart").innerHTML= g.build();
- Replaced with the real data
g.addRow(co.p1C8,co.p1C9,co.p1C10,co.p1C11,co.p1C12,co.p1C13,co.p1C14,co.p1C15,co.p1C16,co.p1C17,co.p1C18,co.p1C19,co.p120,co.p1C21,co.p1C22,co.p1C23,co.p1C24,co.p1C25,co.p1C26,co.p1C27,co.p1C28,co.p1C29,co.p1C30,co.p1C31,co.p1C32,co.p1C33,co.p1C34,co.p1C35,co.p1C36,co.p1C37);
g.addRow(co.p1D8,co.p1D9,co.p1D10,co.p1D11,co.p1D12,co.p1D13,co.p1D14,co.p1D15,co.p1D16,co.p1D17,co.p1D18,co.p1D19,co.p120,co.p1D21,co.p1D22,co.p1D23,co.p1D24,co.p1D25,co.p1D26,co.p1D27,co.p1D28,co.p1D29,co.p1D30,co.p1D31,co.p1D32,co.p1D33,co.p1D34,co.p1D35,co.p1D36,co.p1D37);
- Added a legend
g.setLegend("Interest","Principle");
- There was a problem with the 12th bar, so I only show 10
bars.
If less than 11 year, show bar for each year, otherwise show bar for
each third year.
This is the final code:
var g = new Graph(500,200);
//g.scale = 100000;
if (co.p1C2<11) {
g.setXScale(0,0,1);
g.addRow(co.p1C8,co.p1C9,co.p1C10,co.p1C11,co.p1C12,co.p1C13,co.p1C14,co.p1C15,co.p1C16,co.p1C17);
g.addRow(co.p1D8,co.p1D9,co.p1D10,co.p1D11,co.p1D12,co.p1D13,co.p1D14,co.p1D15,co.p1D16,co.p1D17);
} else {
g.setXScale(0,0,3);
g.addRow(co.p1C8,co.p1C11,co.p1C14,co.p1C17,co.p1C20,co.p1C22,co.p1C25,co.p1C28,co.p1C31,co.p1C34);
g.addRow(co.p1C8,co.p1D11,co.p1D14,co.p1D17,co.p1D20,co.p1D22,co.p1D25,co.p1D28,co.p1D31,co.p1D34);
}
g.setLegend("Interest","Principle");
document.getElementById("chart").innerHTML= g.build();