joshua/neat-charts
1
0
Fork 0
mirror of https://github.com/seigler/neat-charts synced 2025-07-27 01:16:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

added options for sparklines

Browse source
This commit is contained in:
Joshua Seigler 2016-07-02 01:02:57 -04:00
parent f43540f785
commit 5d73afddd0
3 changed files with 91 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

46
demo.php
View file

@ -1,5 +1,20 @@
<?php <?php
require_once 'vendor/autoload.php'; require_once 'vendor/autoload.php';
function randomData($count = 96) {
$randomData = [];
$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 < $count; $n++) {
$current -= $offset;
$current *= 1 + $volatility * (rand()/getRandMax() - 0.5);
$current += $offset;
$randomData[$n] = $current;
}
return $randomData;
}
?> ?>
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en-US"> <html lang="en-US">
@ -27,18 +42,7 @@ require_once 'vendor/autoload.php';
<h2>SVG chart in <code>svg</code> tag</h2> <h2>SVG chart in <code>svg</code> tag</h2>
<figure> <figure>
<?php <?php
$chartData = []; $chart = new NeatCharts\LineChart(randomData(), [
$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 < 96; $n++) {
$current -= $offset;
$current *= 1 + $volatility * (rand()/getRandMax() - 0.5);
$current += $offset;
$chartData[$n] = $current;
}
$chart = new NeatCharts\LineChart($chartData, [
'width'=>800, 'width'=>800,
'height'=>250, 'height'=>250,
'lineColor'=>'#F00', 'lineColor'=>'#F00',
@ -47,6 +51,24 @@ $chart = new NeatCharts\LineChart($chartData, [
'fontSize'=>14 'fontSize'=>14
]); ]);
echo $chart->render(); echo $chart->render();
?>
<figcaption>Random generated data, loaded right in the page</figcaption>
</figure>
</section>
<section>
<h2>SVG sparkline in <code>svg</code> tag</h2>
<figure>
<?php
$chart = new NeatCharts\LineChart(randomData(48), [
'width'=>100,
'height'=>20,
'lineColor'=>'#000',
'smoothed'=>false,
'fontSize'=>2,
'yAxisEnabled'=>false,
'xAxisEnabled'=>false
]);
echo $chart->render();
?> ?>
<figcaption>Random generated data, loaded right in the page</figcaption> <figcaption>Random generated data, loaded right in the page</figcaption>
</figure> </figure>

52
src/NeatCharts/LineChart.php
View file

@ -85,6 +85,7 @@ namespace NeatCharts {
$this->options['height'] = $this->height + $this->padding['top'] + $this->padding['bottom']; $this->options['height'] = $this->height + $this->padding['top'] + $this->padding['bottom'];
} }
if ($this->options['yAxisEnabled']) {
$numLabels = 2 + ceil($this->height / $this->options['fontSize'] / 6); $numLabels = 2 + ceil($this->height / $this->options['fontSize'] / 6);
$labelInterval = $this->yRange / $numLabels; $labelInterval = $this->yRange / $numLabels;
$labelModulation = 10 ** (1 + floor(-log($this->yRange / $numLabels, 10))); $labelModulation = 10 ** (1 + floor(-log($this->yRange / $numLabels, 10)));
@ -102,30 +103,6 @@ namespace NeatCharts {
) + 10; ) + 10;
$this->width = $this->options['width'] - $this->padding['left'] - $this->padding['right']; $this->width = $this->options['width'] - $this->padding['left'] - $this->padding['right'];
$chartPoints = 'M';
$chartSplines = 'M'.
$this->transformX($this->xMin).','.
$this->transformY($chartData[$this->xMin]);
if ($this->options['smoothed']) {
foreach ($chartData as $x => $y) {
$controlX = $deltaX / 3 / sqrt(1 + $tangents[$x]**2);
$controlY = $tangents[$x] * $controlX;
if ($x != $this->xMin) {
$chartSplines .= ' S'.
$this->transformX($x - $controlX).','.
$this->transformY($y - $controlY).' '.
$this->transformX($x).','.
$this->transformY($y);
}
}
} else {
foreach ($chartData as $x => $y) {
$chartPoints .=
$this->transformX($x).','.
$this->transformY($y) . ' ';
}
}
// Top and bottom grid lines // Top and bottom grid lines
$gridLines = $gridLines =
'M10,0 '.$this->width.',0 '. 'M10,0 '.$this->width.',0 '.
@ -158,6 +135,33 @@ namespace NeatCharts {
).','.$labelHeight.' '.$this->width.','.$labelHeight; ).','.$labelHeight.' '.$this->width.','.$labelHeight;
} }
} }
} else {
$this->width = $this->options['width'] - $this->padding['left'] - $this->padding['right'];
}
$chartPoints = 'M';
$chartSplines = 'M'.
$this->transformX($this->xMin).','.
$this->transformY($chartData[$this->xMin]);
if ($this->options['smoothed']) {
foreach ($chartData as $x => $y) {
$controlX = $deltaX / 3 / sqrt(1 + $tangents[$x]**2);
$controlY = $tangents[$x] * $controlX;
if ($x != $this->xMin) {
$chartSplines .= ' S'.
$this->transformX($x - $controlX).','.
$this->transformY($y - $controlY).' '.
$this->transformX($x).','.
$this->transformY($y);
}
}
} else {
foreach ($chartData as $x => $y) {
$chartPoints .=
$this->transformX($x).','.
$this->transformY($y) . ' ';
}
}
$chartID = rand(); $chartID = rand();
$this->output = '<svg viewBox="-'.( $this->padding['left'] ).' -'.( $this->padding['top'] ).' '.( $this->options['width'] ).' '.( $this->options['height'] ).'" width="'.( $this->options['width'] ).'" height="'.( $this->options['height'] ).'" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> $this->output = '<svg viewBox="-'.( $this->padding['left'] ).' -'.( $this->padding['top'] ).' '.( $this->options['width'] ).' '.( $this->options['height'] ).'" width="'.( $this->options['width'] ).'" height="'.( $this->options['height'] ).'" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

8
src/NeatCharts/NeatChart.php
View file

@ -7,7 +7,9 @@ namespace NeatCharts {
'lineColor' => '#000', 'lineColor' => '#000',
'labelColor' => '#000', 'labelColor' => '#000',
'smoothed' => false, 'smoothed' => false,
'fontSize' => 15 'fontSize' => 15,
'yAxisEnabled'=>true,
'xAxisEnabled'=>false
]; ];
protected $width; protected $width;
@ -66,8 +68,8 @@ namespace NeatCharts {
} }
public abstract function setData($chartData); public abstract function setData($chartData);
public function render($inline = false) { public function render() {
return ($inline ? '' : '<?xml version="1.0" standalone="no"?>') . $this->output; return $this->output;
} }
} }
} }