Here’s the source code:

google.load("visualization","1", {"packages":["piechart"]});
google.setOnLoadCallback(drawChart);
 
function drawChart() {
	table = new google.visualization.DataTable();
	table.addColumn("string","Languages");
	table.addColumn("number","Hours worked");
	table.addRows(3);
	table.setValue(0,0,"PHP");
	table.setValue(1,0,"Python");
	table.setValue(2,0,"JS");
	table.setValue(0,1,5);
	table.setValue(1,1,1);
	table.setValue(2,1,3);
 
	targetDiv = document.getElementById('chart');
	chart = new google.visualization.PieChart(targetDiv);
	chart.draw(table, {width: 400, height: 240, is3D: true, title: 'Languges Worked With (in hours)'});
 
	new google.visualization.events.addListener(chart, 'select', selectionHandler);
 
	function selectionHandler(e) {
			selectedData = chart.getSelection();
			row = selectedData[0].row;
			item = table.getValue(row,0);
			time = table.getValue(row,1);
			resultDiv = document.getElementById('res');
			resultDiv.innerHTML = "Selected Language: " + item + " / Working Hours: " + time + "<br>";
		}
 
 
	}

It’s very simple and easy. First we include the root javascript from: http://google.com/jsapi and then put the above codes in a script tag inside head.

We use the google loader to load the visualization package and then use it to build a PieChart. When the loading is done, the setOnLoadCallback() method invokes another function to proceed with further execution. We packed our main code inside a drawChart() function and set it as the callback.

To assemble the data, we first need a DataTable. A data table is an object with virtual columns and rows. First, we need to define the columns. We do that by calling the addColumn() method. The first parameter is the data type and the second one is the name. In our example, we added two columns.

Next, we call the addRows() passing an integer as the only parameter. This method creates “filler” or empty sets for putting data into.

Then, we use the setValue() call to insert/update data. The first parameter is the row number counted from 0. The second one is the index of column. Remember the sequence of the column definitions? Yes, follow that sequence. The first column is the index 0. The 3rd parameter is the actual value for that row and column.

table.setValue(2,1,"meaow")

The above call will insert the string “meaow” into the second column of the 3rd row. It’s easy!
PS: Please be aware of the data type of the column while inserting/updating data.

Now that we have a DataTable at our disposal, all we need to do is feed this data to a PieChart and draw it up. First, we created a new div with the id “chart”. This div will be holding the chart. Then we call the PieChart constructor with this div element. Then we call the draw() method of the chart object to paint it on the screen. The first parameter is the datatable and the second one is an object (dictionary/associative array like) defining the look and feel of the charts.

That draws the chart alright. But I need to let the users interact with the chart. So, I added a Listener to listen to any “select” events and call the handler function back. We get a event object but for select events, they don’t have any properties. That is they don’t tell you what the user clicked. You have to get the data by calling the getSelection() method of the chart. The returned object will have “row” and “column” values. For PieChart, alone the row value does the job. We get the row index. Then call the getValue() method of the data table to get the value of a certain column in a row. In this case, I just iterated over both columns. Built a text string out of the data and dynamically updated a div with that!

It’s pretty simple. It’s powerful and user friendly as well.

PS: I really liked the Google Ajax Playground. I am gonna play a lot in there from now on
I just realized I’m becoming a good coder as well. I wrote the above codes without any pretty printer or code formatter. It looks well indented to me

I am amazed to see the implementation of cron jobs on Google App Engine. I was hosting my twitter bots on my paid shared hosting. My scripts were written in php and they were run via cron jobs set from my cPanel. Of course the cPanel cron UI is now quite familiar to me, to us who use it very often. But as a matter of fact, I can’t run per minute cron on my host. I should have a minimum interval of 15 minutes between two execution of the same cron job. I was amazed when I first discovered that Google App Engine lets me run cron every minute. Since they calculate my usage in different types of quotas, they hardly care about how often you schedule your cron. So, I decided to port my twitter bots to GAE and Python.

The idea was pretty simple. I already had a Yahoo! Pipe setup which mashes up multiple RSS feeds into one. My app will be collecting data from the pipe in JSON format. Then it’ll check the last tweeted entry and tweet the newer entries. Pretty straightforward algorithm. I registered a new application for my bots and started developing it on my local machine.

I integrated the u.nu url shortening service with their API quite easily. Though Python 2.6.2 has a built in module for JSON handling, Python 2.5 doesn’t have it. So, I had to install simplejson for JSON decoding. Later, I moved on to finding a good twitter client for my app. I first tried python-twitter. I have previously used it and it worked fine. But the application was generating some error messages when I integrated into GAE. I was puzzled and tried to find if there was something wrong in my coding. After about an hour, I concluded that my code was okay! There’s something wrong with the client. A bit of googling revealed that “python-twitter” doesn’t work on GAE without any hacks :’(. I had to find an alternative and I chose tweepy for that. It was working fine with the app.

Finally after 3 hours, the app was ready and it’s working! GAE doesn’t permit long execution period for a process, so I had to decrease the amount of tweets per request. But I covered that up by setting a more frequent cron job . I would try the new taskqueue API soon to see if that has any help for my app.

My twitter bots have proved handy in the past and it feels great that I can host them on a scalable and efficient platform like Google App Engine — without paying a single dollar per month!

Download Source : http://masnun.googlecode.com/files/Twitter_BOT_GAE.zip

Oh yeah, I forgot to mention I am on Ubuntu 9.04 I downloaded the package from this link: http://drop.io/gccgodeb/asset/gccgo-4-5-0-1-i386-deb

It’s nearly a 27 MB of download. I downloaded and double clicked to install it. The installation failed with some errors. So, I pointed back to the Original Source Page (Author’s Blog Post) of the package and re-read carefully. I had to use the command line to set “–force-overwrite” mode to the dpkg utility so that it could overwrite files at it’s discretion. Here’s the command:

sudo dpkg --force-overwrite -i gccgo_4.5.0-1_i386.deb

Now, for quick demo, I downloaded the sample “Hello World!” source code from the official Go website at http://golang.org/ (Hey, wasn’t it http://go-lang.org the last time I visited it? No way, both URL works now )

package main
 
import "fmt"
 
func main() {
  fmt.Printf("Hello, ??\n")
}

PS: I am sorry that my Syntax Highlighter doesn’t yet have the Go syntax highlighting patterns. Neither does my code editor! But still I used the code block, just out of a good practice!

Then I compiled the source (after naming it masnun.go) with the following command:

gccgo masnun.go

It created the file a.out . I ran it from the command line again:

masnun@ubuntu:~/Desktop$ ./a.out
Hello, ??
masnun@ubuntu:~/Desktop$

It was pretty easy in fact! I am going to play with Go at my leisure to check out what it has to provide the developers with… I love Python, let’s see if Go can give me anything more than Python

Thanks to Google, we have another programming language to do our bidding! Happy programming!

I already had the http://masnun.googlecode.com ready for this. So, I started trying out SVN on this account feeling relaxed that no matter what changes I make, no serious harm will be done.

SVN is pretty easy in fact. I read the “SVN Book” and “The Visual Guide to SVN”. None of them helped me grab SVN like the shell command — “svn help”. It was self explanatory and had a list of all available commands.

To start, I had to create a local repository or better said a local mirror of the project. I did the following:

svn checkout https://masnun.googlecode.com/svn/trunk/ masnun --username masnun

It created a directory named “masnun” inside my linux home directory after I authenticated with my googlecode password.

Now I was ready to add files. So I copied a file named “quotes” into the /home/masnun/masnun (the local mirror) directory and typed in:

svn add quotes

I got a text editing environment to write the changelog. After typing in a message, I pressed Ctrl+O to write out and then Ctrl + X to quit the editor.

Now the changes were reflected in the local copies, I had to sync the server. So I used:

svn commit

And it transmitted all the data to the server

Now, I made some changes and updated the file using the following command:

svn update quotes

Again, wrote the changelog and then :

svn commit

I liked the simplicity and hated that I spent up much time reading theories telling me why SVN replaced CVS

Well, now I decided to delete the file:

svn del quotes
svn commit

That was it… Easy !

1.12.12 25.15.21.18 15 1.18.5 2.5.12.15.14.7 20.15 21.19 was the tweet.

Well, it’s nothing tough. Every number separated by a dot or space corresponds to the alphabet. So, I wrote a PHP script to decode this mysterious tweet and finally found the meaning:

 
masnun@ubuntu:~/Desktop$ php decode-google-tweet
all your o are belong to us
masnun@ubuntu:~/Desktop$

So, it meant ” all your o are belong to us ”
Sounds a bit odd ? Or wrong in grammar ? yeah, still, that’s the message. It is confirmed on the twitpic image.

And here’s the source code –

 
<?php
 
$num = array(); // placeholder for 1 to 26
$alpha = array(); // placeholder for a to z
 
for($i=1;$i<27;$i++) { $num[]= $i; } // dynamically store 1 to 26 in the array
for($i='a';$i<'z';$i++) { $alpha[]= $i; } // dynamically store a to y in the array
$alpha[] = 'z'; // manually add z to the array
$dict = array_combine($num,$alpha); // combine them to form a dictionary
 
// print_r($dict);
 
$string = "1.12.12 25.15.21.18 15 1.18.5 2.5.12.15.14.7 20.15 21.19"; // the code to decode
$arr = explode(" ",$string); // differentiate the parts
 
$meaning = ""; // placeholder for the ultimate meaning
 
for($i=0; $i<count($arr); $i++) {
 
$s = $arr[$i]; // dot seperated portions
$a = explode(".",$s); // seperate the numbers
for($j=0; $j<count($a); $j++) {
$ch = $a[$j]; // get individual numbers
$meaning .= $dict[$ch]; // look up in the dictionary for the corresponding char
 }
$meaning .=" "; // restore the spaces
 
 
}
 
echo $meaning."\n"; // echo the meaning
 
?>

It was quite a bit of fun decoding the message with PHP. Well, I do agree that there was no need to use PHP here. But why do the hard work from memory when you have automation tools at your hand ?

web.py includes a built in web server to develop an application locally. But I am a Google fan and was thinking of deploying web.py on Google App Engine. I believed GAE and web.py together can help me put up a web app in minutes. And so did they…

The first question came to my mind was “How am I going to install web.py on my GAE account ?”. Well, it was pretty easy in the end. Just extract the web.py package and put the “web” directory inside your application directory. That is the “web” directory would be in the same directory where the app.yaml file resides. Now, in app.yaml file, map all URLs to a single python file. In my case, it was “main.py”.

Now develop the application in the normal web.py way. “It’s easy as pie!” — I thought. But it was not that easy in fact. I had to make a couple of changes.

The app I wrote didn’t do what I expected it to. Rather it raised an “import error” Later, I found out that I have to use “web.application.cgirun()” method instead of the normal “run()” method.

Then I reloaded the app. But this time I got an “internal server error”. After visiting the web.py cookbook, I found out that, to use web.py templates on GAE, I have to compile all templates using the “web/template.py –compile templates” command. I did so. All my templates were compiled into python source code. Cool !

Now my app was running smooth and working fine ! So, at last I made it… Yahoo ! I am loving python, web.py and Google App Engine together

PS: I am using web.py 0.3 where I have the cgirun() method. In older versions of web.py, you have to be tricky. In that case, please consult this thread:

http://bit.ly/EoVyM

Here’s the source code (Without the template):

#!/usr/bin/env python
 
import web
urls = ("/(.*)","site")
 
class site:
	def GET(self,path):
		render = web.template.render('templates')
		return render.masnun(path)
 
app = web.application(urls,globals())
 
def main():
	app.cgirun()
 
if __name__ == '__main__':
  main()

Here’s the “templates/masnun.htm”:

$def with (name)
<html><head><title>web.py demo</title></head><body>
You requested: <b> $name</b></body></html>

It’s just a hypothesis that Google is extremely serious about markup validation. I am not sure about it. Lets see if my site stays on number 2 position from now on.

I was using no black hat SEO, still I think a certain change in the design caused the havoc. I have taken some corrective measures to see what happens next.

I previously used to use Google Custom Search engine in the past on my old Freewebs site. But today while exploring my adsense account, I decided to add a “Adsense for search” block to masnun.com. I created the search engine and put the code on masnun.com straightway while using the option to open search result in a new page. But soon I gathered some interest to add the search page right on masnun.com.

To display the search results on my site, I had to put two blocks of code. One for the search box, another for the result page. I am using wordpress. So, to copy my template I had to edit one of my themes page. I chose the search result page of my current theme. I removed the code for WordPress’ built in search functionality and put my Google CSE Search Result Page code.

But to display the search result template, I have to visit: http://masnun.com/?s=something

So, I added a hidden field with the name “s” and value “search” to the search box form. I set the form’s target to: http://masnun.com/. I then put the code for the search box on my right sidebar replacing my old search box. Now It was working.

But I was having problem with the right sidebar being over ridden by the search results. So I removed the following code:

<?php get_sidebar(); ?> . Removing it removed the sidebars. Only the header and the footer was visible to form the site template.

Now the only problem with the layout was that I had no margin on the left side. The results were looking odd. Not being an CSS wizard, I had to manage some margin with table. Here’s the code:

<table>
<tr><td>&nbsp;&npsp;</td>
<td>

The results page code here.

</td>
</tr>
</table>

Now that was fine.

The search engine is running. I expect ads to pop up in the results page soon. I wish Google would index my new entries time to time. That would make the search mechanism a great one for masnun.com.

UPDATE: I am really amazed to see that this post got indexed by Google within twenty minutes!! That’s why Google rocks! Love you Google?!

It’s a Google Code project with links to some cool sample app source codes.

I haven’t yet checked them out. But I liked the online demo of the “Shell” app. It’s really nice: http://shell.appspot.com/

Take your time to have some real fun J with these projects.