All geek questions in one place

How to insert a graph (jpgraph) on a web page

I am using this script, which is one example provided by jpgraph itself. When I put this on a web page (blank) by itself, it draws a graph. But when I embed the code on an existing web page (with some content), it does not draw a graph.

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

+6
source share
6 answers

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

Each time you create graphical content for a PHP script, you must process the output differently than regular HTML or text.

There are several routes, I will briefly talk about them here.

Save the output to a file and use this file name 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 the image tag, for example (for example):

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

Create a standalone PHP script that will display the graphics

You can use the sample script as is, only in a file called graph_render_script.php . Then in your HTML you use this script as a source:

 <img src="graph_render_script.php" />

Source data with database-64

Another way is to use base-64 encoded image data. It is relatively simple:

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

As always, the documentation should be your guide!

Documentation

+10
source

This worked for me:

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

 <img src="graph.php" >
+4
source

Embedding embedded graphics is really possible . You will need to use output buffering to capture image data, and then base64 encode that data, and then use this base64 encoded string as the source in <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 a great point in that this method is almost never what you want. I do not recommend embedding image data like this if you have no good reason for this and don’t understand the disadvantages, that is, older browsers do not have support for it, and the page size increases dramatically (not only from image data, but also because that the image data is encoded in base64, which increases the length). I used this method myself in the project last year, but only because the client refused to make a second request for the image.

+3
source

But when I paste the code into an existing web page (with some content), it does not draw a graph.

You cannot do this - you cannot display the image as raw binary data on a page.

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

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

The graph should be on your own page, you cannot embed it. It outputs raw JPG, and you don’t need to send other content and have the right headers to tell the browser about it JPG. To embed a graph, you must make another page called stats.php, for example, and on this page you must make an image tag that points to a separate graph.

 <img src=graph.php>
+1
source

I had this problem many times, I noticed that this happens when you have require() or include() in your script diagram, and these scripts have database connections or special configurations.

I solved this problem by separating data extraction and chart drawing, passing parameters to a script, or using SESSIONS to get values.

An example of an embedded image 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" />

Sincerely.

0
source

Source: https://habr.com/ru/post/896734/

More articles:


All Articles