<!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]
-
some of my reference in passing the value: p2p.wrox.com/php-faqs/…Robert John Concepcion– Robert John Concepcion2012年10月16日 03:56:45 +00:00Commented Oct 16, 2012 at 3:56
-
2.. Of course it doesn't work? You're using the variable before you define it.Daedalus– Daedalus2012年10月16日 03:57:06 +00:00Commented Oct 16, 2012 at 3:57
5 Answers 5
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.
Comments
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.
Comments
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
1 Comment
You're defining the PHP variable after use it, in the end of code. Just define it before pass it to JavaScript.
Comments
ehco the value to a hidden field
then go to javascript and add the following code
var xi=(document.getElementById("aa")).value;