CODEWITHSUNDEEP
javascriptgoogle-apps-scriptgoogle-visualization
leo
leo

Reputation: 17

problem with google chart , wrong percentages

When google chart receive the second parameter ( value ), the chart show wrongs percentages!!!

This's my code 

<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([ 
['Name', 'values'],
[ document.getElementById('name1').value , document.getElementById('value1').value ],
[ document.getElementById('name2').value, document.getElementById('value2').value ],
]);
var options = {'title':' ', 'width':"100%", 'height':"80%"};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}</script>

and the inputs

<input type="text" name="name1" id="name1" value="employee 1"></input>
<input type="text" name="name2" id="name2" value="employee 2"></input>
<input type="text" name="value1" id="value1" value="25"></input>
<input type="text" name="value2" id="value2" value="75"></input>

Upvotes: 0

Views: 356

Answers (2)

Cooper
Cooper

Reputation: 64110

You just need to cast the values as numbers rather that strings.

gs:

function showDialog() {
  SpreadsheetApp.getUi().showModelessDialog(HtmlService.createHtmlOutputFromFile('ah3'), 'Test')
}

html:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  </head>
  <body>

  <input type="text" name="name1" id="name1" value="employee 1"/>
  <input type="text" name="name2" id="name2" value="employee 2"/>
  <input type="text" name="value1" id="value1" value="25"/>
  <input type="text" name="value2" id="value2" value="75"/>
  <div id="piechart"></div>
    <script>
    window.onload=function(){
      google.charts.setOnLoadCallback(drawChart);
    }
function drawChart() {
  var data = google.visualization.arrayToDataTable([
  ['Name', 'values'],
  [document.getElementById('name1').value , Number(document.getElementById('value1').value) ],
  [document.getElementById('name2').value, Number(document.getElementById('value2').value) ]
  ]);
  var options = {'title':'Title', 'width':"100%", 'height':"80%"};
  var chart = new google.visualization.PieChart(document.getElementById('piechart'));
  chart.draw(data, options);
}
google.charts.load('current', {'packages':['corechart']});

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

Image:

enter image description here

Upvotes: 0

TheMaster
TheMaster

Reputation: 50799

Issue:

HtmlInputElement's value returns string and not number, whereas piechart expects number type

Solution:

Convert it to number.

Snippet:

Number(document.getElementById('value2').value)

Live Sample:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
<style>
div{
 width: 400px;
 height: 400px;
}
</style>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
  var data = google.visualization.arrayToDataTable([ 
    ['Name', 'values'],
    [ document.getElementById('name1').value ,Number( document.getElementById('value1').value) ],
    [ document.getElementById('name2').value, Number(document.getElementById('value2').value) ],
    ]);
  var options = {'title':'Pie chart ', 'width':"100%", 'height':"80%"};
  var chart = new google.visualization.PieChart(document.getElementById('piechart'));
  chart.draw(data, options);
}
  </script>
 </head>
  <body>
  <input type="text" name="name1" id="name1" value="employee 1"></input>
  <input type="text" name="name2" id="name2" value="employee 2"></input>
  <input type="text" name="value1" id="value1" value="25"onchange="drawChart()"></input>
  <input type="text" name="value2" id="value2" value="75" onchange="drawChart()"></input>
  <div id="piechart">Loading...</div>
  </body>
</html>

Upvotes: 1

Related Questions