php foreach with javascript script

Question

I have a php foreach loop which I would like to use to create 5 charts based on the data that i feed into the script. The problem that I cant figure out is that at the moment my chart is visible only at the last loop and is not visible on the first, second, third.

I tried to do something like var chart<?=$row['id'];?>=... to no avail. How can I get my charts to appear with the correct data in the foreach loop?

<? foreach($articles as $row):?>
<div id='chart-<?=$row['id'];?>' style='width: 1110px; height: 250px;'></div>
    <script>
        var chart1 = new Charts.LineChart('chart-<?=$row['id'];?>', {
          dot_color: "#855541",
          area_color: "#855541",
          line_color: "#855541",
          line_width: 1,
          show_grid: false,
          label_max: false,
          label_min: false
        });
        chart1.add_line({
          data: [<?=$row['chart'];?>]
        });
        chart1.draw();
    </script>
  <?endforeach;?>

Where is this foreach loop? Please edit your question to show how you are currently doing it. — Bart
– Bart, Commented Jan 7, 2014 at 8:53
I think all the <?= should be replaced with <?php echo ? — AyB
– AyB, Commented Jan 7, 2014 at 8:56
is chart1 being overwritten every time php loop iterate? even if u r putting it into diff div, all js vars will occupy same space since ur declaring it as global. — Mohammed Joraid
– Mohammed Joraid, Commented Jan 7, 2014 at 8:58

Mohammed Joraid · Accepted Answer · 2014-01-07 09:05:20Z

1

chart1 is being overwritten every time php loop iterates.

Even if u r putting it into diff div, all js vars will occupy same space since ur declaring it as global.

One way to do it is to define different variables for each iteration either by assigning a different var name, or adding all vars into an array and later loop thru it and execute all.

As in the other answers, change

var chart1 = ...

to something like:

var chart_<?=$row['id']?> =

it will be e.g. chart_1, chart_2, chart_3 ...etc.

edited Jan 7, 2014 at 9:05

answered Jan 7, 2014 at 9:00

Mohammed Joraid

6,5802 gold badges29 silver badges38 bronze badges

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

Comments

Ryan · Accepted Answer · 2014-01-07 08:59:28Z

0

In response to Mohammed's comment, try changing the JavaScript variable name each time.

<? foreach($articles as $row):?>
<div id='chart-<?=$row['id'];?>' style='width: 1110px; height: 250px;'></div>
    <script>
        var chart<?=$row['id'];?> = new Charts.LineChart('chart-<?=$row['id'];?>', {
          dot_color: "#855541",
          area_color: "#855541",
          line_color: "#855541",
          line_width: 1,
          show_grid: false,
          label_max: false,
          label_min: false
        });
        chart<?=$row['id'];?>.add_line({
          data: [<?=$row['chart'];?>]
        });
        chart<?=$row['id'];?>.draw();
    </script>
  <?endforeach;?>

answered Jan 7, 2014 at 8:59

Ryan

3,5801 gold badge24 silver badges40 bronze badges

1 Comment

Ando Over a year ago

Thanks Stanyer and Mohammed for the tip!

Nouphal.M · Accepted Answer · 2014-01-07 08:59:08Z

0

Try

<? $i = 1; foreach($articles as $row):?>
<div id='chart-<?=$row['id'];?>' style='width: 1110px; height: 250px;'></div>
    <script>
        var chart<?=$i; ?> = new Charts.LineChart('chart-<?=$row['id'];?>', {
          dot_color: "#855541",
          area_color: "#855541",
          line_color: "#855541",
          line_width: 1,
          show_grid: false,
          label_max: false,
          label_min: false
        });
        chart<?=$i; ?>.add_line({
          data: [<?=$row['chart'];?>]
        });
        chart<?=$i; ?>.draw();

    </script>
  <? $i++; endforeach;?>

answered Jan 7, 2014 at 8:59

Nouphal.M

6,3281 gold badge20 silver badges28 bronze badges

1 Comment

Ryan Over a year ago

There is already a unique ID, could save using an extra counter.

Collectives™ on Stack Overflow

php foreach with javascript script

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related