<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ---------->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Strait">
<div class="container" style="font-family: 'Strait', sans-serif;">
<div class="row" style="margin:10px">
<div class="chrome">
<div class="well" style="border-color: blue;"><center class="h1">[<span id="aylik"></span>-<span id="rezerv"></span>] % <span id="slider_value">18</span></center></div>
<br>
<input type="range" min="0" max="100" value="18" step="1" class="sliderBlue" id="myRange"/>
<center><div id="chart_div"></div></center>
</div>
</div>
</div>
.sliderBlue{
accent-color: blue;
}
#chart_div {
width: 100%;
height: 350px; /* veya istediğiniz yükseklik */
}
#chart_div text {
font-family: 'Strait', sans-serif;
font-size: 21px;
color: #780000 !important; /* Metin rengi */
}
$(document).ready(function(){
var degerVal = 18;
$('#aylik').text(degerVal);
$('#rezerv').text(100-degerVal);
$("slider_value").text(degerVal);
//------başlangıç
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['', 'Views'],
['A', degerVal],
['B', 100-degerVal]
]);
var options = {
legend: 'none',
pieSliceText: 'percentage',
chartArea: {'width': '80%', 'height': '80%'},
legend: 'none',
backgroundColor: {fill: 'transparent'},
pieSliceBorderColor: 'transparent',
colors: ['#0000FF', '#71641C']
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
//--------------bitiş
$(document).on('input change', '#myRange', function() {
//$('#slider_value').html( $(this).val() );
$('#slider_value').html( $(this).val() );
var onikiAylik = $(this).val();
$('#aylik').text(onikiAylik);
$('#rezerv').text(100-onikiAylik);
drawChart(onikiAylik);
});
function drawChart(aylik=10) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'text');
data.addColumn('number', 'number');
data.addRows(2);
data.setValue(0, 0, 'A');
data.setValue(0, 1, aylik);
data.setValue(1, 0, 'B');
data.setValue(1, 1, 100 - aylik);
var options = {
legend: 'none',
//pieSliceText: 'value', 'percentage', 'label', 'none'
pieSliceText: 'percentage',
chartArea: {'width': '80%', 'height': '80%'},
legend: 'none',
backgroundColor: {fill: 'transparent'},
pieSliceBorderColor: 'transparent',
colors: ['#0000FF', '#71641C']
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
}); //endjquery
