What method would be best to build this complex graph

Question

After 15 years doing UI development, there\'s very little I look at and think, \"how on earth do I do that.\" This is one of those times.

A graphic designer has sold

Answer 1

If it absolutely must be as compatible as possible, I would generate an SVG image and render it to PNG. This is not nearly as slow as it sounds for an image like this with so few points.

Here's a very quick, very dirty example. It assumes that you have the ImageMagick extension available though in a pinch you could dump the SVG to a file and exec() a command-line tool like rsvg. Obviously the "right" answer involves some sort of caching scheme for the rendered graph. Also, forgive me for not being more of a SVG ninja.

graph.svg.php:

?xml version="1.0" standalone="no"?>

render.php:

 0.5,
    'red'    => 0.8,
    'yellow' => 0.55,
    'purple' => 0.4,
    'blue'   => 0.75,
);

ob_start();
include('graph.svg.php');
$svg = ob_get_contents();
ob_end_clean();

$im = new Imagick();
$im->readImageBlob($svg);
$im->setImageFormat('png24');
$png = $im->getImagesBlob();
$im->clear();
$im->destroy();

header('Content-Type: image/png');
header('Content-Length: ' . strlen($png));
echo $png;
exit;

Output looks like this: