Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

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;?>
share|improve this question
    
We need to see the loop. –  Goikiu Jan 7 at 8:53
1  
Where is this foreach loop? Please edit your question to show how you are currently doing it. –  Bart Jan 7 at 8:53
1  
I think all the <?= should be replaced with <?php echo ? –  I Can Has Cheezburger Jan 7 at 8:56
    
I've added the foreach loop. @user007 I'm using short tags. –  Ando Jan 7 at 8:56
2  
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. –  Joraid Jan 7 at 8:58
show 4 more comments

3 Answers

up vote 0 down vote accepted

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;?>
share|improve this answer
    
Thanks Stanyer and Mohammed for the tip! –  Ando Jan 7 at 9:14
add comment

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.

share|improve this answer
add comment

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;?>
share|improve this answer
    
There is already a unique ID, could save using an extra counter. –  Ryan Jan 7 at 8:59
    
yes its true.... –  Nouphal.M Jan 7 at 9:03
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.