CODEWITHSUNDEEP
phpjavascriptjquery
Robert John Concepcion
Robert John Concepcion

Reputation: 237

Passing variable values from Php to Javascript

 <!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Highcharts Example</title>
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript">
$(function () {
    var newanswer = <?php echo"$newanswer"; ?>
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'column'
            },
            title: {
                text: 'Monthly Progress Reports'
            },
            subtitle: {
                text: 'Source: Sales Department'
            },
            xAxis: {
                categories: [
                    'Jan',
                    'Feb',
                    'Mar',
                    'Apr',
                    'May',
                    'Jun',
                    'Jul',
                    'Aug',
                    'Sep',
                    'Oct',
                    'Nov',
                    'Dec'
                ]
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Range'
                }
            },
            legend: {
                layout: 'vertical',
                backgroundColor: '#FFFFFF',
                align: 'left',
                verticalAlign: 'top',
                x: 100,
                y: 70,
                floating: true,
                shadow: true
            },
            tooltip: {
                formatter: function() {
                    return ''+
                        this.x +': '+ this.y +' Star';
                }
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
                series: [{
                name: '5 Star', //Blue
                data: [newanswer, 20, 30, 40, 50, 60, 70, 80, 90, 95, 10, 20]

            }, {
                name: '4 Star', //Red
                 data: [4, 20, 30, 40, 50, 60, 70, 80, 90, 95, 10, 20]

            }, {
                name: '3 Star', // Green
                data: [3, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]

            }, {
                name: '2 Star', //violet
                data: [2, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]

            }, {
                name: '1 Star', //lightblue
                data: [1, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]

            }]
        });
    });

});
        </script>
    </head>
<body>
<script src="js/highcharts.js"></script>
<script src="js/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

<?php
$newanswer = 50;
?>

</body>
</html>

is this possible to pass a php value to a javascript? i need to do it in order to put the value of the query of mysql into the graph and the graph is coded by java script. thx

the problem is this line

<?php $newanswer = 50; ?>

cant pass the value on this line:

 var newanswer = <?php echo"$newanswer"; ?>

so that the 50 value dont show in this line: 

 data: [newanswer, 20, 30, 40, 50, 60, 70, 80, 90, 95, 10, 20]

Upvotes: 0

Views: 467

Answers (5)

ilias
ilias

Reputation: 1

ehco the value to a hidden field

then go to javascript and add the following code 

var xi=(document.getElementById("aa")).value;

Upvotes: 0

Gui Del Frate
Gui Del Frate

Reputation: 691

You're defining the PHP variable after use it, in the end of code. Just define it before pass it to JavaScript.

Upvotes: 0

iLaYa ツ
iLaYa ツ

Reputation: 4017

Put a hidden value in form like 

<input type="hidden" name="newanswer" id="newanswer" value="<?=$newanswer; ?>" >

And now using getElementById you can get the value of $newanswer

Upvotes: 0

Marc B
Marc B

Reputation: 360882

PHP has no concept of JS, so you could simply have...

data: [<?php echo $newanswer ?>, 20, 30, 40, 50, 60, 70, 80, 90, 95, 10, 20]

However, please note that directly outputting into a JS code block means you have to be extraordinarily careful to not introduce a syntax error into the JS code. one error and the whole code block gets killed by the JS parser. As such, as a general rule, you should ALWAYS use json_encode() in PHP to ensure you're generating syntactically valid JS.

This applies even if it's simply an integer you're outputting - best to get into the json encoding habit now. it'll save you a lot of misery down the road:

data: [<?php echo json_encode($newanswer) ?>, 20, 30, 40, 50, 60, 70, 80, 90, 95, 10, 20]

because of that, you'll end up with valis JS even if $newanswer is null or otherwise undefined.

Upvotes: 3

Ja͢ck
Ja͢ck

Reputation: 173662

This part of your code has to move all the way up:

<?php
$newanswer = 50;
?>

And this part:

var newanswer = <?php echo"$newanswer"; ?>

Is better rewritten as:

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

Edit

That last part can be written even better, seen in Marc B's answer.

Upvotes: 2

Related Questions