Embed JpGraph in web pages

Problem

In PHP, you use JpGraph to produce graphs. You would like to include (embed) such a graph in a web page but you get the following error: “The image cannot be displayed, because it contains errors.”

Explanation

Let’s see the following basic example (example0.php):

<?php // content="text/plain; charset=utf-8"
require_once ('lib/jpgraph/src/jpgraph.php');
require_once ('lib/jpgraph/src/jpgraph_line.php');

// Some data
$ydata = array(11,3,8,12,5,1,9,13,5,7);

// Create the graph. These two calls are always required
$graph = new Graph(350,250);
$graph->SetScale('textlin');

// Create the linear plot
$lineplot=new LinePlot($ydata);
$lineplot->SetColor('blue');

// Add the plot to the graph
$graph->Add($lineplot);

// Display the graph
$graph->Stroke();
?>

Actually, this code will produce a PNG file, thus it will set the header to ‘Content-type: image/png‘. Once the header is set, it cannot be changed. Now let’s see what happens if you try to mix it with HTML:

<p>
Beginning of the HTML page. Normal text.
</p>
<?php
   // the previous code of example0.php, I won't repeat that
?>

Since the page starts with normal HTML, the header will be set to ‘Content-type: text/html‘. Then the JpGraph PHP block will try to set ‘Content-type: image/png‘, so there is a conflict.

Solution #1

The easy way is to make a PHP file that produces a graph and include this file as if it were a normal image:

<p>
This is normal HTML text.
</p>
<img src="example0.php">

What happens if you want to pass some data to the JpGraph PHP file, regarding how to produce the graph? If the data are simple, you could pass them via GET parameters:

This is normal HTML text.
<img src="example0.php?label1=...&label2=...&data1=...&data2=...">

However, if the data is complicated, it would be better to include JpGraph directly in your PHP. This way, JpGraph has access to the necessary data structures from which it can construct the graph. I will explain it in the next section.

Solution #2

Let’s see how to include JpGraph directly in our PHP script:

<p>
Normal HTML at the beginning of the page.
</p>
<?php
   // produce $ydata ...
?>
<?php
   define('PREFIX_DIR', 'tmp.jpgraph');   // images will be created here
   define('PREFIX', 'jpgraph');   // prefix for the images, can be anything
   define('TIME_LIMIT', 3 * 60);    // 3 minutes
   $tmpfname = tempnam(PREFIX_DIR, PREFIX);   // create temp filename
?>
<?php // content="text/plain; charset=utf-8"
require_once ('lib/jpgraph/src/jpgraph.php');
require_once ('lib/jpgraph/src/jpgraph_line.php');

// Some data
$ydata = array(11,3,8,12,5,1,9,13,5,7);

// Create the graph. These two calls are always required
$graph = new Graph(350,250);
$graph->SetScale('textlin');

// Create the linear plot
$lineplot=new LinePlot($ydata);
$lineplot->SetColor('blue');

// Add the plot to the graph
$graph->Add($lineplot);

// Display the graph
$graph->Stroke($tmpfname);
clean_old_tmp_files();
?>
<?php
   ?><img src="<?php echo get_relative_path($tmpfname); ?>"><?php
   #unlink($tmpfname);   // wouldn't work correctly
?>
<?php
   function get_relative_path($filename) {
      return preg_replace("/^.*\/(".PREFIX_DIR."\/.*)/", "$1", $filename);
   }

   function clean_old_tmp_files()
   {
      foreach (glob(PREFIX_DIR.'/'.PREFIX."*") as $filename)
      {
         #printf ( "Name: %s; age: %d<br>\n", $filename, time() - filemtime($filename) );

         $age = time() - filemtime($filename);
         if ($age > TIME_LIMIT) {
            unlink($filename);
         }
      }
   }
?>

As you can see, at the beginning of the page we show some HTML text that is followed by the graph. The data of the graph is produced by our PHP, and JpGraph’s PHP has direct access to it, thus no parameter passing is necessary.

The idea is the following: the graph is written to the file system. Then, this file is shown using the <img src="..."> tag. A time limit is set (here 3 minutes). When the script is called again, it’ll automatically remove images that are older than the limit.

Unfortunately, the image cannot be deleted right after the <img src="..."> tag. When your browser sees this tag, it’ll launch a thread to fetch the image and steps on. That is, the image would be deleted immediately after the creation, and the browser couldn’t show it. So the image file must be left there. My solution is to set a time limit, and when the PHP page is called again, it’ll remove the old images. This way you’ll always have some temporary images in the temp folder, but not many.

Preparation:

I suppose you have your PHP script in your ~/public_html directory. Here create a temporary directory for the images called tmp.jpgraph and set its permission to 777 (chmod 777 tmp.jpgraph).

Unicode tables

List of Unicode tables:

• Unicode Charts
• Unicode Tables
• UTF-8 encoding table and Unicode characters
• Unicode Code Converter

Drawing graphs in PHP with JpGraph

“JpGraph is an Object-Oriented Graph creating library for PHP >= 5.1 The library is completely written in PHP and ready to be used in any PHP scripts (both CGI/APXS/CLI versions of PHP are supported).”

If you want to draw graphs in PHP, JpGraph is a good choice. Very easy to use yet powerful.

Installation

Here I suppose you have a public_html directory in your HOME and your PHP scripts are in public_html.

Download the latest jpgraph archive, put it in ~/public_html/lib and extract it. Now you will have a directory like ~/public_html/lib/jpgraph-3.5.0b1. Put a symbolic link on it with a simpler name:

cd ~/public_html/lib
ln -s jpgraph-3.5.0b1 jpgraph

Verify if the directory jpgraph has the correct permissions. Directories must be 755, while files must be 644. To correct permissions, you can use this script:

#!/bin/bash

# setjog_here.sh
#
# place it in ~/public_html/lib/jpgraph and launch it
# it'll set the permissions recursively

find . -type d -print0 | xargs -0 chmod 755
find . -type f -print0 | xargs -0 chmod 644
chmod 755 .
chmod u+x $0

Test an example

Copy ~/public_html/lib/jpgraph/src/Examples/example0.php to ~/public_html. Modify the include lines:

# original:
#require_once ('jpgraph/jpgraph.php');
#require_once ('jpgraph/jpgraph_line.php');

# new:
require_once ('lib/jpgraph/src/jpgraph.php');
require_once ('lib/jpgraph/src/jpgraph_line.php');

Now call this file from your browser. The URL must be similar to this: http://localhost/~jabba/example0.php.

Troubleshooting

You might get an error saying “The function imageantialias() is not available in your PHP installation. Use the GD version that comes with PHP and not the standalone version.”

Don’t worry. Open the file ~/public_html/lib/jpgraph/src/gd_image.inc.php, find the function SetAntiAliasing and comment this line out like this:

// JpGraphError::RaiseL(25128);//('The function imageantialias() is not available in your PHP installation. Use the GD version that comes with PHP and not the standalone version.')

Update (20110215): Comment out just this line, not the whole function :)

This is a quick fix; we disabled antialiasing.

_{This subsection was updated, the original text was not clear. Thanks to Jon R. for pointing that out.}

Download all issues of Full Circle Magazine

Problem

You want to get all the issues of Full Circle Magazine but you don’t want to download ’em one by one. Is there an easy and painless way to get them in a bundle?

Solution

Here are the necessary URLs till issue 47:

Click to access issue0_en.pdf
Click to access issue1_en.pdf
Click to access issue2_en.pdf
Click to access issue3_en.pdf
Click to access issue4_en.pdf
Click to access issue5_en.pdf
Click to access issue6_en.pdf
Click to access issue7_en.pdf
Click to access issue8_en.pdf
Click to access issue9_en.pdf
Click to access issue10_en.pdf
Click to access issue11_en.pdf
Click to access issue12_en.pdf
Click to access issue13_en.pdf
Click to access issue14_en.pdf
Click to access issue15_en.pdf
Click to access issue16_en.pdf
Click to access issue17_en.pdf
Click to access issue18_en.pdf
Click to access issue19_en.pdf
Click to access issue20_en.pdf
Click to access issue21_en.pdf
Click to access issue22_en.pdf
Click to access issue23_en.pdf
Click to access issue24_en.pdf
Click to access issue25_en.pdf
Click to access issue26_en.pdf
Click to access issue27_en.pdf
Click to access fullcircle-issue28-eng1.pdf
Click to access issue29_en.pdf
Click to access issue30_en.pdf
Click to access issue31_en.pdf
Click to access issue32_en.pdf
Click to access issue33_en.pdf
Click to access issue34_en.pdf
Click to access issue35_en.pdf
Click to access issue36_en.pdf
Click to access issue37_en.pdf
Click to access issue38_en.pdf
Click to access issue39_en.pdf
Click to access issue40_en.pdf
Click to access issue41_en.pdf
Click to access issue42_en.pdf
Click to access issue43_en.pdf
Click to access issue44_en.pdf
Click to access issue45_en.pdf
Click to access issue46_en.pdf
Click to access issue47_en.pdf

Save it to a file called down.txt, then download them all:

wget -i down.txt

Update (20110130) #1:

Unfortunately, issues below 10 are named as issueX_en.pdf and not as issue0X_en.pdf. Thus, if you download all the files and list them with ‘ls -al‘, issues < 10 will be mixed with the others. Here is how to fix it:

rename -n 's/issue(\d)_en(.*)/issue0$1_en$2/' *.pdf

It will just print the renames (without executing them). If the result is OK, remove the ‘-n‘ switch and execute the command again. Now the files will be renamed in order.

Update (20110130) #2:

This post was taken over by Ubuntu Life, and the user Capitán suggested an easier solution in a comment over there:

wget http://dl.fullcirclemagazine.org/issue{0..45}_en.pdf

I didn’t know about this wget feature :) Now I see why issues < 10 are named as issueX_en.pdf and not as issue0X_en.pdf…

Update (20110203): That {0..45} thing is actually expanded by bash, not by wget! See this post for more info.

Update (20110130) #3:

Another reader of Ubuntu Life, marco, suggests a bash script solution:

for i in {0..45}
do 
wget http://dl.fullcirclemagazine.org/issue${i}_en.pdf; 
done

Or, in one line:

for i in {0..45}; do wget http://dl.fullcirclemagazine.org/issue${i}_en.pdf; done

Check your privacy on Facebook

Method 1

If you want to check your privacy settings on Facebook, visit http://www.rabidgremlin.com/fbprivacy/.

“This page shows you what information the Facebook API provides to sites that you log into. It should highlight if you have left any of your personal information open for everyone to see.”

Method 2

Visit http://www.reclaimprivacy.org/.

“This website provides an independent and open tool for scanning your Facebook privacy settings.”

Read more here.

Disable emoticons on your wordpress.com blog

Problem

WordPress.com converts emoticons (like “:o”) to small graphics. After a while they become annoying, at least for me. How to get rid of them?

Solution

Go to the admin panel, visit Settings -> Writing, and untick “Convert emoticons like :-) and :-P to graphics on display”. Then Save Changes.

Credits

I found this tip here.

IPv6 Connectivity Test

Problem

You want to test your connection whether it’s IPv6 (preferred) or IPv4 (old and crusty).

Solution

Visit these test sites:

• http://testmyipv6.com/
• http://test-ipv6.com

They are also good to figure out your IP address.

Read more

See Betelt az internet; Világkáosz és zűrzavar; Június 8. lesz az IPv6 napja (in Hungarian).

Guides

• Welcome to The TCP/IP Guide!

Wiki on a stick

“Wiki on a Stick (WoaS) is an Open Source web application that runs completely in your browser- you don’t even need an internet connection as it is all local. It consists of a large file with xhtml, css and JavaScript all embedded into it. It contains all the functionality to create, edit and maintain a wiki of multiple cross linked pages with all the formatting options available to webpages, including custom css and embedded graphic images.

If you are looking for an easy to use, portable way of documenting your work that can be moved easily between computers this is an excellent tool…” (quote from here)

If you need a very simple wiki to maintain a TODO list that you can easily use on several machines, try WoaS.

Review

For a detailed review, refer to this page.

The A to Z of programming languages

“For the past few years, Computerworld Australia has undertaken a series of investigations into interesting programming languages and the people that use them. We have spoken to numerous interesting characters about why they created the language, the progress it has made in the developer world, and what achievements they are most proud of.”

For the list, check out this link. You will find lots of interesting interviews with the creators of the languages.

Restore previously opened tabs in Firefox

Problem

You make some research on a topic and you have several tabs opened in Firefox. You have to close the browser but upon the next start you would like to get back the tabs to continue the work. How to do that?

Solution

To restore the previously opened tab list, you don’t need any specific add-on. This possibility exists in Firefox. Here is what you need to do: go to Edit -> Preferences, and choose the General tab. Here you have a dropdown list on the top that says “When Firefox starts“. Choose “Show my windows and tabs from last time“, then Close. That’s all.