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>

Sorry, I did not notice that you do not have an element with such an identifier. So, check my update. — Victor
– Victor, Commented Dec 15, 2018 at 6:24
The gaugevalue must be an array of integers, not a single $caseno. I updated my answer. — Victor
– Victor, Commented Dec 15, 2018 at 6:40

Victor · Accepted Answer · 2018-12-15 06:38:19Z

2

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>

edited Dec 15, 2018 at 6:38

answered Dec 15, 2018 at 6:10

Victor

5,7992 gold badges29 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Channeth Khon · Accepted Answer · 2018-12-15 06:28:15Z

1

Try this way instead:

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

answered Dec 15, 2018 at 6:28

Channeth Khon

151 bronze badge

Comments

Inzamam Idrees · Accepted Answer · 2018-12-15 06:28:31Z

0

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.

edited Dec 15, 2018 at 6:28

answered Dec 15, 2018 at 6:17

Inzamam Idrees

1,98717 silver badges28 bronze badges

2 Comments

user3304128 Over a year ago

Thanks Inzamam for your help.. i have modified according to your code, still not working..

Inzamam Idrees Over a year ago

you are coding in the same file or different? Please specify this also?

toykam · Accepted Answer · 2018-12-15 06:11:49Z

-1

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.

answered Dec 15, 2018 at 6:11

toykam

223 bronze badges

2 Comments

user3304128 Over a year ago

Thanks toykam, am getting Parse error: syntax error, unexpected T_STRING, expecting ',

toykam Over a year ago

Escape the strings for it to work by changing the double qoutes in the JavaScript code.

Collectives™ on Stack Overflow

How to pass MySQL query data to JavaScript variable?

4 Answers 4

Comments

Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related