Google pie chart using js variable

Question

first i appologize i am a total noob and even more noob in js. I use to code in php.

I found this nice pie chart by google https://developers.google.com/chart/interactive/docs/gallery/piechart

Im trying to built it with my own data (took from SQL with php and converted into php)

My problem is that Js dosent seem to accept my variable as data for the table and i dont know why. Here is my code * I have 3 php variable converted to js ($num_ra1 to var countra1) , etc)

Please any help would be nice, i put a lots of time trying to make this work. Also the chrome tool send this error : Uncaught Error: Type mismatch. Value 17 does not match type number in column index 1 at gvjs_Ll

Code : PHP and SQL

<?php
$hostname='mysql:host=localhost;dbname=secure_login';
$username='root';
$password='root';
$tbl_2='econo1';
//create PDO connection
try {
$dbh = new PDO($hostname,$username,$password);
$dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
// to get the data
$sql_ra1="SELECT COUNT(reduire_affecte1) AS ra1 FROM econo1 WHERE reduire_affecte1 != 0";
$sql_rf2="SELECT COUNT(reduire_facon2) AS rf2 FROM econo1 WHERE reduire_facon2 != 0";
$sql_ni3="SELECT COUNT(non_important3) AS ni3 FROM econo1 WHERE non_important3 != 0";

$result_ra1=$dbh->prepare($sql_ra1);
$result_ra1->execute(); 


$result_rf2=$dbh->prepare($sql_rf2);
$result_rf2->execute(); 

//$count_rf2=$result_rf2->fetch(PDO::FETCH_ASSOC); (pending)

$result_ni3=$dbh->prepare($sql_ni3);
$result_ni3->execute(); 

//$count_ni3=$result_ni3->fetch(PDO::FETCH_ASSOC); (pending)
}
//To hide the password if error
catch (Exception $e)  {
        die('Erreur : ' . $e->getMessage());
}

while ($count_ra1=$result_ra1->fetch(PDO::FETCH_OBJ))
{
    $num_ra1=$count_ra1->ra1;
}

while ($count_rf2=$result_rf2->fetch(PDO::FETCH_OBJ))
{
    $num_rf2=$count_rf2->rf2;
}

while ($count_ni3=$result_ni3->fetch(PDO::FETCH_OBJ))
{
    $num_ni3=$count_ni3->ni3;
}

<!DOCTYPE html>
<html>
  <head>
<meta charset="utf-8">
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

          // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table, 
      // instantiates the pie chart, passes in the data and
      // draws it.
// get the php result 
var countra1="<?php echo json_encode($num_ra1); ?>";
var countrf2="<?php echo json_encode($num_rf2); ?>";
var countni3="<?php echo json_encode($num_ni3); ?>";
      function drawChart() {

      // Create the data table.
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Réponse');
      data.addColumn('number', 'Choix');
      data.addRows([
        ['reduire affecter', countra1],
        ['reduire façon', countrf2],
        ['non important', countni3],
      ]);

// Set chart options
      var options = {'title':'votre opinion',
                     'width':400,
                     'height':300};

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
    </script>
  </head>

  <body>
<!--Div that will hold the pie chart-->
    <div id="chart_div" style="width:400; height:300"></div>
  </body>
</html>

EDIT 2016-11-17 22h21 Solution found : i just want to update this for the other user that might have the problem. I find the solution, actually json_encode was thinking that the code was text and he put " " around the value of the php variable, and because i was myself already putting some "" around the php code, the number return by the php variable was between 2 double quote : " " 10 " " so js was seing it as a non numeric value. Solution : Remove my double quote. Now everything works perfectly

var countra1=parseInt(<?php echo json_encode($num_ra1); ?>) || 0;
var countrf2=parseInt(<?php echo json_encode($num_rf2); ?>) || 0;
var countni3=parseInt(<?php echo json_encode($num_ni3); ?>) || 0;

And now my problem seem to be solved at 70%, the only piece missing is an error in the syntax. I guess its in the use of parseInt. The chrome devtool tells me its an ')' missing. If someone see something please let me know!

score 0 · Answer 1 · answered Nov 15 '16 at 19:17

0

I tried running your code by replacing countra1,countrf2,countni3 with numeric values and the code worked.

Please check if the values for countra1,countrf2,countni3 are numeric.

answered Nov 15 '16 at 19:17

user3407386

152
2
9

Yes you are right the code work well with numeric value. countra1 (and the other) are variable extract from php as $num_ra1 etc. and those php variable are extract from SQL. When i try to echo the result of $num_ra1, the output work and yes, its numeric. Thats why i dont understand, my guess is the problem came from the way i use the variable in js. – P-A Viel Nov 15 '16 at 19:20

ventiseis · Accepted Answer · 2016-11-16T19:30:47.977

0

If you can provide always numbers - remove the quotes.

Use:

var countni3=<?php echo json_encode($num_ni3); ?>;

Or if you aren't sure:

   var countni3=parseInt("<?php echo json_encode($num_ni3); ?>") || 0;

Example:

var countra1=parseInt("<?php $num_ra1 = 10; echo json_encode($num_ra1); ?>") || 0;
var countrf2=parseInt("<?php $num_rf2 = 20; echo json_encode($num_rf2); ?>") || 0;
var countni3=parseInt("<?php $num_ni3 = 30; echo json_encode($num_ni3); ?>") || 0;

edited Nov 16 '16 at 19:30

answered Nov 15 '16 at 19:39

ventiseis

3,029
11
32
49

Related answers: [parseInt](http://stackoverflow.com/a/6736521/1641867). Or keep strings and use an [object as value](http://stackoverflow.com/a/24367948/1641867) – ventiseis Nov 15 '16 at 19:42
I think you have the good anwser with your second solution, or at least a part of it. Now when i go in the devtools of chrome i see the numeric value of my anwser. I dont really understand why cause my variable are just a count of the number of colomn so it cant be anything else than numeric. But i still have the following problem : it seem that their is a ')' missing after the argument list (thats is what de devtool tells me). Could you tell me if their is a ")" missing, I copy paste your line, also if you could explain to me the end of the code i would like to understand it. Thank you – P-A Viel Nov 16 '16 at 01:32
I don't see an error. I copied the code of this question and added an example variable declaration. Everything works (see screenshot). [Source in Pastebin](http://pastebin.com/cLi0ybfb), used [PhpFiddle](http://phpfiddle.org/) – ventiseis Nov 16 '16 at 19:34
I just check, you are totally right. I made some test with the devtool in chrome. In "source" my code look like this : var countra1=parseInt(""17"") || 0; So i guess chrome see the number but dosent recognize it as a number ? Also, the number appear in blue, when i try your code with the value of 10, the number appear in red and the code is working. As i say, my php variable came from a SELECT COUNT function in php. When i try to echo the value in php, everything works fine. I guess i am doing something wrong with this. I will add my php code to my post. – P-A Viel Nov 17 '16 at 00:17
I know nothing about php, but look [at this answer](http://stackoverflow.com/a/5323169/1641867). What about `$num_ra1=intval($count_ra1->ra1);`. Or remove the quotes from `parseInt`: `var countni3=parseInt() || 0;`. – ventiseis Nov 17 '16 at 20:15
1

Hi guys, i just want to update this for the other user that might have the problem. I find the solution, actually json_encode was thinking that the code was text and he put " " around the value of the php variable, and because i was myself already putting some "" around the php code, the number return by the php variable was between 2 double quote : " " 10 " " so js was seing it as a non numeric value. Solution : Remove my double quote. – P-A Viel Nov 18 '16 at 03:21

Google pie chart using js variable

2 Answers2