Bootstrap Snippet How change values Google Pie Charts refresh. using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
.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 */
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(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', '#157C3B']
  };
  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() );
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"How change values Google Pie Charts refresh."
Bootstrap 3.1.0 Snippet by muhittinbudak

Related: See More

Questions / Comments:

"How change values Google Pie Charts refresh." Bootstrap 3.1.0 Snippet by muhittinbudak

Related: See More

Questions / Comments:

"How change values Google Pie Charts refresh."
Bootstrap 3.1.0 Snippet by muhittinbudak