0

I want to create a line from a php array. Each array element as a point in the line. The x-axis is the key and the y-axis is the value.

Like so:

 <?php
 $array=array(10,20,10,50,80,100,40,10);
 $count=count($array);
 $max=max($array);
 foreach($array as $x=>$y){
  $line.="$x,$y ";
 }
 ?>
 <svg height="200px" width="200px" viewBox="0 0 <?=$count-1?> <?=$max?>" preserveAspectRatio="none">
  <polyline style="stroke:red;stroke-width:4;" points="<?=trim($line)?>">
 </svg>

But all I get is this:

enter image description here

I tried all scaling techniques in: How can I make an svg scale with its parent container? But I still get bad results.

What am I doing wrong?

Community
  • 1
  • 1
Maciek Semik
  • 1,872
  • 23
  • 43

1 Answers1

0

Sweet and simple

Your error lies within your defined stroke-width and your viewBox not being large enough to show all of the polyline.

Depending on your desired result, setting stroke-width = 1 would help.

Ramity
  • 65
  • 7