echo php inside javascript

Question

I need to get my MySQL php data array into JavaScript which utilises highcharts library. I'm stuck at echoing some php within JavaScript that holds the data for charting. so far i can echo the php into a format which I've tested and copied into the JavaScript and it works fine, but just need that little help in writing the JavaScript with the php..

php code: (I've included br/ tags so that it easy to look at)

for($i=0; $i<4; $i++){
    echo '{type: "column",<br/>';
    echo 'name: '.($i+1).',<br/>';
    echo 'data: [';
    for($j=0; $j<count($data); $j++){
        echo $data[$j][$i+1].',';
    }
    echo ']},<br/>';
}
echo '{
    type: "spline",
    name: "Strike Rate",<br/>';
echo 'data: [';
for($i=0; $i<count($data); $i++){
    echo $data[$i][7].',';     
}
echo '],<br/>';
echo 'marker: {
    lineWidth: 2,
    lineColor: Highcharts.getOptions().colors[3],
    fillColor: "white"
}';

output of the php:

{   type: "column", 
    name: 1,
    data: [4,1,3,2,4,3,5,1,3,1,1,2,2,0,0,0,0,0,]},
{   type: "column",
    name: 2,
    data: [5,3,3,4,2,3,3,2,0,3,1,2,1,0,0,0,0,0,]},
{   type: "column",
    name: 3,
    data: [2,1,5,5,2,3,1,2,4,5,1,0,1,0,0,0,0,0,]},
{   type: "column",
    name: 4,
    data: [6,4,4,1,3,3,5,2,3,0,0,1,0,0,0,0,0,0,]},
{   type: "spline",
    name: "Strike Rate",
    data:     [13.33,3.45,9.38,6.67,14.81,10.00,20.00,3.85,11.54,4.76,7.14,15.38,28.57,0.00,0.00,0.00,0.00,0.00,],
    marker: {
        lineWidth: 2,
        lineColor: Highcharts.getOptions().colors[3],
        fillColor: "white"
    }

I've tried json_encode and only echoing the php variables, but nothing I can do can make it work.

UPDATE the answer was more simpler than just echoing PHP output into Javascript (I thought this was possible)... Anyways, a BIG thank you to everyone who contributed, without such a great community I'd find it really hard to learn new things, find great advice and hints to correct the issues.

With the right advice, I was able to just create Javascript variables and use them accordingly.

<script>
...

var myArray = <?php echo json_encode($data[1]['data']); ?>; 
....
{
type: 'column',
name: '1',
data: myArray
},
....
</script>

Happy New Year too! Cheers Steve

Answer 1

You are mixing PHP, JavaScript and HTML which ends up in a complete mess. Here is an example how you can create a JavaScript object literal with PHP:

<?php

$values = array();

for ($i=0; $i < 4; $i++) {
    $value = array(
        'type' => 'column',
        'name' => $i + 1,
        'data' => array()
    );
    for ($j=0; $j < count($data); $j++){
         $value['data'][] = $data[$j][$i+1];
    }
    $values[] = $value;
}
?>

<!-- HTML stuff here -->

<script>
    var data = <?php echo json_encode($values); ?>;
    // JavaScript that processes `data` here
</script>

<!-- More HTML here -->

The idea is:

• Build your data structure first, using arrays of arrays.
• Use json_encode to convert the array into JSON which is also a valid object literal in JS.
• Embed PHP into HTML or JS, don't generate (manually) HTML or JS.

---

I don't know in which format the data has to be, but I leave this for you to find out. Iterating over and extracting the data can probably be improved as well, but since we don't know what data you have, this has to suffice now.