graph.php

<?php

// Array of Bitcoin price data (chronologically sorted)
$data = [1000, 400, 120, 160, 10, 10, 130, 160, 200]; // Replace with your actual data

// Settings for the graph
$width = 400;  // Total width of the graph
$height = 200; // Total height of the graph
$maxValue = 1000; // Set maximum value to 1000

// Calculate the width between each data point
$pointCount = count($data);
$xStep = $width / ($pointCount - 1);

// Normalize data to fit within the graph's height
$minValue = 0; // Minimum value is 0
$maxValue = max($maxValue, max($data)); // Ensure maxValue is at least the highest value in data

// Helper function to map data value to SVG coordinates
function mapValueToY($value, $height, $minValue, $maxValue)
{
	return $height - (($value - $minValue) / ($maxValue - $minValue) * $height);
}

// Start building the SVG path data
$pathData = "M0," . mapValueToY($data[0], $height, $minValue, $maxValue) . " ";

// Generate cubic Bezier curves based on the data points
for ($i = 1; $i < $pointCount; $i++) {
	$x = $i * $xStep;
	$y = mapValueToY($data[$i], $height, $minValue, $maxValue);
	$prevX = ($i - 1) * $xStep;
	$prevY = mapValueToY($data[$i - 1], $height, $minValue, $maxValue);
	$controlX1 = $prevX + $xStep / 4;
	$controlY1 = $prevY;
	$controlX2 = $x - $xStep / 4;
	$controlY2 = $y;

	// Cubic Bezier curve command
	$pathData .= "C$controlX1,$controlY1 $controlX2,$controlY2 $x,$y ";
}

// Close the path exactly at the end of the gradient
$pathData .= "L$width,$height L0,$height Z";

// Output the SVG
header("Content-type: image/svg+xml");
echo "<svg width='100%' height='100%' viewBox='0 0 $width $height' xmlns='http://www.w3.org/2000/svg'>
    <defs>
        <linearGradient id='grad1' x1='0%' y1='0%' x2='0%' y2='100%'>
            <stop offset='0%' style='stop-color:#00bfe9;' />
            <stop offset='100%' style='stop-color:#26293b' />
        </linearGradient>
    </defs>
    <path d='$pathData' fill='url(#grad1)' stroke-width='0'/>
</svg>";