mirror of
https://github.com/seigler/neat-charts
synced 2025-07-26 17:06:09 +00:00
separated SVG generation from demo file
This commit is contained in:
Joshua Seigler
parent
2e1cc47437
commit
51500842d7
4 changed files with 170 additions and 168 deletions
166
SVGChartBuilder.php
Normal file
166
SVGChartBuilder.php
Normal file
|
|
@ -0,0 +1,166 @@
|
|||
<?php
|
||||
|
||||
class SVGChartBuilder {
|
||||
|
||||
public static function renderStockChart($chartData, $width = 700) {
|
||||
$absoluteDeltas = [];
|
||||
$previousValue = null;
|
||||
$yMin = $xMin = INF;
|
||||
$yMax = $xMax = -INF;
|
||||
|
||||
function median($arr) {
|
||||
sort($arr);
|
||||
$count = count($arr); //total numbers in array
|
||||
$middleval = floor(($count-1)/2); // find the middle value, or the lowest middle value
|
||||
if($count % 2) { // odd number, middle is the median
|
||||
$median = $arr[$middleval];
|
||||
} else { // even number, calculate avg of 2 medians
|
||||
$low = $arr[$middleval];
|
||||
$high = $arr[$middleval+1];
|
||||
$median = (($low+$high)/2);
|
||||
}
|
||||
return $median;
|
||||
}
|
||||
|
||||
foreach ($chartData as $thisX => $thisY) {
|
||||
if (!is_null($previousValue)) {
|
||||
$absoluteDeltas[] = abs($thisY - $previousValue);
|
||||
}
|
||||
if ($thisY < $yMin) {
|
||||
$yMin = $thisY;
|
||||
$yMinX = $thisX;
|
||||
}
|
||||
if ($thisY > $yMax) {
|
||||
$yMax = $thisY;
|
||||
$yMaxX = $thisX;
|
||||
}
|
||||
$previousValue = $thisY;
|
||||
}
|
||||
$yRange = $yMax - $yMin;
|
||||
end($chartData);
|
||||
$xMax = key($chartData);
|
||||
reset($chartData);
|
||||
$xMin = key($chartData);
|
||||
$xRange = $xMax - $xMin;
|
||||
$count = count($chartData);
|
||||
$medianDelta = abs(median($absoluteDeltas));
|
||||
|
||||
/*
|
||||
We want the height of the median y-delta to be the same as
|
||||
the width of one x-delta, which puts the median slope at
|
||||
45 degrees. This improves comprehension.
|
||||
http://vis4.net/blog/posts/doing-the-line-charts-right/
|
||||
*/
|
||||
$aspectRatio = $yRange / $medianDelta / $count;
|
||||
$height = floor($aspectRatio * $width);
|
||||
|
||||
function labelFormat($float, $sigFigs = 4, $minPlaces = 1) {
|
||||
return number_format($float, max(
|
||||
$minPlaces,
|
||||
$sigFigs + floor(-log($float, 10)))
|
||||
/* this floor(log) thing is the first significant place value */
|
||||
);
|
||||
}
|
||||
|
||||
/* Transform data coords to chart coords */
|
||||
function transformX($x, $xMin, $xRange, $width) {
|
||||
return round(
|
||||
($x - $xMin) / $xRange * $width
|
||||
, 2);
|
||||
}
|
||||
function transformY($y, $yMax, $yRange, $height) {
|
||||
return round(
|
||||
// SVG has y axis reversed, 0 is at the top
|
||||
($yMax - $y) / $yRange * $height
|
||||
, 2);
|
||||
}
|
||||
|
||||
$chartPoints = "M";
|
||||
foreach ($chartData as $x => $y) {
|
||||
$chartPoints .= transformX($x, $xMin, $xRange, $width) . ',' . transformY($y, $yMax, $yRange, $height) . '
|
||||
';
|
||||
}
|
||||
|
||||
$numLabels = floor($height / 25);
|
||||
$labelModulation = 10 ** (1 + floor(-log($yRange / $numLabels, 10)));// / 5;
|
||||
$labelInterval = ceil($yRange / $numLabels * $labelModulation) / $labelModulation;
|
||||
|
||||
// Top and bottom grid lines
|
||||
$gridLines =
|
||||
"M0,0 ".$width.",0
|
||||
M0,".$height.",".$width.",".$height."
|
||||
";
|
||||
|
||||
// Top and bottom grid labels
|
||||
$gridText =
|
||||
'<text x="-4" y="4">'.labelFormat($yMax).'</text>' .
|
||||
'<text x="-4" y="'.($height + 4).'">'.labelFormat($yMin).'</text>';
|
||||
|
||||
// Start at the first "nice" Y value > min + 50% of the interval
|
||||
// Keep going until max - 50% of the interval
|
||||
// Add Interval each iteration
|
||||
for (
|
||||
$labelY = $yMin - fmod($yMin, $labelInterval) + $labelInterval;
|
||||
$labelY < $yMax;
|
||||
$labelY += $labelInterval
|
||||
) {
|
||||
$labelHeight = transformY($labelY, $yMax, $yRange, $height);
|
||||
if (
|
||||
$labelY < $yMax - 0.4 * $labelInterval &&
|
||||
$labelY > $yMin + 0.4 * $labelInterval
|
||||
) {
|
||||
$gridLines .= "M0,".$labelHeight." ".$width.",".$labelHeight."
|
||||
";
|
||||
$gridText .= '<text x="-4" y="'.($labelHeight + 4).'">'.labelFormat($labelY).'</text>';
|
||||
}
|
||||
}
|
||||
|
||||
return '<?xml version="1.0" standalone="no"?>
|
||||
<svg
|
||||
viewBox="-90 -10 '.( $width + 100 ).' '.( $height + 20 ).'"
|
||||
width="'.( $width + 100 ).'"
|
||||
height="'.( $height + 20 ).'"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<marker id="markerCircle" markerWidth="2" markerHeight="2" refX="1" refY="1" markerUnits="strokeWidth">
|
||||
<circle cx="1" cy="1" r="1" style="stroke: none; fill:#000000;"/>
|
||||
</marker>
|
||||
<linearGradient id="fadeFromNothing" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0.5%" stop-color="#1C75BC" stop-opacity="0"></stop>
|
||||
<stop offset="5%" stop-color="#1C75BC" stop-opacity="1"></stop>
|
||||
<stop offset="100%" stop-color="#1C75BC" stop-opacity="1"></stop>
|
||||
</linearGradient>
|
||||
<style type="text/css"><![CDATA[
|
||||
.chart__gridLines {
|
||||
font-family: sans-serif;
|
||||
font-size: 10;
|
||||
fill: #7f7f7f;
|
||||
text-anchor:end;
|
||||
}
|
||||
.chart__gridLinePaths {
|
||||
fill: none;
|
||||
stroke: #000000;
|
||||
stroke-width: 1;
|
||||
stroke-dasharray: 2,2;
|
||||
stroke-opacity: 0.25;
|
||||
}
|
||||
.chart__plotLine {
|
||||
fill: none;
|
||||
stroke-width: 5;
|
||||
stroke-linejoin: round;
|
||||
stroke-linecap: round;
|
||||
stroke: url(#fadeFromNothing);
|
||||
marker-end: url(#markerCircle);
|
||||
}
|
||||
]]></style>
|
||||
</defs>
|
||||
<g class="chart__gridLines">
|
||||
<path class="chart__gridLinePaths" d="'.( $gridLines ).'" />
|
||||
'.( $gridText ).'
|
||||
</g>
|
||||
<path class="chart__plotLine" d="'.( $chartPoints ).'" />
|
||||
</svg>';
|
||||
}
|
||||
}
|
||||
14
Util.php
14
Util.php
|
|
@ -18,18 +18,4 @@ class Util {
|
|||
$result = json_decode($result) or trigger_error('Couldn\'t parse JSON');
|
||||
return $result;
|
||||
}
|
||||
|
||||
public static function median($arr) {
|
||||
sort($arr);
|
||||
$count = count($arr); //total numbers in array
|
||||
$middleval = floor(($count-1)/2); // find the middle value, or the lowest middle value
|
||||
if($count % 2) { // odd number, middle is the median
|
||||
$median = $arr[$middleval];
|
||||
} else { // even number, calculate avg of 2 medians
|
||||
$low = $arr[$middleval];
|
||||
$high = $arr[$middleval+1];
|
||||
$median = (($low+$high)/2);
|
||||
}
|
||||
return $median;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@
|
|||
fclose($f);
|
||||
}
|
||||
$last_modified_time = time();
|
||||
$etag = md5_file($file);
|
||||
$etag = md5_file('buffer'.$file);
|
||||
|
||||
// always send headers
|
||||
header("Last-Modified: ".gmdate("D, d M Y H:i:s", $last_modified_time)." GMT");
|
||||
|
|
|
|||
156
index.php
156
index.php
|
|
@ -18,161 +18,11 @@ $poloniex_url = 'https://poloniex.com/public?command=returnChartData¤cyPai
|
|||
//14400 //6h
|
||||
//86400 //1d
|
||||
;
|
||||
|
||||
$dateformat = 'gA';
|
||||
$last24h = Util::getJson($poloniex_url);
|
||||
$chartData = [];
|
||||
$absoluteDeltas = [];
|
||||
$previousValue = null;
|
||||
$yMin = $xMin = INF;
|
||||
$yMax = $xMax = -INF;
|
||||
|
||||
foreach ($last24h as $datum) {
|
||||
$thisX = $datum->date;
|
||||
$thisY = $datum->weightedAverage;
|
||||
$chartData[$thisX] = $thisY;
|
||||
if (!is_null($previousValue)) {
|
||||
$absoluteDeltas[] = abs($thisY - $previousValue);
|
||||
}
|
||||
if ($thisY < $yMin) {
|
||||
$yMin = $thisY;
|
||||
$yMinX = $thisX;
|
||||
}
|
||||
if ($thisY > $yMax) {
|
||||
$yMax = $thisY;
|
||||
$yMaxX = $thisX;
|
||||
}
|
||||
$previousValue = $thisY;
|
||||
}
|
||||
$yRange = $yMax - $yMin;
|
||||
end($chartData);
|
||||
$xMax = key($chartData);
|
||||
reset($chartData);
|
||||
$xMin = key($chartData);
|
||||
$xRange = $xMax - $xMin;
|
||||
$count = count($chartData);
|
||||
$medianDelta = abs(Util::median($absoluteDeltas));
|
||||
$width = 700;
|
||||
|
||||
/*
|
||||
We want the height of the median y-delta to be the same as
|
||||
the width of one x-delta, which puts the median slope at
|
||||
45 degrees. This improves comprehension.
|
||||
http://vis4.net/blog/posts/doing-the-line-charts-right/
|
||||
*/
|
||||
$aspectRatio = $yRange / $medianDelta / $count;
|
||||
$height = floor($aspectRatio * $width);
|
||||
|
||||
function labelFormat($float, $sigFigs = 4, $minPlaces = 1) {
|
||||
return number_format($float, max(
|
||||
$minPlaces,
|
||||
$sigFigs + floor(-log($float, 10)))
|
||||
/* this floor(log) thing is the first significant place value */
|
||||
);
|
||||
foreach ($last24h as $item) {
|
||||
$chartData[$item->date] = $item->weightedAverage;
|
||||
}
|
||||
|
||||
/* Transform data coords to chart coords */
|
||||
function transformX($x) {
|
||||
global $xMin, $xRange, $width;
|
||||
return round(
|
||||
($x - $xMin) / $xRange * $width
|
||||
, 2);
|
||||
}
|
||||
function transformY($y) {
|
||||
global $yMax, $yRange, $height;
|
||||
return round(
|
||||
// SVG has y axis reversed, 0 is at the top
|
||||
($yMax - $y) / $yRange * $height
|
||||
, 2);
|
||||
}
|
||||
|
||||
$chartPoints = "M";
|
||||
foreach ($chartData as $x => $y) {
|
||||
$chartPoints .= transformX($x) . ',' . transformY($y) . '
|
||||
';
|
||||
}
|
||||
|
||||
$numLabels = floor($height / 25);
|
||||
$labelModulation = 10 ** (1 + floor(-log($yRange / $numLabels, 10)));// / 5;
|
||||
$labelInterval = ceil($yRange / $numLabels * $labelModulation) / $labelModulation;
|
||||
|
||||
// Top and bottom grid lines
|
||||
$gridLines =
|
||||
"M0,0 ".$width.",0
|
||||
M0,".$height.",".$width.",".$height."
|
||||
";
|
||||
|
||||
// Top and bottom grid labels
|
||||
$gridText =
|
||||
'<text x="-4" y="4">'.labelFormat($yMax).'</text>' .
|
||||
'<text x="-4" y="'.($height + 4).'">'.labelFormat($yMin).'</text>';
|
||||
|
||||
// Start at the first "nice" Y value > min + 50% of the interval
|
||||
// Keep going until max - 50% of the interval
|
||||
// Add Interval each iteration
|
||||
for (
|
||||
$labelY = $yMin - fmod($yMin, $labelInterval) + $labelInterval;
|
||||
$labelY < $yMax;
|
||||
$labelY += $labelInterval
|
||||
) {
|
||||
$labelHeight = transformY($labelY);
|
||||
$gridLines .= "M0,".$labelHeight." ".$width.",".$labelHeight."
|
||||
";
|
||||
if (
|
||||
$labelY < $yMax - 0.4 * $labelInterval &&
|
||||
$labelY > $yMin + 0.4 * $labelInterval
|
||||
) {
|
||||
$gridText .= '<text x="-4" y="'.($labelHeight + 4).'">'.labelFormat($labelY).'</text>';
|
||||
}
|
||||
}
|
||||
|
||||
// in case some dingbat has PHP short tags enabled
|
||||
echo '<'.'?xml version="1.0" standalone="no"?'.'>';
|
||||
|
||||
?>
|
||||
<svg
|
||||
viewBox="-90 -10 <?= $width + 100 ?> <?= $height + 20 ?>"
|
||||
width="<?= $width + 100 ?>"
|
||||
height="<?= $height + 20 ?>"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<marker id="markerCircle" markerWidth="2" markerHeight="2" refX="1" refY="1" markerUnits="strokeWidth">
|
||||
<circle cx="1" cy="1" r="1" style="stroke: none; fill:#000000;"/>
|
||||
</marker>
|
||||
<linearGradient id="fadeFromNothing" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0.5%" stop-color="#1C75BC" stop-opacity="0"></stop>
|
||||
<stop offset="5%" stop-color="#1C75BC" stop-opacity="1"></stop>
|
||||
<stop offset="100%" stop-color="#1C75BC" stop-opacity="1"></stop>
|
||||
</linearGradient>
|
||||
<style type="text/css"><![CDATA[
|
||||
.chart__gridLines {
|
||||
font-family: sans-serif;
|
||||
font-size: 10;
|
||||
fill: #7f7f7f;
|
||||
text-anchor:end;
|
||||
}
|
||||
.chart__gridLinePaths {
|
||||
fill: none;
|
||||
stroke: #000000;
|
||||
stroke-width: 1;
|
||||
stroke-dasharray: 2,2;
|
||||
stroke-opacity: 0.25;
|
||||
}
|
||||
.chart__plotLine {
|
||||
fill: none;
|
||||
stroke-width: 5;
|
||||
stroke-linejoin: round;
|
||||
stroke-linecap: round;
|
||||
stroke: url(#fadeFromNothing);
|
||||
marker-end: url(#markerCircle);
|
||||
}
|
||||
]]></style>
|
||||
</defs>
|
||||
<g class="chart__gridLines">
|
||||
<path class="chart__gridLinePaths" d="<?= $gridLines ?>" />
|
||||
<?= $gridText ?>
|
||||
</g>
|
||||
<path class="chart__plotLine" d="<?= $chartPoints ?>" />
|
||||
</svg>
|
||||
print SVGChartBuilder::renderStockChart($chartData);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue