feat: add background fill, begin work on x-axis

demo-as-image.php

@@ -1,18 +1,23 @@
 <?php
 require_once 'vendor/autoload.php';
 
-$chartData = [];
-$offset = 100 * (rand()/getRandMax())**4;
-$scale = 100 * (rand()/getRandMax())**2;
-$volatility = 0.5 * (rand()/getRandMax())**3;
-for ($n = 0, $current = $offset + 0.5 * $scale; $n < 24; $n++) {
+function randomData($count = 20, $offsetMax = 100) {
+  $randomData = [];
+  $duration = 60 * 5 + rand() * 60 * 60 * 24;
+  $begin = time() - $duration;
+  $offset = $offsetMax * (rand()/getRandMax())**2;
+  $scale = max(0.25 * $offset, 100 * rand() / getRandMax());
+  $volatility = 0.25 * (rand()/getRandMax())**3 + 0.25;
+  for ($n = 0, $current = $offset + 0.5 * $scale; $n < $count; $n++) {
     $current -= $offset;
     $current *= 1 + $volatility * (rand()/getRandMax() - 0.5);
     $current += $offset;
-  $chartData[$n] = $current;
+    $randomData[$begin + $duration / $count * $n] = $current;
+  }
+  return $randomData;
 }
 
-$chart = new NeatCharts\LineChart($chartData, [
+$chart = new NeatCharts\LineChart(randomData(), [
   'width'=>500,
   'height'=>400,
   'lineColor'=>'#00F',

demo.php

@@ -1,8 +1,10 @@
 <?php
 require_once 'vendor/autoload.php';
 
-function randomData($count = 96, $offsetMax = 100) {
+function randomData($count = 96, $offsetMax = 2000) {
   $randomData = [];
+  $duration = 60 * 5 + rand() * 60 * 60 * 24;
+  $begin = time() - $duration;
   $offset = $offsetMax * (rand()/getRandMax())**2;
   $scale = max(0.25 * $offset, 100 * rand() / getRandMax());
   $volatility = 0.5 * (rand()/getRandMax())**3 + 0.25;
@@ -10,7 +12,7 @@ function randomData($count = 96, $offsetMax = 100) {
     $current -= $offset;
     $current *= 1 + $volatility * (rand()/getRandMax() - 0.5);
     $current += $offset;
-    $randomData[$n] = $current;
+    $randomData[$begin + $duration / $count * $n] = $current;
   }
   return $randomData;
 }
@@ -39,7 +41,7 @@ function randomData($count = 96, $offsetMax = 100) {
       </figure>
     </section>
     <section>
-      <h2>Line chart in <code>svg</code> tag, zero axis shown, filled</h2>
+      <h2>Line chart in <code>svg</code> tag, zero axis shown, filled, smoothed</h2>
       <figure>
 <?php
 $chart = new NeatCharts\LineChart(randomData(), [
@@ -47,7 +49,7 @@ $chart = new NeatCharts\LineChart(randomData(), [
   'height'=>250,
   'lineColor'=>'#F00',
   'labelColor'=>'#222',
-  'smoothed'=>false,
+  'smoothed'=>true,
   'fontSize'=>14,
   'yAxisZero'=>true,
   'filled'=>true

src/NeatCharts/BarChart.php

@@ -9,9 +9,10 @@ namespace NeatCharts {
         'markerColor' => '#000',
         'labelColor' => '#000',
         'fontSize' => 15,
-        'yAxisEnabled'=>true,
-        'xAxisEnabled'=>false,
-        'yAxisZero'=>true
+        'yAxisEnabled' => true,
+        'xAxisEnabled' => false,
+        'yAxisZero' => true,
+        'background' => 'none'
       ];
       parent::setOptions($options);
     }

src/NeatCharts/CandlestickChart.php

@@ -11,9 +11,10 @@ namespace NeatCharts {
         'markerColor' => '#000',
         'labelColor' => '#000',
         'fontSize' => 15,
-        'yAxisEnabled'=>true,
-        'xAxisEnabled'=>false,
-        'yAxisZero'=>false
+        'yAxisEnabled' => true,
+        'xAxisEnabled' => false,
+        'yAxisZero' => false,
+        'background' => 'none'
       ];
       parent::setOptions($options);
     }

src/NeatCharts/LineChart.php

@@ -10,10 +10,11 @@ namespace NeatCharts {
         'labelColor' => '#000',
         'smoothed' => false,
         'fontSize' => 15,
-        'yAxisEnabled'=>true,
-        'xAxisEnabled'=>false,
-        'yAxisZero'=>false,
-        'filled'=>false
+        'yAxisEnabled' => true,
+        'xAxisEnabled' => false,
+        'yAxisZero' => false,
+        'filled' => false,
+        'background' => 'none'
       ];
       parent::setOptions($options);
     }

src/NeatCharts/NeatChart.php

@@ -9,9 +9,10 @@ namespace NeatCharts {
       'labelColor' => '#000',
       'smoothed' => false,
       'fontSize' => 15,
-      'yAxisEnabled'=>true,
-      'xAxisEnabled'=>false,
-      'yAxisZero'=>false
+      'yAxisEnabled' => true,
+      'xAxisEnabled' => true,
+      'yAxisZero' => false,
+      'background' => 'none'
     ];
 
     protected $width;
@@ -24,6 +25,7 @@ namespace NeatCharts {
     protected $yMax;
     protected $yRange;
     protected $padding = ['top'=>10, 'right'=>10, 'bottom'=>10, 'left'=>10];
+    protected $timeIntervals = [ 5 * 60, 60 * 60, 24 * 60 * 60, 28 * 60 * 60 ]; // 5 min, 1 hr, 24 hr, 1 month
 
     protected function labelFormat($float, $places, $minPlaces = 0) {
       $value = number_format($float, max($minPlaces, $places));
@@ -31,7 +33,6 @@ namespace NeatCharts {
       return (strpos($value, '.') === false ? $value . '.' : $value);
     }
 
-    /* Transform data coords to chart coords */
     /* Transform data coords to chart coords */
     protected function transformX($x) {
       return round(
@@ -49,7 +50,7 @@ namespace NeatCharts {
       if (!is_numeric($value)) { return false; }
       $decimal = $value - floor($value); //get the decimal portion of the number
       if ($decimal == 0) { return 0; } //if it's a whole number
-      $precision = strlen(trim(number_format($decimal,10),'0')) - 1; //-2 to account for '0.'
+      $precision = strlen(trim(number_format($decimal,10),'0')) - 1; //-1 to account for '0.'
       return $precision;
     }
 
@@ -78,21 +79,23 @@ namespace NeatCharts {
     protected function buildGridLabelXML() {
       $this->width = $this->options['width'] - $this->padding['left'] - $this->padding['right'];
       $this->height = $this->options['height'] - $this->padding['top'] - $this->padding['bottom'];
-      if ($this->options['yAxisEnabled'] || $this->options['xAxisEnabled']) {
-        $numLabels = 2 + ceil($this->height / $this->options['fontSize'] / 6);
+      if ($this->options['yAxisEnabled']) {
+        $numLabels = 4 + ceil($this->height / $this->options['fontSize'] / 4);
         $labelInterval = $this->yRange / $numLabels;
         $labelModulation = 10 ** (1 + floor(-log($this->yRange / $numLabels, 10)));
-        // 0.1 here is a fudge factor so we get multiples of 2.5 a little more often
-        if (fmod($labelInterval * $labelModulation, 2.5) < fmod($labelInterval * $labelModulation, 2) + 0.1) {
+        // 1 here is a fudge factor so we get multiples of 2.5 more often
+        if (fmod($labelInterval * $labelModulation, 2.5) < fmod($labelInterval * $labelModulation, 2) + 1) {
           $labelModulation /= 2.5;
         } else {
           $labelModulation /= 2;
         }
         $labelInterval = ceil($labelInterval * $labelModulation) / $labelModulation;
         $labelPrecision = $this->getPrecision($labelInterval);
+        $digitsLeft = max(1, ceil(log($this->yMax, 10)));
+        $commas = max(0, floor(($digitsLeft - 1) / 3));
 
         $this->padding['left'] = $this->options['fontSize'] * 0.65 * (
-          2.5 + max(1, ceil(log($this->yMax, 10))) + $this->getPrecision($labelInterval)
+          2.5 + $digitsLeft + $commas + $this->getPrecision($labelInterval)
         );
         $this->width = $this->options['width'] - $this->padding['left'] - $this->padding['right'];
 
@@ -130,8 +133,14 @@ namespace NeatCharts {
         }
 
         return '
+        <rect class="chart__background"
+          fill="'.( $this->options['background'] ).'"
+          x="-'.( $this->padding['left'] ).'"
+          y="-'.( $this->padding['top'] ).'"
+          width="'.( $this->options['width'] ).'"
+          height="'.( $this->options['height'] ).'"
+        />
         <g class="chart__gridLines"
-          fill="none"
           stroke="'.( $this->options['labelColor'] ).'"
           stroke-opacity="0.4"
           stroke-width="1"