<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>
<input type="range" class="sliderGreen" min="0" max="100" step="1" id="myRange" value="10"/>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="chart_div" style="width: 100%; height: 500px;"></div>
</div>
</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: "Ocak", salary: 50000, inflation: 10 },
{ month: "Şubat", salary: 95100, inflation: 1110 },
{ month: "Mart", salary: 75200, inflation: 110 },
{ month: "Nisan", salary: 5300, inflation: 10 },
{ month: "Mayıs", salary: 5400, inflation: 9110 },
{ month: "Haziran", salary: 5500, inflation: 8025 },
{ month: "Temmuz", salary: 75600, inflation: 10 },
{ month: "Ağustos", salary: 5700, inflation: 10 },
{ month: "Eylül", salary: 5800, inflation: 10 },
{ month: "Ekim", salary: 5900, inflation: 10 },
{ month: "Kasım", salary: 6000, inflation: 10 },
{ month: "Aralık", salary: 6100, inflation: 10 },
];
// 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, 99);
// 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' },
hAxis: { title: 'Aylar' },
vAxis: { title: 'Değer' },
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);
});
});
