Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to embed a graph (jpgraph) in a web-page

Tags:

php

jpgraph

I am using this script which is one of the examples provided by jpgraph itself. When I put this on a web-page (blank) by itself, it's drawing the graph. But when I embed the code in already existing web-page (with some content), it ain't drawing a graph.

GD is already enabled according to phpinfo(). Iam using jpgraph 3.5.0b1.

like image 819
Nitin Venkatesh Avatar asked Sep 06 '11 17:09

Nitin Venkatesh


3 Answers

The problem is that you are mixing HTML/text output with image output.

Any time you have a PHP script generate graphical content you have to handle the output differently than normal HTML or text.

There are a few routes, I'll cover them briefly here.

Save the output to a file and use that filename in your HTML

//replace this line:
// Display the graph
//$graph->Stroke();

// with these lines:

    // Default is PNG so use ".png" as suffix
    $fileName = "/tmp/imagefile.png";
    $graph->img->Stream($fileName);

.. then use $filename in an image tag, like this (for example):

print '<img src="'.$filename.'" />';

Create a standalone PHP script that will output the graphic

You can use the example script as-is, alone in a file called graph_render_script.php. Then, in your HTML, you use that script as a source:

<img src="graph_render_script.php" />

Output base-64 encoded data

Another route is to use base-64 encoded image data. This is relatively simple to do:

print '<img src="data:image/png;base64,'.base64_encode($graph->Stroke()).'" />';

As always, the documentation should be your guide!

Documentation

  • http://jpgraph.net/download/manuals/chunkhtml/ch05s05.html
  • base64_encode - http://php.net/manual/en/function.base64-encode.php
like image 127
Chris Baker Avatar answered Nov 13 '22 13:11

Chris Baker


This worked for me:

putting the php code that generates the image in a file...Then on my html page I do this:

<img src="graph.php" > 
like image 4
gio Avatar answered Nov 13 '22 12:11

gio


embedding the graph inline is indeed possible. You'll have to use output buffering to capture the image data, then base64 encode that data, then use that base64-encoded string as the source in an <img>.

Try something like this:

$img = $graph->Stroke(_IMG_HANDLER);

ob_start();
imagepng($img);
$imageData = ob_get_contents();
ob_end_clean();

?><html>
<head>
    <title>JpGraph Inline Image Example</title>
</head>
<body>
    <h1>JpGraph Inline Image Example</h1>
    <img src="data:image/png;base64,<?php echo(base64_encode($imageData)); ?>" />
</body>
</html>

ceejayoz made an excellent point in that this method is almost never what you want. I do not recommend embedding the image data like this unless you have a good reason to do so and understand the downsides, i.e. older browsers lack support for it, and the page size is dramatically increased (not only from the image data but the fact the image data is base64 encoded, which balloons the length). I've used this method in the field myself on a project last year, but it was only because the client refused to make a second request for the image.

like image 3
The Awnry Bear Avatar answered Nov 13 '22 12:11

The Awnry Bear