support custom plotline colors with SVG

This commit is contained in:
Joshua Seigler 2016-07-03 03:36:30 -04:00
parent eff4f386ae
commit 7cb823d536
2 changed files with 29 additions and 10 deletions

View file

@ -127,7 +127,11 @@ function renderChart(
$chartData[$item->date] = $item->weightedAverage;
}
$poloniexChart = new NeatCharts\LineChart($chartData, $themes[$theme]);
if ($format == 'svg') {
$chartOptions = array_replace($themes[$theme], ['lineColor'=>'@lineColor']);
}
$poloniexChart = new NeatCharts\LineChart($chartData, $chartOptions);
$result = '<?xml version="1.0" standalone="no"?>' . PHP_EOL;
$result .= $poloniexChart->render();
@ -148,13 +152,26 @@ function renderChart(
}
header('Expires: '.gmdate(DateTime::RFC1123, $resultExpires));
if ($format == 'svg') {
header('Content-type: image/svg+xml; charset=utf-8');
header('Content-Disposition: inline; filename="Dash-chart-' . gmdate('Y-m-d\THis+0', $startTime) . '--' . gmdate('Y-m-d\THis+0') . '.svg"');
} else if ($format == 'png') {
if ($format == 'png') {
header('Content-Type: image/png');
header('Content-Disposition: inline; filename="Dash-chart-' . gmdate('Y-m-d\THis+0', $startTime) . '--' . gmdate('Y-m-d\THis+0') . '.png"');
echo $result;
} else if ($format == 'svg') {
header('Content-type: image/svg+xml; charset=utf-8');
header('Content-Disposition: inline; filename="Dash-chart-' . gmdate('Y-m-d\THis+0', $startTime) . '--' . gmdate('Y-m-d\THis+0') . '.svg"');
if (array_key_exists('lineColor', $_GET)) {
$lineColor = htmlspecialchars($_GET['lineColor']);
if (1 === preg_match('/^[a-fA-F0-9]{3,6}/', $lineColor)) {
//this is an HTML color
$lineColor = '#' . $lineColor;
}
} else {
$lineColor = $themes[$theme]['lineColor'];
}
echo str_replace('@lineColor', $lineColor, $result);
} else {
return false;
}
echo $result;
return true;
}

View file

@ -72,8 +72,8 @@
<section>
<h2>Transparent SVG and PNG charts with your favorite cryptocurrencies</h2>
<figure>
<img src="/charts/dark/dash-btc/30d/svg" alt="Poloniex Dash/BTC price">
<figcaption>30 Day Dash price in BTC <code><a href="/charts/dark/dash-btc/30d/svg">http://cryptohistory.org/charts/dark/dash-btc/30d/svg</a></code></figcaption>
<img src="/charts/dark/dash-btc/30d/svg?lineColor=1C74BC" alt="Poloniex Dash/BTC price">
<figcaption>30 Day Dash price in BTC <code><a href="/charts/dark/dash-btc/30d/svg?lineColor=1C74BC">http://cryptohistory.org/charts/dark/dash-btc/30d/svg?lineColor=1C74BC</a></code></figcaption>
</figure>
<p>Sparklines too! ETH 7 days: <img src="/charts/sparkline/eth-btc/7d/svg" alt="ETH 7d chart" style="vertical-align: bottom;">
<code>&lt;img src=&quot;http://cryptohistory.org/charts/sparkline/eth-btc/7d/svg&quot; alt=&quot;ETH 7d chart&quot; style=&quot;vertical-align: bottom;&quot;&gt;</code>
@ -86,13 +86,15 @@
<p>Theme: <code>dark</code>, <code>light</code>, or <code>sparkline</code>.</p>
<p>Currency: anything active on Poloniex. Prices are all in bitcoin.</p>
<p>Timespan: <code>1y</code>, <code>30d</code>, <code>7d</code>, or <code>24h</code>.</p>
<p>Format: <code>svg</code> (best) or <code>png</code>.</p>
<p>Format: <code>svg</code> (best) or <code>png</code>.<br>
If you use svg format, you can add <code>?lineColor=</code> to the end of the URL for a custom plot-line color.
</p>
</section>
<section>
<h2>Examples:</h2>
<p>Ethereum 24h, dark SVG: <code><a href="/charts/dark/eth-btc/24h/svg" target="_blank">http://cryptohistory.org/charts/dark/eth-btc/24h/svg</a></code></p>
<p>Litecoin 30d, light PNG: <code><a href="/charts/light/ltc-btc/30d/png" target="_blank">http://cryptohistory.org/charts/light/ltc-btc/30d/png</a></code></p>
<p>Doge 1y, dark SVG: <code><a href="/charts/dark/doge-btc/1y/svg" target="_blank">http://cryptohistory.org/charts/dark/doge-btc/1y/svg</a></code></p>
<p>Doge 1y, dark SVG, yellow line: <code><a href="/charts/dark/doge-btc/1y/svg?lineColor=BB9F32" target="_blank">http://cryptohistory.org/charts/dark/doge-btc/1y/svg?lineColor=BB9F32</a></code></p>
</section>
</main>
<footer>