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

问题

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.

回答1:

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

回答2:

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" >

回答3:

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.

回答4:

But when I embed the code in already existing web-page (with some content), it ain't drawing a graph.

You can't do that - you can't output an image as raw binary data within a page.

You need to put the code that generates the graph in a separate file, and use an image tag.

<img src="path/to/jpgraph/chart.php" />

回答5:

The graph needs to be on its own page, you can't embed it. It outputs a raw JPG and you need to have no other content sent and have the proper headers to tell the browser it's a JPG. To embed the graph you'd make a different page called stats.php for example, and on that page you'd make an image tag pointing to the stand alone graph.

<img src=graph.php>

回答6:

I've had this problem many times, I've noticed it happens when you have require() or include() in your Chart's script and those scripts have Data Base connections or special configurations.

I've solved this problem separating the data retrieving and the Chart drawing, passing parameters to the script or using SESSIONS to get the values.

Example of Embed image Chart in your PHP or HTML file:

<img src="linear_graph_customer.php?values=1,2,3,4|1,2,3,4|1,2,3,4&title=CHART&width=500&height=300" width="500" height="300" class="img" />

Regards.

来源：https://stackoverflow.com/questions/7323976/how-to-embed-a-graph-jpgraph-in-a-web-page

标签

php

jpgraph