OMG it works!!

index.php

@@ -20,14 +20,14 @@ $router->map('GET', '/', function() {
 });
 
 // map cryptocurrency stuff
-$router->map( 'GET', '/charts/[BTC_DASH:pair]/[7d|24h:duration]/[svg|png:format]', function($pair, $duration, $format) {
+$router->map( 'GET', '/charts/[dark|light:theme]/[a:curA]-[a:curB]/[7d|24h:duration]/[svg|png:format]', function($theme, $curA, $curB, $duration, $format) {
   require __DIR__ . '/views/chart.php';
   renderChart(
-    $pair,
+    $theme,
+    strtoupper($curB.'_'.$curA),
     60 * 60 * 24 * ($duration == '7d' ? 7 : 1),
     ($duration == '7d' ? 1800 : 300),
     $format,
-    '#000',
     800,
     200,
     12
@@ -39,12 +39,12 @@ $router->map( 'GET', '/charts/[BTC_DASH:pair]/[7d|24h:duration]/[svg|png:format]
 $match = $router->match();
 
 // call closure or throw 404 status
+if( !$match || !is_callable( $match['target'] ) || false === call_user_func_array( $match['target'], $match['params'] )) {
+  // no route was matched
+  header( $_SERVER["SERVER_PROTOCOL"] . ' 404 Not Found');
+  echo '<h1>404 Not Found</h1><p>Page not found</p>';
+}
 try {
-  if( !$match || !is_callable( $match['target'] ) || false === call_user_func_array( $match['target'], $match['params'] )) {
-    // no route was matched
-    header( $_SERVER["SERVER_PROTOCOL"] . ' 404 Not Found');
-    echo '<h1>404 Not Found</h1><p>Page not found</p>';
-  }
 } catch (Exception $e) {
   header($_SERVER["SERVER_PROTOCOL"]." 500 Server Error", true, 500);
   echo 'There was some problem generating that for you.';

views/chart.php

@@ -21,17 +21,19 @@ function getJson($url) {
 }
 
 function renderChart(
+  $theme,
   $pair,
   $dataDuration = (7 * 24 * 60 * 60),
   $dataResolution = 1800,
   $format = 'svg',
-  $color = '#000',
   $width = 800,
   $height = 200,
   $fontSize = 12
 ) {
 
-  $result = CacheManager::get('poloniex-'.$pair.'-'.$dataDuration.'-'.$format);
+  $chartCacheKey = 'poloniex-'.$theme.'-'.$pair.'-'.$dataDuration.'-'.$format;
+
+  $result = CacheManager::get($chartCacheKey);
 
   if (is_null($result)) {
     $startTime = time() - $dataDuration;
@@ -54,8 +56,8 @@ function renderChart(
     $poloniexChart = new NeatCharts\LineChart($chartData, [
       'width'=>800,
       'height'=>200,
-      'lineColor'=>"#1C75BC", // Dash blue
+      'lineColor'=>($theme == 'dark' ? '#000' : '#fff'),
-      'labelColor'=>"#000",
+      'labelColor'=>($theme == 'dark' ? '#000' : '#fff'),
       'smoothed'=>false,
       'fontSize'=>12
     ]);
@@ -63,26 +65,26 @@ function renderChart(
 
     if ($format == 'png') {
       $im = new Imagick();
-      $im->setBackgroundColor(new ImagickPixel("transparent"));
+      $im->setBackgroundColor(new ImagickPixel('transparent'));
       $im->readImageBlob($result);
-      $im->setImageFormat("png32");
+      $im->setImageFormat('png32');
       $result = $im->getImageBlob();
       $im->clear();
       $im->destroy();
     }
-    CacheManager::set('poloniex-'.$pair.'-'.$dataDuration.'-'.$format, $result, $dataDuration);
+    CacheManager::set($chartCacheKey, $result);
     $resultExpires = time() + $dataDuration;
   } else {
-    $resultExpires = CacheManager::getInfo('poloniex-'.$pair.'-'.$dataDuration.'-'.$format)[ 'expired_time' ];
+    $resultExpires = CacheManager::getInfo($chartCacheKey)[ 'expired_time' ];
     $startTime = $resultExpires - $dataDuration;
   }
 
-  header('Expires: '.gmdate("D, d M Y H:i:s", $resultExpires));
+  header('Expires: '.gmdate('D, d M Y H:i:s', $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') {
-    header("Content-Type: image/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;

views/fakeStockData.php

@@ -1,23 +0,0 @@
-<?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 < 96; $n++) {
-  $current -= $offset;
-  $current *= 1 + $volatility * (rand()/getRandMax() - 0.5);
-  $current += $offset;
-  $chartData[$n] = $current;
-}
-
-$stockChart = new NeatCharts\LineChart($chartData, [
-  "width"=>500,
-  "height"=>150,
-  "fontSize"=>10
-]);
-print $stockChart->render();
-
-?>

views/fakeTempData.php

@@ -1,24 +0,0 @@
-<?php
-$chartData = [];
-
-$start = 100 * (rand()/getRandMax())**3;
-$volatility = rand()/getRandMax() + 0.01;
-$velocity = (rand()/getRandMax() - 0.5);
-$acceleration = 0.1 * (rand()/getRandMax())**2;
-
-for ($n = 0, $current = $start; $n < 12; $n++) {
-  $velocity *= 0.5;
-  $velocity += $acceleration * 2 * (rand()/getRandMax() - 0.5);
-  $current += $velocity;
-  $chartData[$n] = $current;
-}
-
-$tempChart = new NeatCharts\LineChart($chartData,  [
-  "width"=>700,
-  "height"=>400,
-  "lineColor"=>"#D00",
-  "labelColor"=>"#777",
-  "smoothed"=>true
-]);
-print $tempChart->render();
-?>

views/index.php

@@ -3,12 +3,10 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
-  <title>NeatCharts demo</title>
+  <title>Embeddable Cryptocurrency Charts : Cryptohistory</title>
   <style>
     main {
-      -webkit-columns: 800px 2;
+      margin: 0 auto;
-      -moz-columns: 800px 2;
-      columns: 800px 2;
     }
     section {
       display: inline-block;
@@ -22,20 +20,24 @@
 
 <body>
   <header>
-    <h1>NeatCharts demo</h1>
+    <h1>Embeddable Cryptocurrency Charts</h1>
   </header>
   <main>
     <section>
       <h2>Poloniex Dash/BTC Price</h2>
-      <img src="/charts/dash/24h" alt="Poloniex Dash/BTC price">
+      <figure>
+        <img src="/charts/dark/dash-btc/7d/svg" alt="Poloniex Dash/BTC price">
+        <figcaption>7 Day Dash price in BTC <code>http://cryptohistory.org/charts/dark/dash-btc/7d/svg</code></figcaption>
+      </figure>
     </section>
-
     <section>
-      <h2>Fake Stock Market Data</h2>
+      <h2>Build your own chart:</h2>
-    </section>
+      <p>The URL is flexible: <code>http://cryptohistory.org/charts/{theme}/{main-currency}-{chart-currency}/{timespan}/{format}</code>.</p>
-
+      <p>Theme: <code>dark</code> or <code>light</code>.</p>
-    <section>
+      <p>Main currency: anything on Poloniex.</p>
-      <h2>Monotonically Smoothed Chart</h2>
+      <p>Chart currency: any of the chart currencies on Poloniex, like BTC or USDT.</p>
+      <p>Timespan: <code>7d</code> or <code>24h</code>. More options coming soon.</p>
+      <p>Format: <code>svg</code> (best) or <code>png</code>.</p>
     </section>
   </main>