1

I am creating a doughnut chart and where I am having trouble is all of my data is being pulled server side. Here is the html for the chart with set values. How would I go about echoing my php variables as the values?

<html>
<head>
<script src="Chart.js"></script>
<style>
body{
padding: 0;
margin: 0;
}
#canvas-holder{
width:25%;
}
</style>
</head>
<body>
<div id="canvas-holder">
<canvas id="chart-area" width="500" height="500"></canvas>
</div>
<script>
var doughnutData = [
{
value: 500,
color:"#941616",
highlight: "#FF0000",
label: "Needs Agreement"
},

{
value: 500,
color: "#575757",
highlight: "#777777",
label: "Pre-Production"
},

{
value: 500,
color: "#aaaaaa",
highlight: "#cccccc",
label: "In Production"
}
];
window.onload = function(){
var ctx = document.getElementById("chart-area").getContext("2d");
window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive : true});
};
</script>
</body>
</html>

My php code grabs the data that is need via api and then stores each value in a variable eg.

<?php
$needs_agreement = 148000;
$pre_produciton = 137000;
$in_production = 3678000;
?>

Again, what is the best method for echoing the php variables where value: is above?

UPDATE:

var doughnutData = [
{
value: <?php echo $needs_agreement ?>,
color:"#941616",
highlight: "#FF0000",
label: "Needs Agreement"
},

{
value: <?php echo $pre_production ?>,
color: "#575757",
highlight: "#777777",
label: "Pre-Production"
},

{
value: <?php echo $in_production ?>,
color: "#aaaaaa",
highlight: "#cccccc",
label: "In Production"
}
];

The Above code which was suggested as the answer did not work.

Brent Morse
  • 19
  • 3
  • possible duplicate of [How to pass variables and data from PHP to JavaScript?](http://stackoverflow.com/questions/23740548/how-to-pass-variables-and-data-from-php-to-javascript) – Stephen P Nov 28 '14 at 20:33
  • You are using the _3. Echo the data directly to JavaScript_ approach from [this accepted answer](http://stackoverflow.com/a/23740549/17300) – Stephen P Nov 28 '14 at 20:53
  • @StephenP Yes I have tried echoing using the method in that answer with no success. – Brent Morse Nov 28 '14 at 21:00

2 Answers2

2

Nothing stops you from simply echo'ing PHP variables in the middle of the javascript.

<script>
var doughnutData = [
{
value: <?php echo $some_data ?>,
color:"#941616",
highlight: "#FF0000",
label: "Needs Agreement"
}
</script>

All of the PHP is processed before sending the document to the browser, so the javascript will be complete by the time it gets executed by the client.

Erik
  • 3,598
  • 14
  • 29
  • Do you mean the php will be complete by the time it gets executed by client? – Grice Nov 28 '14 at 20:30
  • Yes! PHP is server side and javascript is client side. All PHP is complete before any JS is ran. To extend on this answer, consider json encoding your data with the PHP and then parsing it in the javascript. This will give you a functional javascript object and will make it a bit easier to move a ton of values. I.e. var data = JSON.parse(''); – Mikel Bitson Nov 28 '14 at 20:31
  • No the the javascript code will be complete. As it reads above, would not run because it contains a chunk of PHP in the middle, btut that will have been replaced before sending to the browser. – Erik Nov 28 '14 at 20:31
  • @Erik I see, I read it as if you were saying the javascript had executed by the time it gets to client. What you meant was the javascript is valid and ready to be executed. – Grice Nov 28 '14 at 20:33
0

I finally got it working, at the very end up of my php file:

echo '<script>' . 'var zx =' . $total_need . '</script>';
echo '<script>' . 'var zy =' . $total_pre . '</script>';
echo '<script>' . 'var zz =' . $total_in . '</script>';

The html section would then look like this:

var doughnutData = [
{
value: zx,
color:"#941616",
highlight: "#FF0000",
label: "Needs Agreement"
},

{
value: zy,
color: "#575757",
highlight: "#777777",
label: "Pre-Production"
},

{
value: zz,
color: "#aaaaaa",
highlight: "#cccccc",
label: "In Production"
}
];
Brent Morse
  • 19
  • 3