How to draw a polyline from an array in php?

Question

I have an array with simple decimal values so what I want is that I am using SVG Polyline to create a LINECHART so I want to get some sort of PHP Plugin or a piece of code which can generate X & Y coordinates points for me from a simple array of decimal values.

I have tried alot with JS plugins and they were surely generating it better but then...!

NOTE : I can't use a JS Plugin like d3.js unfortunately I am using WKHTMLTOPDF Linux Binary which seems to be not working with JS Charts.

The arrays of values would be something like as :

[14,18,4,19,23,34,16,25,5,9,13,15,16]

Here is my Demo SVG Polyline :

<svg viewBox="0 0 500 100" style="width: 710px;height: 300px">
  
  <polyline
     fill="none"
     stroke="rgb(125, 207, 108)"
     stroke-width="4"
     points="
       00,120
       20,60
       40,80
       60,20
       80,80
       100,80
       120,60
       140,100
       160,90
       180,80
       200, 110
       220, 10
       240, 70
       260, 100
       280, 100
       300, 40
       320, 0
       340, 100
       360, 100
       380, 120
       400, 60
       420, 70
       440, 80
     "
   />
  
</svg>

UPDATE : Thanks to @Paul LeBeau I can now generate the linechart but can you please also just add the x axis values to each point on the chart beneath. That would be really great and also how can I stretch out the chart to cover this whole page as :

The values beneath on the x axis should show up like this as Jul 2016 and etc :

Here is array for the new data as :

$data=["Jul 2014"=>[16],
               "Aug 2014"=>[14],
               "Sep 2014"=>[18],
               "Oct 2014"=>[4],
               "Nov 2014"=>[19],
               "Dec 2014"=>[23],
               "Jan 2015"=>[34],
               "Feb 2015"=>[16],
               "Mar 2015"=>[25],
               "Apr 2015"=>[5],
               "May 2015"=>[9],
               "Jun 2015"=>[13],
               "Jul 2015"=>[15]];

And here is the PHP Code for the Lincharts as :

$values = [14,18,4,19,23,34,16,25,5,9,13,15,16];

$xOrigin = 90;   // Position of the start (left) of the X axis
$yOrigin = 100;  // Position of the start (bottom) of the Y axis
$xScale = 20;    // Scale for the X axis
$yScale = 2.5;   // Scale for the Y axis

// Get the max value in the $values array so we know how tall to make the Y axis
$yMax = max($values);

$linechart = "";

  $linechart .= '<g transform="translate('.$xOrigin.','.$yOrigin.')" fill="none" stroke="grey">';
    $linechart .= '<line id="xaxis" x1="0" y1="0" x2="'.$xScale*(count($values)-1).'" y2="0" />';
    $linechart .= '<line id="yaxis" x1="0" y1="0" x2="0" y2=".'-$yScale*$yMax.'" />';

  $points = "";
   for ($i = 0; $i < count($values); $i++) {
          if ($i != 0)
            $points .= ", ";
          $points .=($i * $xScale) . "," . ($values[$i] * -$yScale);
        }


$polyline = "";
$polyline .= '<polyline
      stroke="rgb(125, 207, 108)"
      stroke-width="4"
      points="'.$points.'"/>
  </g>';


$page6 = <<<EOD
<svg viewBox="0 0 500 100" style="width: 710px;height: 300px;position: absolute;top: 3135px;left: 130px;">

      $linechart;

      $polyline

    </svg>
EOD;

Here is a link for the report which has the LINECHART where I am embedding it as : http://huntedhunter.com/venue_report/

Answer 1

Here is some PHP code to draw a simple line graph with X and Y axes.

$values = [14,18,4,19,23,34,16,25,5,9,13,15,16];

$xOrigin = 90;   // Position of the start (left) of the X axis
$yOrigin = 100;  // Position of the start (bottom) of the Y axis
$xScale = 20;    // Scale for the X axis
$yScale = 2.5;   // Scale for the Y axis

// Get the max value in the $values array so we know how tall to make the Y axis
$yMax = max($values);

?><svg viewBox="0 0 500 100" style="width: 710px;height: 300px">

  <g transform="translate(<?=$xOrigin?>, <?=$yOrigin?>)" fill="none" stroke="grey">
    <line id="xaxis" x1="0" y1="0" x2="<?= $xScale*(count($values)-1) ?>" y2="0" />
    <line id="yaxis" x1="0" y1="0" x2="0" y2="<?= -$yScale*$yMax ?>" />

    <polyline
      stroke="rgb(125, 207, 108)"
      stroke-width="4"
      points="<?php

        // Loop through all the entries in the $values array
        // Echo "x,y" coordinates to the page to fill in the
        // points attribute of the <polyline> element.
        for ($i = 0; $i < count($values); $i++) {
          // If this is not the first x,y pair, then output a
          // comma to separate one x,y pair from the next
          if ($i != 0)
            echo ", ";
          // Output a single x,y pair.  Each x and y values are
          // multiplied by a scale factor. $yScale is negative because
          // in an SVG y coordinates increase down the page, but we want larger
          // Y to go up the page.
          echo ($i * $xScale) . "," . ($values[$i] * -$yScale);
        }

      ?>"/>
  </g>

</svg>

An explanation of some of the SVG content:

<g transform="translate(<?=$xOrigin?>, <?=$yOrigin?>)" fill="none" stroke="grey">

This <g> element is an SVG group. Groups are just ways to specify some properties that are inherited by all the groups children. So we can set the fill to none, and the stroke colour to grey here, and we don't have to specifiy it for every child.

The transform="translate()" attribute causes the groups children to be shifted on the page tho the $xOrigin, $yOrigin position. We are doing this to simplify the graph below. We can create our graph and axes as if they were based at (0,0). Then the tranform shifts everything to the final location on the page.

<line id="xaxis" x1="0" y1="0" x2="<?= $xScale*(count($values)-1) ?>" y2="0" />

A line that forms the X axis. From (0,0) to (<no. of values>, 0).

<line id="yaxis" x1="0" y1="0" x2="0" y2="<?= -$yScale*$yMax ?>" />

A line that forms the Y axis. From (0,0) to (0, <maximum Y value>).