Customized Interactive Input Range with Google Pie Chart - Javascript Google Chart

Javascript examples for Google Chart:Pie Chart

  1. HOME
  2. Javascript
  3. Google Chart
  4. Pie Chart

Description

Customized Interactive Input Range with Google Pie Chart

Demo Code

ResultView the demo in separate window 

<!--/*  ww  w . j  a  v  a2 s  .c  o m*/
Created using JS Bin
http://jsbin.com
Released under the MIT license: http://jsbin.mit-license.org
-->
<html>
   <head> 
      <meta name="viewport" content="width=device-width"> 
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
   </head> 
   <body> 
      <label for="points">Rating:</label> 
      <input type="text" id="textInput" value="5"> 
      <input type="range" name="points" id="points" value="5" min="1" max="5" onchange="drawChartPie()"> 
      <div id="chart_divPie"></div>
       Click 
      <script>
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChartPie);
function drawChartPie() {
  var profitVar2 = parseInt(document.querySelector('#points').value);
  var other = 100 - profitVar2;
  var data3 = google.visualization.arrayToDataTable([
    ['Name', 'Profit Percentage'],
    ['Your Profit Percentage' , profitVar2],
    ['Potential for Growth', other]
  ]);
  var options3 = {
    title: 'Profit Percentage',
    legend: 'none',
    is3D: true,
    pieSliceText: 'value',
  };
  var chart3 = new google.visualization.PieChart(document.getElementById('chart_divPie'));
  chart3.draw(data3, options3);
}

      </script>  
   </body>
</html>

Related Tutorials