how can i embed php chart graphs into html - php

i'm using PHP Graph Lib PHPGraphLib
i created some graphs , and all i need is to embed these graphs into html,,
you know, inside and so on,,
every time i put the code within html it gives me errors
The image “http://localhost/chart2.php” cannot be displayed, because it contains errors.
although without the html code , it works fine ...

Assuming your image code is in chart2.php, you embed it into html with an img tag:
<img src="chart2.php" alt="This is a chart of x" />

Related

How to display a text file hosted on another server inside a Blogger post

I need to read a text file on a server and display its content in a blog post on Blogger. The text file is a result of a simple download counter and contains a number. The problem is the Blogger does not support PHP codes in a post. My current solution is to use OBJECT tag to call PHP script that displays the text file content with ECHO. It works. But the result is displayed inside a small frame and I can't apply CSS style to it or align it properly with the existing text. Is there another way? I understand it can be done with AJAX call but my scripting knowledge is basic and I wouldn't know where to begin. Help would be appreciated.
To display the result in the blog I used this code:
<p>File test.zip downloaded
<object type="text/plain"
data="http://example.com/statistics.php?dname=test"
width="30" height="30"></object> times</p>
EDIT: I have tried to follow #Toni suggestion but it only leads to more questions. Looks like Ajax call is way beyond my current level of knowledge. Sorry and thank you again.
Here is what I'm currently trying. I have moved the text that goes with the counter inside PHP file so the script now returns a string like "file has been downloaded 8 times" instead of just number "8". Also instead of OBJECT tag I'm using IFRAME.
<iframe src="http://example.com/mystats.php?dname=test"
frameborder="0" border="0" cells pacing="0" height="30"></iframe>
The iframe seems to be easier to style. If I can't figure out how to find which CSS is applied to a blog post and how to apply it to iframe, I can at the minimum mimic the style by using similar font.
You can use javascript with your blogger web-site.
Using javascript on your web-page, you can invoke a GET request to your PHP code and get the data you want, to display it on your web-page.
Below, there are links, to help you with this task:
How to invoke GET request in vanilla JavaScript
Invoking GET with jQuery
Use JavaScript to alter text dynamically
I made it work with JavaScript! Here is how. Server side PHP script reads and echoes a text file inside document.write().
<?php
$varcontent = #file_get_contents('yourtextfile.txt');
echo 'document.write("'.$varcontent.'")';
?>
The resulting string looks like this:
document.write("your text file content here")
Inside the Blogger post add the JavaScript code with the PHP script file as a source:
<script type="text/javascript"
src="http://example.com/yourfile.php">
</script>
Done! The content of your text file is displayed and styled with your current CSS.

Using dynamic php generated images with MPDF

I am using php and mpdf to generate a particular pdf. I have some pie diagrams in the pdf. For that I am using pChart. I am generating pie diagrams dynamically for rendering in pdf.
In my pdf all the static images are rendered properly, but no dynamically generated pie diagrams.
This one(static) works,
<div class="chart">
<?php echo CHtml::image(Yii::app()->baseUrl.'/images/color-block2.png', 'Logo screenshot', array('class' => 'logo_image')); ?>
</div>
But not this(dynamic)
<div class="chart">
<?php echo CHtml::image(Yii::app()->baseUrl.'/images/pie.png', 'Logo screenshot', array('class' => 'logo_image')); ?>
</div>
Ps: I am using Yii url rules for a clean url for pie diagram.
When i rendered the pdf_template as html, both images are rendered properly.
How can i implement dynamic images using mpdf without the $mpdf->Image() method.
I suspect i cannot use the $mpdf->Image() while generating a pdf from html.
Update:
After
$mPDF->showImageErrors = true;
I'm getting
mPDF error: IMAGE Error (http://csrt.dev/images/pie.png): Could not find image file
Base64 encoded the image and embedded it in a <img> tag.
<div class="chart">
<img src="data:image/png;base64,xx5t.." />
</div>
I had the same problem using Yii, and found this to be the solution, however for other Yii/PHP users out there, you have to use base64_encode(your file contents) to get the part after base64, in the tag.
for example:
base64_encode(file_get_contents("../images/folder16.gif"));
I've had a similar issue.
Using:
<img src="http://domain.com/assets/img/header.png">
or
<img src="/assets/img/header.png">
give me the following error:
mPDF error: IMAGE Error (http://domain.com/assets/img/header.png): Could not find image file
Even though i can browse to that and see the image ok.
However using:
<img src="assets/img/header.png">
Seems to work fine.

How to print the content of an OBJECT element when using the FILE->PRINT menu?

I have a PHP script which displays a PDF inside an object element. Adobe Reader plugins handle this fine and using the Adobe toolbar users can print the embedded PDF. However, some users insist on using the File menu (98% of users on Internet explorer 8) to print the HTML document. Utilizing this File->Print menu in IE, the HTML document is printed out without the contents (PDF) of the OBJECT element. (Print Preview) Using this method to print the document in Chrome or FF results in only the data currently shown in the Object viewport, to be printed. That is, a partial object and not the actual PDF.
I have searched and read a few related questions on StackOverflow, but nothing specific to this situation or case. Some of these 'solutions' use a Javascript method or function to print the content via a button or link. If I can't get my users to use the Adobe toolbar in the browser to print a PDF, I doubt they'll change their minds to use a button that says 'PRINT'.
Why does the File->Print method in IE result in a blank page? Is there a way to make the browser print the contents of an Object element when using the File->Print menu. No JS hacks, buttons, links to 'click here', iframes, or suggestion to 'display it inline' etc.
For reference, the code for this 'View PDF' is below (which, again, works fine to display the PDF content in the object element; no issues).
echo "
<html>
<head>
<title>View PDF</title>
</head>
<body scroll='no'>
<object data='getFile.php?f={$file_hash}' type='application/pdf' width='100%' height='100%' >
<h2>Error: No PDF plugin</h2>
<p>The browser does not have a PDF viewer installed. In order to view the PDF in the browser, please <a href='http://get.adobe.com/reader'>download Adobe Reader</a>. </p>
</object>
</body>
</html>";
As far as I know there is no solution for this issue. I have seen some developers "solving" the problem by generating a PDF file that automatically shows the print dialog when opened
Another option could be to show the PDF file in a new window that removes the toolbar and menus in order to avoid the visual ambiguity.
Window.open(url, "_blank", "location=0,menubar=0,toolbar=0");
I do not know if this one works, but you could try detecting the browser print event, then calling pdfDoc.printAll(); on your Acrobat Reader object.
Open just the PDF - without the HTML & object. Then File->Print will always work.
Of course it depends much more on the browser/reader configuration if the PDF is displayed in the browser or opened in a new Reader window

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

tinyMCE media embed, with media plugin in PHP + MySql

i'm using tinyMCE and i can't find the answer for this in their forums.
I'm using the "media" plugin to embed flash. the html result in html preview is normal:
<p><iframe src="http://www.youtube.com/embed/lWRi7gDYjVY" frameborder="0" width="425" height="350"></iframe></p>
the result saved to the database is quite different though, using mysql_real_escape_string it saves:
<p><img data-mce-json="{'type':'iframe','video':{'sources':[]},'params':{'src':'http://www.youtube.com/embed/lWRi7gDYjVY','frameborder':'0'},'width':'425','height':'350'}" class="mceItemMedia mceItemIframe" src="http://localhost/assets/scripts/tiny_mce/themes/advanced/img/trans.gif" data-mce-src="assets/scripts/tiny_mce/themes/advanced/img/trans.gif" width="425" height="350"></p>
and that is what is rendered on my page's html, showing only a white space the size of the iframe...
I'm really stuck and i don't know what to do.
Thanks
/Update/
well, i found out the source of the problem: i am saving my contents through AJAX; i haven´t found a way to get the HTML content out of the editor with javascript so i was hacking it with a jQuery selector:
$('div').find('iframe').contents().find('body').html()
so that way i get the "wrong html" and it only happened with youtube videos so far.
My question is: how can i obtain the editor's HTML so i can post it through AJAX?
Thank you once again.
To obtain the editor's HTML use the following
// this is "content" by default else it is the id of your
// html element you get the editor for (usually a textarea)
var editor_id = 'put_your_editor_id_here';
editor = tinymce.get(editor_id);
var content = editor.getContent();
You may have a closer look at the tinymce API.
This is because the media plugin strips the tags that are considered invalid.
Can you try to change the option Valid_elements in Init and assign to [].
Try it.
good luck

Categories