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

Why are you echoing <br /> tags into JavaScript? That's HTML, not JavaScript. — David
– David, Commented Jan 2, 2013 at 13:05

Felix Kling · Accepted Answer · 2013-01-02 13:12:31Z

5

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.

answered Jan 2, 2013 at 13:12

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

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

1 Comment

Steve Clarke Over a year ago

thanks felix, i'm using your and stuart's suggestions... i'll report back soon! thanks :)

Stuart Wakefield · Accepted Answer · 2013-01-02 13:21:07Z

3

The problem with outputting data like this is reason for the error, it is very difficult to match up all of the braces. You appear to be missing a final curly brace and array braces around the entire thing.

Instead you could create the data structure and serialize it to JSON using the json_encode function which far less error prone. The code to do that for your case is as follows:

// Set up the columns
$arr = array();
for($i = 0; $i < 4; $i ++) {
  $column = array(
    "name" => $i + 1,
    "data" => array()
  );
  for($j = 0; $j < count($data); $j ++) {
    $column["data"][] = $data[$j][$i + 1];
  }
  $arr[] = $column;
}

// Set up the spline
$spline = array(
  "type" => "spline",
  "name" => "Strike Rate",
  "data" => array();
);
for($i = 0; $i < count($data); $i ++) {
  $spline["data"][] = $data[$i][7];
}
$arr[] = $spline;

// Output json
echo json_encode($arr);

answered Jan 2, 2013 at 13:21

Stuart Wakefield

6,40431 silver badges39 bronze badges

1 Comment

Steve Clarke Over a year ago

hay mate thanks a bunch! it's nearly dead on perfect for the output needed for the highcharts.js i'll have a crack tomorrow morning to get this working, but what you've provided is great!

Jason · Accepted Answer · 2013-01-02 13:06:32Z

1

I imagine your problem is with this kind of line:

data: [6,4,4,1,3,3,5,2,3,0,0,1,0,0,0,0,0,0,]},

remove the trailing , in the array to have

data: [6,4,4,1,3,3,5,2,3,0,0,1,0,0,0,0,0,0]},

hopefully that will help.

answered Jan 2, 2013 at 13:06

Jason

5073 silver badges10 bronze badges

Comments

iLaYa ツ · Accepted Answer · 2013-01-02 13:14:06Z

1

Another best way to deal the PHP array in javascript is json_encode

pass json encoded array to javascript from your php like

json_encode($result_array);

and process the json data in js using jquery. It will be easy than what you are doing now.

answered Jan 2, 2013 at 13:14

iLaYa ツ

4,0173 gold badges34 silver badges51 bronze badges

Comments

sandip · Accepted Answer · 2013-01-02 13:05:33Z

0

Please store php value in hidden field and give some ID to that field & access value by using that ID in javascript

answered Jan 2, 2013 at 13:05

sandip

3,3095 gold badges35 silver badges55 bronze badges

Comments

Hugo Delsing · Accepted Answer · 2013-01-02 13:09:52Z

0

You are adding an extra comma at the end of that data column. That would break the JSON. Use the implode function.

for($i=0; $i<4; $i++){
  echo '{type: "column",<br/>';
  echo 'name: '.($i+1).',<br/>';
  echo 'data: ['
  echo implode(',', $data);
  echo ']},<br/>';
}

answered Jan 2, 2013 at 13:09

Hugo Delsing

14.3k5 gold badges50 silver badges76 bronze badges

Comments

Dharmik · Accepted Answer · 2013-01-02 13:26:06Z

0

$data=array();
for($i=0; $i<4; $i++){
$data['type']="column";
for($j=0; $j<count($data); $j++){
 $data['data'][] = $data[$j][$i+1];
}
}
json_encode($data);

answered Jan 2, 2013 at 13:26

Dharmik

2,3653 gold badges27 silver badges37 bronze badges

Collectives™ on Stack Overflow

echo php inside javascript

7 Answers 7

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related