diff --git a/README.md b/README.md index faff1e0..085931c 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,11 @@ PHP project to generate clean-looking SVG price charts ![Dash 24h price in BTC from Poloniex](http://cryptohistory.org/charts/dark/dash-btc/30d/svg?lineColor=1C74BC) -7d of Dash price in Bitcoin from Poloniex.com +30 days of Dash price in Bitcoin from Poloniex.com + +Ethereum 7-day price in BTC from Poloniex ![Ethereum 7d price in BTC from Poloniex](http://cryptohistory.org/charts/sparkline/eth-btc/7d/svg) + +More examples at [cryptohistory.org](http://cryptohistory.org/). ## Requirements @@ -66,6 +70,7 @@ In your HTML: ## Available Options +### LineChart | Option | Default | | --- | --- | | width | 800 | @@ -77,6 +82,21 @@ In your HTML: | fontSize | 15 | | yAxisEnabled | true | | xAxisEnabled | false | +| yAxisZero | false | +| filled | false | + +### BarChart +| Option | Default | +| --- | --- | +| width | 600 | +| height | 300 | +| barColor | '#000' | +| markerColor | '#000' | +| labelColor | '#000' | +| fontSize | 15 | +| yAxisEnabled | true | +| xAxisEnabled | false | +| yAxisZero | true | ## Credits diff --git a/demo.php b/demo.php index 004a5e1..0b08b1e 100644 --- a/demo.php +++ b/demo.php @@ -1,11 +1,11 @@
-

Chart in svg tag, zero axis shown

+

Chart in svg tag, zero axis shown, filled

- 800, 'height'=>250, @@ -49,7 +49,8 @@ $chart = new NeatCharts\LineChart(randomData(), [ 'labelColor'=>'#222', 'smoothed'=>false, 'fontSize'=>14, - 'yAxisZero'=>true + 'yAxisZero'=>true, + 'filled'=>true ]); echo $chart->render(); ?> @@ -59,10 +60,10 @@ echo $chart->render();

Smoothed chart in svg tag

- 300, - 'height'=>300, + 'width'=>400, + 'height'=>300, // null works as a height too, it picks a height that makes the plot look good 'lineColor'=>'#080', 'labelColor'=>'#222', 'smoothed'=>true, @@ -88,6 +89,18 @@ $chart = new NeatCharts\LineChart(randomData(48), [ 'xAxisEnabled'=>false ]); echo $chart->render(); +?> +
Random generated data, loaded right in the page
+
+
+
+

Bar chart in svg tag

+
+'#409' + ]); + echo $chart->render(); ?>
Random generated data, loaded right in the page
diff --git a/src/NeatCharts/BarChart.php b/src/NeatCharts/BarChart.php new file mode 100644 index 0000000..d5947aa --- /dev/null +++ b/src/NeatCharts/BarChart.php @@ -0,0 +1,59 @@ +options = [ // BarChart defaults + 'width' => 600, + 'height' => 300, + 'barColor' => '#000', + 'markerColor' => '#000', + 'labelColor' => '#000', + 'fontSize' => 15, + 'yAxisEnabled'=>true, + 'xAxisEnabled'=>false, + 'yAxisZero'=>true + ]; + parent::setOptions($options); + } + + public function setData($chartData) { + $this->setWindow($chartData, $this->options); // sets min, max, range, etc + // we assume $chartData is sorted by key and keys and values are all numeric + + $count = count($chartData); + $deltaX = $this->xRange / $count; + $this->xMin -= $deltaX / 2; + $this->xMax += $deltaX / 2; + $this->xRange += $deltaX; + + $gridLabelXML = $this->buildGridLabelXML(); + // this also sets $this->width and $this->height + + $barRadius = min($this->width / $count / 2.5, $this->width / $count / 2 - 1); + + $chartPoints = ''; + foreach($chartData as $x => $y) { + $barX = $this->transformX($x); + $barY = $this->transformY($y); + $barY0 = $this->transformY(0); + $chartPoints .= ' M'.($barX - $barRadius).','.$barY0.' '.($barX + $barRadius).','.$barY0.' '.($barX + $barRadius).','.$barY.' '.($barX - $barRadius).','.$barY.' Z'; + } + + $this->output = ' + '. + $gridLabelXML.' + + + + + '; + } + } +} diff --git a/src/NeatCharts/LineChart.php b/src/NeatCharts/LineChart.php index adb1cbc..dc2ef77 100644 --- a/src/NeatCharts/LineChart.php +++ b/src/NeatCharts/LineChart.php @@ -12,7 +12,8 @@ namespace NeatCharts { 'fontSize' => 15, 'yAxisEnabled'=>true, 'xAxisEnabled'=>false, - 'yAxisZero'=>false + 'yAxisZero'=>false, + 'filled'=>false ]; parent::setOptions($options); } @@ -128,7 +129,7 @@ namespace NeatCharts { stroke="url(#neatchart-fadeFromNothing-'.( $chartID ).')" marker-end="url(#neatchart-markerCircle-'.( $chartID ).')" > - '.($this->options['yAxisZero'] ? ' + '.($this->options['filled'] ? ' getPrecision($labelInterval); - $this->padding['left'] = $this->options['fontSize'] * 0.6 * ( - 1 + max(1, ceil(log($this->yMax, 10))) + $this->getPrecision($labelInterval) - ) + 10; + $this->padding['left'] = $this->options['fontSize'] * 0.65 * ( + 2.5 + max(1, ceil(log($this->yMax, 10))) + $this->getPrecision($labelInterval) + ); $this->width = $this->options['width'] - $this->padding['left'] - $this->padding['right']; // Top and bottom grid lines $gridLines = - 'M10,0 '.$this->width.',0 '. - ' M10,'.$this->height.','.$this->width.','.$this->height; + 'M0,0 '.$this->width.',0 '. + ' M0,'.$this->height.','.$this->width.','.$this->height; // Top and bottom grid labels $gridText = - ''.($this->labelFormat($this->yMax, $labelPrecision + 1)).'' . - ''.($this->labelFormat($this->yMin, $labelPrecision + 1)).''; + ''.($this->labelFormat($this->yMax, $labelPrecision + 1)).'' . + ''.($this->labelFormat($this->yMin, $labelPrecision + 1)).''; // Main labels and grid lines for ( @@ -117,8 +117,8 @@ namespace NeatCharts { $labelHeight < $this->height - 1.5 * $this->options['fontSize'] && $labelHeight > $this->options['fontSize'] * 1.5 ) { - $gridText .= ''.$this->labelFormat($labelY, $labelPrecision).''; - $gridLines .= ' M0,'.$labelHeight.' '.$this->width.','.$labelHeight; + $gridText .= ''.$this->labelFormat($labelY, $labelPrecision).''; + $gridLines .= ' M-'.($this->options['fontSize'] * 0.65).','.$labelHeight.' '.$this->width.','.$labelHeight; } else if ( // label is too close $labelHeight < $this->height - $this->options['fontSize'] * 0.75 && $labelHeight > $this->options['fontSize'] * 0.75 @@ -133,9 +133,9 @@ namespace NeatCharts {