How to pass MySQL query data to JavaScript variable?

Question

Here am getting data from mysql..

if (!empty($result1)) {
 while ($row1 = mysqli_fetch_array($result1)) {
 $caseno = $row1['cases'];
 echo "<b>" . $caseno . "<br>";
 }
}

and i want pass the data which is there in $caseno to my below JavaScript..

<script type="text/javascript">
 var gaugevalue = document.getElementById("$caseno");
 var myConfig2 = {
 "type": "gauge",
 "scale-r": {
 "aperture": 200, //Scale Range
 "values": "0:50:10" //and minimum, maximum, and step scale values.
 },
 "series": [{"values": [gaugevalue]}]
 //"series":[{"values":[40]}]
 };
 zingchart.render({
 id: 'myChart',
 data: myConfig2,
 height: "90%",
 width: "90%"
 });
</script>

• user3304128: Thanks Victor for your replay, still it is not working..
• Victor: Sorry, I did not notice that you do not have an element with such an identifier. So, check my update.
• Victor: The gaugevalue must be an array of integers, not a single $caseno. I updated my answer.

Answer 1

I analyzed your code more attentively and noticed that gaugevalue must be an array of integers, while you are trying to pass to it a DOM element. So your full code should look like this:

<?php
$gauge_values = [];
if (!empty($result1)) {
 while ($row1 = mysqli_fetch_array($result1)) {
 $gauge_values[] = $row1['cases'];
 }
}
?>
<script type="text/javascript">
 var myConfig2 = {
 "type": "gauge",
 "scale-r": {
 "aperture": 200, //Scale Range
 "values": "0:50:10" //and minimum, maximum, and step scale values.
 },
 "series": [{"values": <?php echo json_encode($gauge_values); ?>}]
 };
 zingchart.render({
 id: 'myChart',
 data: myConfig2,
 height: "90%",
 width: "90%"
 });
</script>

Answer 2

Try this way instead:

<script type="text/javascript">
 var gaugevalue = "<?php echo $caseno ?>";
 var gaugevalue = "<?= echo $caseno ?>"; //for shorthand
</script>

Answer 3

1st Method:

In your php code, you can do:

$caseno = $row1['cases'];

In your javascript code, you can do:

var gaugevalue = "<?php echo $caseno ?>";

2nd Method:

In your php code, you can do:

echo '<input type="hidden" id="caseno" value="'.$caseno.'">';

In your javascript code, you can do:

var gaugevalue = document.getElementById("caseno");

It's simple and easy.

• user3304128: Thanks Inzamam for your help.. i have modified according to your code, still not working..
• Inzamam Idrees: you are coding in the same file or different? Please specify this also?

Answer 4

put you JavaScript in php:

<?php
echo "
<script type="text/javascript">
 var gaugevalue = document.getElementById("$caseno");
 var myConfig2 = {
 "type":"gauge",
 "scale-r":{
 "aperture":200, //Scale Range
 "values":"0:50:10" //and minimum, maximum, and step scale values.
 },
 "series":[{"values":[gaugevalue]}]
 //"series":[{"values":[40]}]
 };
 zingchart.render({ 
 id : 'myChart', 
 data : myConfig2, 
 height : "90%", 
 width: "90%"
 });
</script>
"
?>

You can pass your variable like this.

• user3304128: Thanks toykam, am getting Parse error: syntax error, unexpected T_STRING, expecting ',
• toykam: Escape the strings for it to work by changing the double qoutes in the JavaScript code.