Parse PHP output as variable to javascript

Question

I'm trying to populate a Flot chart using the example from here. I've been trying for hours, but can't get the PHP output to be parsed to the Javascript variable. To break it down here is the example with the hard coded data which works...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">
body { font-family: Verdana, Arial, sans-serif; font-size: 12px; }
#placeholder { width: 450px; height: 200px; }
</style>

<!--[if lte IE 8]><script type="text/javascript" language="javascript" src="excanvas.min.js"></script><![endif]-->
<script type="text/javascript" language="javascript" src="flot/jquery.js"></script>
<script type="text/javascript" language="javascript" src="flot/jquery.flot.js"></script>

<script type="text/javascript">
var d1 = [[1,7],[2,8],[3,7],[4,7]];

$(document).ready(function () {
    $.plot($("#placeholder"), [d1]);
});
</script>
</head>

<body>
    <div id="placeholder"></div>
</body>
</html>

The series data used above is the output of a php file I have set up to query my mysql database. But when I combine the two into one .HTML page I am unable to parse the PHP output to the javascript plot area. Below is what I have...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">
body { font-family: Verdana, Arial, sans-serif; font-size: 12px; }
#placeholder { width: 450px; height: 200px; }
</style>

<!--[if lte IE 8]><script type="text/javascript" language="javascript" src="excanvas.min.js"></script><![endif]-->
<script type="text/javascript" language="javascript" src="flot/jquery.js"></script>
<script type="text/javascript" language="javascript" src="flot/jquery.flot.js"></script>

<?php

    $server = "myserver:1234";
    $user="dbuser";
    $password="userpass";  
    $database = "dbname";

    $connection = mysql_connect($server,$user,$password);
    $db = mysql_select_db($database,$connection);

    $query = "SELECT X, Y FROM dbtable";
    $result = mysql_query($query);        

    while($row = mysql_fetch_assoc($result))
    {
        $dataset1[] = array($row['X'],$row['Y']);
    }
    $final = json_encode($dataset1,JSON_NUMERIC_CHECK);

?>  

<script type="text/javascript">
var d1 = <?php echo $final; ?>;

$(document).ready(function () {
    $.plot($("#placeholder"), [d1]);
});
</script>
</head>

<body>
    <div id="placeholder"></div>
</body>
</html>

Finally I'd like to update this chart dynamically too if possible, but first things first! Thanks in advance:)

Change var d1 = <?php $final; ?>; to var d1 = <?php echo $final; ?>; — Amal
– Amal, Commented Oct 19, 2013 at 8:26
Sorry, typo creating the question. I have tried the echo, still a blank render. I'll update the question. — square_eyes
– square_eyes, Commented Oct 19, 2013 at 8:29
What does your browser console say? Does it output any errors? What's the output of var_dump($final);? — Amal
– Amal, Commented Oct 19, 2013 at 8:42
When I add var_dump to the standalone php script it's string(2541) "[[1,7],[2,8],[3,7],[4,7]...]" I think the php script, when embedded in the HTML doc isn't rendering properly somehow. But I can't see any errors. Where should I be looking? — square_eyes
– square_eyes, Commented Oct 19, 2013 at 8:51

Community · Accepted Answer · 2017-05-23 11:57:21Z

2

But when I combine the two into one .HTML page I am unable to parse the PHP output to the javascript plot area

PHP scripts need to have .php extension. If you try to output PHP code in an HTML page, it'll just get displayed as plain text. If you want the code to get executed (which you probably do), change the extension to .php.

Note that it's possible parse PHP in HTML pages with some .htaccess tricks, but I doubt you need that.

edited May 23, 2017 at 11:57

CommunityBot

11 silver badge

answered Oct 19, 2013 at 9:27

Amal

76.8k18 gold badges133 silver badges154 bronze badges

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

2 Comments

square_eyes Over a year ago

Thanks for the chat! Honestly I would have gone in circles trying everything else and continued to completely overlook this.

Amal Over a year ago

@square_eyes: Glad to have been of help. Good luck with your project :)

kasper Taeymans · Accepted Answer · 2013-10-19 08:27:30Z

0

you don't echo $final variable

var d1 = <?php echo $final; ?>

answered Oct 19, 2013 at 8:27

kasper Taeymans

7,0365 gold badges34 silver badges51 bronze badges

7 Comments

kasper Taeymans Over a year ago

What do you see if you see in the parsed html source?

square_eyes Over a year ago

Strange, the PHP tags for the DB query seem to be dropped.

square_eyes Over a year ago

PHP doesn't seem to be rendering to the page.

kasper Taeymans Over a year ago

well, do you have php installed? does your file have a .php extension and are you accessing the file via http (in case you are on localhost)?

square_eyes Over a year ago

Yes PHP installed. My file is .HTML there is PHP embedded in it.

|

Sajuna Fernando · Accepted Answer · 2013-10-19 08:27:54Z

0

Try this

var d1 = <?=$final; ?>;

answered Oct 19, 2013 at 8:27

Sajuna Fernando

1,38411 silver badges17 bronze badges

1 Comment

Sajuna Fernando Over a year ago

Can you var_dump($final); and console.log(d1); before your document ready

Paul Osborne · Accepted Answer · 2013-10-19 08:28:06Z

0

You're not actually echo'ing out your result string.

<?= $final; ?>

answered Oct 19, 2013 at 8:28

Paul Osborne

1,5701 gold badge10 silver badges11 bronze badges

1 Comment

Paul Osborne Over a year ago

What do $final and d1 contain when your script executes?

Collectives™ on Stack Overflow

Parse PHP output as variable to javascript

4 Answers 4

2 Comments

7 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

7 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related