Trying to pass a php variable into js

Question

I have the $attr array that contains the id and footer caption of each graph (highcharts) in a post. When i print_r the array it groups the id and footer_caption correctly and in the right order as they are in the post. For eg in the current post im working at i have 3 graphs and this is what's inside $attr:

    Array
(
    [chart] => 23
    [footer_caption] => footer test
)

    Array
(
    [chart] => 22
    [footer_caption] => another test
)

    Array
(
    [chart] => 24
    [footer_caption] => And another test
)

I'm passing $attr['footer_caption] to javascript like this:

<script>
  var captionLabel = "<?php echo $attr['footer_caption']; ?>";
  console.log(captionLabel);
</script>

And its working fine. Then the problem happens when i use captionLabel on te js file. I tried using a for loop but with no luck. If i console.log captionLabel in the js file, it shows the footer caption of the last graph 3 times. This is the highcharts.js where im using captionLabel:

Highcharts.setOptions({
  credits: {
          enabled: false
  },
  chart: {
          type: 'column',
          events: {
              load: function () {
                var label = this.renderer.label(captionLabel)
                  .css({
                      width: '400px',
                      fontSize: '9px'
                  })
                  .attr({
                      'r': 2,
                      'padding': 5
                  })
                  .add();

                  label.align(Highcharts.extend(label.getBBox(), {
                      align: 'center',
                      x: 0, // offset
                      verticalAlign: 'bottom',
                      y: 20 // offset
                  }), null, 'spacingBox');

              }
          },
          marginBottom: 120
      },
      legend: {
        align: 'center',
        verticalAlign: 'bottom',
        y: -30
    },

My question is how can i pass the right footer_caption string to each graph in this js? Because right now every footer label is getting the last value. All the 3 graphs get the footer caption "And another test" in this post.

Here is a fiddle of the footer label jsfiddle.net/abenrob/ur02w4j5 — anon346
– anon346, Commented Apr 28, 2017 at 9:42
Instead of sending individual values to javascript like you do now, you should group everything together and send 1 json object / string. That would also avoid potential problems as everything will be encoded correctly. — jeroen
– jeroen, Commented Apr 28, 2017 at 9:42
You mean to you need total 3 separate graph with different footer caption ? — Ahmed Ginani
– Ahmed Ginani, Commented Apr 28, 2017 at 9:46
Yes. In the php file im getting them in the right order but in the js file im getting the last footer caption assigned to the 3 graphs — anon346
– anon346, Commented Apr 28, 2017 at 9:48

Antony Thompson · Accepted Answer · 2017-04-28 10:00:55Z

1

Use json_encode()

<?php
$labels = [
[
    ['chart'] => 23,
    ['footer_caption'] => 'footer test 1'
],[
    ['chart'] => 24,
    ['footer_caption'] => 'footer test 2'
],[
    ['chart'] => 25,
    ['footer_caption'] => 'footer test 3 '
]
];
?>
<script>
  var captionLabels = "<?php echo json_encode($labels); ?>";
  console.log(captionLabels);
  var label;
  //access each one like this
  captionLabels.forEach(function(label) {
     label = this.renderer.label(label.footer_caption);
     //graph code.
  });
</script>

edited Apr 28, 2017 at 10:00

answered Apr 28, 2017 at 9:51

Antony Thompson

1,6481 gold badge13 silver badges22 bronze badges

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

3 Comments

anon346 Over a year ago

I think i didn't explain myself well on my question, sorry. The array its not always the same. This post has 3 captions because it has 3 graphs but other one might have 1,2,3,4,5,etc graphs and the array will have different values and size.

Styphon Over a year ago

Why have you posted two answers? You should just edit your first answer.

Antony Thompson Over a year ago

Yeah strange, I tried to edit it and it posted it again... Anyway, @anon346 I have updated the answer. I'm not sure I know what you mean. But you can just loop through each one like above.

Dat Tran · Accepted Answer · 2017-04-28 09:56:14Z

0

I think you should generate the array of footer_caption text and send it to javascript as a JSON string.

PHP code:

$array = new array();
foreach ($attr as $value) {
    array_push($array, $value['footer_caption']);
}
$captionLabel = json_encode($array);

JS code:

<script>
     var captionLabel = JSON.parse("<?php echo $captionLabel; ?>");
     console.log(captionLabel);
</script>

answered Apr 28, 2017 at 9:56

Dat Tran

1,5961 gold badge12 silver badges16 bronze badges

Comments

Styphon · Accepted Answer · 2017-04-28 09:57:08Z

0

captionLabel has to be an array, otherwise it will only hold the last value assigned to it. You should also use an array for all the $attr values and then use json_encode when outputting itto the JavaScript.

<?php
$attr = [
    ['chart' => '23', 'footer_caption' => 'footer test'],
    ['chart' => '22', 'footer_caption' => 'another test'],
    ['chart' => '24', 'footer_caption' => 'And another test']
];
?>
<script>
    var captionLabel = <?= json_encode($attr) ?>;
</script>

edited Apr 28, 2017 at 9:57

Styphon

10.5k9 gold badges54 silver badges87 bronze badges

answered Apr 28, 2017 at 9:48

inarilo

8241 gold badge10 silver badges14 bronze badges

3 Comments

Styphon Over a year ago

See Antony's answer, you're over-complicating things.

inarilo Over a year ago

Hmm, I thought he was using three separate arrays.

Styphon Over a year ago

He is, that doesn't stop you using json_encode instead of what you were writing. I've updated your answer to reflect this.

Collectives™ on Stack Overflow

Trying to pass a php variable into js

3 Answers 3

3 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related