Skip to content

Instantly share code, notes, and snippets.

@s0ren

s0ren/bilafskr.html

Last active August 29, 2015 14:18
Show Gist options
  • Save s0ren/05c554648b26ceccd935 to your computer and use it in GitHub Desktop.
Save s0ren/05c554648b26ceccd935 to your computer and use it in GitHub Desktop.
Download ZIP
Chart demo, værditab på bil
Raw
bilafskr.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Værditab på bil, chart demo</title>
<!--
/****************************************************/
// Google charts: https://developers.google.com/chart/
/****************************************************/
-->
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
<script type="text/javascript">
google.load('visualization', '1', { packages: ['corechart'] });
google.setOnLoadCallback(drawChart);
function beregning(i)
{
return (20000 - (i/10)*20000);
}
var p = 0.15;
var t = 0.0005;
function brugtpris(k, n, x)
{
var s = k * Math.pow(1-p, n) * Math.pow(1-t, x);
return s;
}
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'År');
data.addColumn('number', 'Pris');
for (var i = 0; i <= 20; i += 0.5) {
data.addRow([i, brugtpris(400000, i, 240)]);
}
var options = {
width: 1000,
height: 563,
hAxis: {
title: 'År'
},
vAxis: {
title: 'Gensalgsværdi'
}
};
var chart = new google.visualization.LineChart(
document.getElementById('chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart"></div>
<script>
drawChart();
</script>
</body>
</html>
Raw
bilafskr_interactiv.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Værditab på bil, chart demo</title>
<!--
/*****************************************************/
// Google charts: https://developers.google.com/chart /
/*****************************************************/
-->
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
<script type="text/javascript">
google.load('visualization', '1', { packages: ['corechart'] });
google.setOnLoadCallback(drawChart);
var p = 0.15; // årlig afskrivningsfaktor
var t = 0.0005; // afskrivningsfaktor pr 1000km
var K = 115000; // købspris
var udbetaling = 0.05
var G = K*(1-udbetaling); // Gæld = % af købsprisen.
// Resten er en udbetaling man selv må spare op til
var km = 20; // årligt kørselsbehov
var aar = 8; // lånets løbetid i år
var tn = 12; // antal terminer pr år
var n = aar * tn; // antal terminer i alt, v. n terminer om året
var r = 0.055; // % i rente
// den ydelse vi regner med at billånet skal afvikles med
var y = anuitetsYdelse(G, r/tn, n);
function brugtpris(k, n, x)
{
var s = k * Math.pow(1-p, n) * Math.pow(1-t, x*n);
return s;
}
// se også http://www.matlex.dk/rente.html
function anuitetsgaeld(y, r, n)
{
var g = y * (1 - Math.pow(1 + r, -n))/r;
if(g >= 0)
{
return g;
}
else
{
//return 0;
}
}
function anuitetsYdelse(g, r, n)
{
var y = g * r/(1 - Math.pow(1 + r, -n));
return y;
}
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'År');
data.addColumn('number', 'Gensalgsværdi');
data.addColumn('number', 'Gæld');
for (var i = 0; i <= 10; i += 0.25) {
data.addRow([i,
brugtpris(K, i, km),
anuitetsgaeld(y, r/tn, (aar-i)*tn)]);
}
var options = {
width: 1000,
height: 563,
hAxis: {
title: 'År'
},
vAxis: {
title: 'KR'
}
};
var chart = new google.visualization.LineChart(
document.getElementById('chart'));
chart.draw(data, options);
}
//****************** ny funktion **********************
function regn()
{
K = document.getElementById("købspris").value;
udbetaling = document.getElementById("udbetaling").value
udbetaling = udbetaling/100;
G = K*(1-udbetaling);
aar = document.getElementById("løbetid").value;
n = aar * tn;
y = anuitetsYdelse(G, r/tn, n);
km = document.getElementById("km").value;
drawChart();
}
function købpris_ændret()
{
var købspris = document.getElementById("købspris_").value;
document.getElementById("købspris").value = købspris;
}
function købspris_musflyt()
{
var købspris = document.getElementById("købspris_").value;
document.getElementById("købspris").value = købspris;
regn();
}
function løbetid_slide(slider)
{
var aar = slider.value;
document.getElementById("løbetid").value = aar;
regn();
}
function købstext(textbox)
{
pris = textbox.value;
document.getElementById("købspris_").value = pris;
}
//****************************************************
</script>
</head>
<body>
<!-- *************** ny html ****************** -->
<div id="input">
<label for="købspris">Købspris:</label>
<input type="text" id="købspris" placeholder="200000" onchange="købstext(this)" />kr
<input type="range" step="1000" min="20000" max="500000" id="købspris_"
onchange="købpris_ændret()"
onmousemove="købspris_musflyt()"
>
<br>
<label for="udbetaling">Udbetaling:</label>
<input type="text" id="udbetaling" value="20"/>%
<br>
<label for="løbetid">Løbetid:</label>
<input type="text" id="løbetid" value="20"/>år
<input type="range" step="0.5" min="1" max="10" id="løbetid_"
onmousemove="løbetid_slide(this)">
<br>
<label for="km">Km/år:</label>
<input type="text" id="km" value="20"/>*1000km
<br>
<input type="button" value="Regn" onclick="regn()">
</div>
<!-- ******************************************** -->
<div id="chart"></div>
<script>
drawChart();
</script>
</body>
</html>
Raw
bilafskr_m_gaeld.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Værditab på bil, chart demo</title>
<!--
/*****************************************************/
// Google charts: https://developers.google.com/chart /
/*****************************************************/
-->
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
<script type="text/javascript">
// opstart af google visualization
google.load('visualization', '1', { packages: ['corechart'] });
google.setOnLoadCallback(drawChart);
// Her er alle de "konstanter" vi skal bruge.
var p = 0.15; // årlig afskrivningsfaktor
var t = 0.0005; // afskrivningsfaktor pr 1000km
var K = 173000; // købspris
var G = K*0.80; // Gæld = % af købsprisen.
// Resten er en udbetaling man selv må spare op til
var km = 30; // årligt kørselsbehov
var aar = 6; // lånets løbetid i år
var tn = 12; // antal terminer pr år
var n = aar * tn; // antal terminer i alt, v. n terminer om året
var r = 0.055; // % i rente
// den ydelse vi regner med at billånet skal afvikles med
var y = anuitetsYdelse(G, r/tn, n);
function brugtpris(k, n, x)
{
var s = k * Math.pow(1-p, n) * Math.pow(1-t, x*n);
return s;
}
// se også http://www.matlex.dk/rente.html
function anuitetsgaeld(y, r, n)
{
//TODO Den skal i skrive selv
}
function anuitetsYdelse(g, r, n)
{
//TODO Den skal i skrive selv
}
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'År');
data.addColumn('number', 'Gensalgsværdi');
//TODO her skal i tilføje en kolonne
for (var i = 0; i <= 16; i += 0.25) {
//TODO ****************** den her skal ændre så den tager gælden med
data.addRow([i, brugtpris(K, i, km)]);
//******************************************************************
}
var options = {
width: 1000,
height: 563,
hAxis: {
title: 'År'
},
vAxis: {
title: 'Kr'
}
};
var chart = new google.visualization.LineChart(
document.getElementById('chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart"></div>
<script>
drawChart();
</script>
</body>
</html>
Raw
chart-demo.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Værditab på bil, chart demo</title>
/****************************************************/
// Google charts: https://developers.google.com/chart/
/****************************************************/
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
<script type="text/javascript">
google.load('visualization', '1', { packages: ['corechart'] });
google.setOnLoadCallback(drawChart);
function beregning(i)
{
return (20000 - (i/10)*20000);
}
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'År');
data.addColumn('number', 'Pris');
for (var i = 0; i <= 20; i++) {
data.addRow([i/2, beregning(i/2)]);
}
var options = {
width: 1000,
height: 563,
hAxis: {
title: 'År'
},
vAxis: {
title: 'Gensalgsværdi'
}
};
var chart = new google.visualization.LineChart(
document.getElementById('chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart"></div>
<script>
drawChart();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment