<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!-- Bootstrap 3 CSS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h1>Dinamik Enflasyon Grafiği</h1>
<p>Kaydırma çubuğunu kullanarak enflasyon oranını değiştirebilir ve maaşlara etkisini görebilirsiniz.</p>
<div class="well" style="border-color: green;">
<center class="h2">% <span id="slider_value">10</span></center>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="chart_div" style="width: 100%; height: 500px;"></div>
</div>
</div>
<div class="row">
<input type="range" class="sliderGreen" min="0" max="100" step="1" id="myRange" value="10"/>
</div>
</div>
.sliderGreen {
width: 100%;
}
#chart_div {
margin-top: 20px;
}
$(document).ready(function () {
// Google Charts yükleme
google.charts.load('current', { packages: ['corechart'] });
function rastgeleSayiUret(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// Başlangıç JSON verileri
const jsonData = [
{ month: "1996", salary: 50000, inflation: 10 },
{ month: "1997", salary: 95100, inflation: 1110 },
{ month: "1998", salary: 75200, inflation: 110 },
{ month: "1999", salary: 5300, inflation: 10 },
{ month: "2000", salary: 5400, inflation: 9110 },
{ month: "2001", salary: 5500, inflation: 8025 },
{ month: "2002", salary: 75600, inflation: 10 },
{ month: "2003", salary: 5700, inflation: 10 },
{ month: "2004", salary: 5800, inflation: 10 },
{ month: "2005", salary: 5900, inflation: 910 },
{ month: "2006", salary: 6000, inflation: 80 },
{ month: "2007", salary: 6100, inflation: 10 },
{ month: "2008", salary: 50000, inflation: 10 },
{ month: "2009", salary: 95100, inflation: 1110 },
{ month: "2010", salary: 75200, inflation: 110 },
{ month: "2011", salary: 5300, inflation: 10 },
{ month: "2012", salary: 5400, inflation: 9110 },
{ month: "2013", salary: 5500, inflation: 8025 },
{ month: "2014", salary: 75600, inflation: 10 },
{ month: "2015", salary: 5700, inflation: 10 },
{ month: "2016", salary: 5800, inflation: 10 },
{ month: "2017", salary: 5900, inflation: 910 },
{ month: "2018", salary: 5700, inflation: 10 },
{ month: "2019", salary: 5800, inflation: 10 },
{ month: "2020", salary: 5900, inflation: 910 },
{ month: "2021", salary: 6000, inflation: 80 },
{ month: "2022", salary: 6100, inflation: 10 },
{ month: "2023", salary: 50000, inflation: 10 },
{ month: "2024", salary: 95100, inflation: 1110 }
];
// Slider değişiminde enflasyonu güncelle
$('#myRange').on('input change', function () {
const newInflation = parseFloat($(this).val());
$('#slider_value').text(newInflation);
// 2 haneli sayı üretmek için:
let ikiHaneliSayi = rastgeleSayiUret(10, 99);
let ikiHaneliSayi1 = rastgeleSayiUret(10, 1000);
// Yeni verilerle grafiği güncelle
const updatedData = jsonData.map(item => {
const adjustedSalary = item.salary * ( ikiHaneliSayi + (newInflation * ikiHaneliSayi) / 100);
const newenflation = item.inflation * ( ikiHaneliSayi1 + (newInflation * ikiHaneliSayi1) / 100);
return { ...item, inflation: newenflation.toFixed(2), salary: adjustedSalary.toFixed(2) };
});
// Grafiği yeniden çiz
google.charts.setOnLoadCallback(function () {
drawChart(updatedData);
});
});
// Grafik çizme fonksiyonu
function drawChart(dataArray) {
const data = new google.visualization.DataTable();
// Sütunları tanımla
data.addColumn('string', 'Ay');
data.addColumn('number', 'Maaş');
data.addColumn('number', 'Enflasyon (%)');
// Verileri ekle
dataArray.forEach(item => {
data.addRow([item.month, parseFloat(item.salary), parseFloat(item.inflation)]);
});
// Grafik seçenekleri
const options = {
title: 'Aylık Maaş ve Enflasyon Değişimi',
curveType: 'function',
legend: { position: 'bottom' },
annotations: {
textStyle: {
fontSize: 12,
bold: true,
color: '#000', // Etiket rengi
},
},
pointSize: 5, // Nokta boyutları
};
// Grafiği çiz
const chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
// İlk yüklemede grafiği çiz
google.charts.setOnLoadCallback(function () {
drawChart(jsonData);
});
});
