7

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.

Nidal
  • 1,717
  • 1
  • 27
  • 42
Nitin Venkatesh
  • 281
  • 1
  • 5
  • 13
  • Show some code and tell us what happens exactly – Pekka Sep 06 '11 at 17:47
  • Although we can't do anything without at least a link to the page itself, try putting these lines at the top of your script. They will show all errors. `error_reporting(E_ALL); ini_set('display_errors', '1');` – Bojangles Sep 06 '11 at 17:47
  • The word this in "I am using this script" is a link to the code itself. Thanks everybody for your quick response and replies. The problem is solved :) – Nitin Venkatesh Sep 06 '11 at 18:06

6 Answers6

11

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

Chris Baker
  • 49,926
  • 12
  • 96
  • 115
  • You cannot rem the $graph->Stroke(); otherwise you'll get an empty image. The code is ok, just avoid to rem the line //$graph->Stroke(); – Power Engineering Jan 07 '16 at 22:50
4

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" > 
Abdusalam Ben Haj
  • 5,343
  • 5
  • 31
  • 45
gio
  • 51
  • 3
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.

Chris Baker
  • 49,926
  • 12
  • 96
  • 115
The Awnry Bear
  • 4,599
  • 3
  • 29
  • 33
1

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" />
ceejayoz
  • 176,543
  • 40
  • 303
  • 368
  • Actually, you CAN embed raw binary data as an image in an HTML page. All modern browsers support this. See my answer below for an example of doing so. – The Awnry Bear Apr 14 '13 at 23:09
  • @TheAwnryBear That's not raw binary data, inflates the file size, and is rarely the right way of doing things. – ceejayoz Apr 15 '13 at 01:48
  • You're right, technically it's not raw BINARY data since it's base 64 rather than base 2. And I do agree with you that it's almost never the preferred way, but it does have its place... however limited that may be. (I've updated my answer to note all that.) Cheers! – The Awnry Bear Apr 15 '13 at 02:03
  • 1
    @TheAwnryBear Did you downvote all the other answers over the fact that we did not mention this non-standard and non-typical approach in ours? That's not a very good reason for a dv; though I doubt either of us (ceej or myself) care too much about rep, you should keep that in mind. Use dv for incorrect answers, not to support your own. – Chris Baker Apr 15 '13 at 13:58
  • 1
    It was also probably excessive to comment on everyone's answer with a "correction". – Chris Baker Apr 15 '13 at 13:59
  • I could care less about rep, which is merely a side effect of the true purpose of voting: guiding the audience to the most valid answer(s). Remember, I took on neg rep when I downvoted, so you're not going to intimidate me (in a passive aggressive manner I might add) to reverse my actions. Cheers. – The Awnry Bear Apr 15 '13 at 17:30
  • 1
    I don't think the point was "you should care about rep", I think it was "you should care about not being a dick"... – ceejayoz Apr 15 '13 at 17:33
  • 1
    @TheAwnryBear Using words to communicate isn't passive aggressive. Your answer is an edge case that you yourself describe as not the standard approach. That does not make **all the other answers** wrong, nor does it make your answer "most valid" -- that is a label reserved for whatever got the job done in the use case at hand. You went to all the other answers, downvoted them, and left a "correction" comment, then have the temerity to call someone else passive/aggressive? Calm down there, fella. – Chris Baker Apr 15 '13 at 17:40
  • No I got the point. I'm not being a dick though. You guys obviously feel different, and that's cool. Differing opinions are why there's a voting system in place, and why every person has a vote. For the record, I only downvoted two answers. It's hard enough to find information, and I hate inaccurate/incomplete information. Especially here of all places. Cheers. – The Awnry Bear Apr 15 '13 at 17:46
  • 1
    There is nothing in any of the answers that you downvoted that is inaccurate. As for incomplete, most answers are. We aren't writing books here, we're answering questions. The most common, wide-appealing solutions that directly apply to the question at hand are covered in most answers. Virtually no StackOverflow answer pretends to be the exhaustive source on any given subject -- that is the job of documentation. I am not saying that your contribution isn't useful--it is; the fundamental disagreement here is that your ability to add something doesn't take anything away from other contributions. – Chris Baker Apr 16 '13 at 16:23
1

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>
profitphp
  • 8,104
  • 2
  • 28
  • 21
  • Actually, the graph does NOT need to be on its own page (although that certainly is what I would do for larger images). Modern browsers support embedded raw image data in `` elements. See my answer below for an example of displaying a JpGraph embedded inline without the need for a separate page. – The Awnry Bear Apr 14 '13 at 23:11
0

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.

RGA
  • 147
  • 1
  • 6