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:)

Sorry, typo creating the question. I have tried the echo, still a blank render. I'll update the question. — square_eyes, Oct 19 '13 at 08:29
What does your browser console say? Does it output any errors? What's the output of `var_dump($final);`? — Amal Murali, Oct 19 '13 at 08: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, Oct 19 '13 at 08:51

score 2 · Accepted Answer · edited May 23 '17 at 11:57

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 '17 at 11:57

Community

1
1

answered Oct 19 '13 at 09:27

Amal Murali

75,622
18
128
150

Thanks for the chat! Honestly I would have gone in circles trying everything else and continued to completely overlook this. – square_eyes Oct 19 '13 at 09:28
@square_eyes: Glad to have been of help. Good luck with your project :) – Amal Murali Oct 19 '13 at 09:30

score 0 · Answer 2 · answered Oct 19 '13 at 08:27

0

you don't echo $final variable

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

answered Oct 19 '13 at 08:27

kasper Taeymans

6,950
5
32
51

What do you see if you see in the parsed html source? – kasper Taeymans Oct 19 '13 at 08:35
Strange, the PHP tags for the DB query seem to be dropped. – square_eyes Oct 19 '13 at 08:39
PHP doesn't seem to be rendering to the page. – square_eyes Oct 19 '13 at 09:04
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)? – kasper Taeymans Oct 19 '13 at 09:08
Yes PHP installed. My file is .HTML there is PHP embedded in it. – square_eyes Oct 19 '13 at 09:10
you need to change your file extension to .php – kasper Taeymans Oct 19 '13 at 09:13
Yes I'm in a chat now. We just reached the same conclusion:) Still not rendering but getting there as the variable is now parsed. – square_eyes Oct 19 '13 at 09:16

score 0 · Answer 3 · answered Oct 19 '13 at 08:27

0

Try this

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

answered Oct 19 '13 at 08:27

Sajuna Fernando

1,364
9
16

Can you var_dump($final); and console.log(d1); before your document ready – Sajuna Fernando Oct 19 '13 at 08:34

score 0 · Answer 4 · answered Oct 19 '13 at 08:28

0

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

<?= $final; ?>

answered Oct 19 '13 at 08:28

Paul Osborne

1,550
1
10
11

What do `$final` and `d1` contain when your script executes? – Paul Osborne Oct 19 '13 at 08:34

Parse PHP output as variable to javascript

4 Answers4