Google Chart API

One of the most interesting api that google just released called Google Chart API. It is a simple tool that lets you create many types of charts. Send an HTTP request that includes data and formatting parameters and the Chart API returns a PNG image of the chart. Embed in a webpage with an image tag and you're done!

Try it yourself...
http://code.google.com/apis/chart/

Dynamic Height Code

Here is a css code called clearfix:

.clearfix:after {
 content: ".";
 display: block;
 height: 0px;
 clear: both;
 visibility: hidden;
}
.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Use it when items in a container is longer than the outer container or is unpredictable. This css code will make the outer container have a fixed height. Then you could use Element.getDimensions() to get the computed css height of that container.

Load map script dynamically

I posted a topic in google maps api group asking how to load a map script dynamically. Thanks to igloo that response this to my question. The Maps API can be loaded dynamically by creating script tag and append it to the head section of the html page. You can call your own function to run when the loading of the map is finished. Here is a sample code.

    function loadScript(callbackName) {
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.src = "http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAA-O3c-Om9OcvXMOJXreXHAxQGj0PqsCtxKvarsoS-iqLdqZSKfxS27kJqGZajBjvuzOBLizi931BUow&async=2&callback=" + callbackName;
      document.body.appendChild(script);
    }

You can test here: http://gmaps-samples.googlecode.com/svn/trunk/dynamicloading/scriptappend.html

http://groups.google.com/group/Google-Maps-API/browse_thread/thread/a8bc1539889b5fd/62f173b55e9a2e29?lnk=gst&q=dynamic+loading#62f173b55e9a2e29

Double Request in RoR

Notice that when you have <img src="" /> in your view, it will double request to the server. Should be careful about this. Don't ever the src attribute of the img tag to blank.

Tricks to use multiple group by within a single query

Here, I have 3 tables: users, photos, and friends. Each user has many photos and friends. I face one problem when I want to join to these two tables to get the total number of photos and friends of a specific user with a single query. Here is my first query I wrote that returns incorrect information:

SELECT
   u.id, COUNT(p.user_id) as total_photo, COUNT(f.user_id) as total_friend
FROM
 friends as f RIGHT JOIN (
 photos as p RIGHT JOIN users as u ON p.user_id = u.id)
 ON f.user_id = u.id
WHERE
  u.id = 1070
GROUP BY
   p.user_id

The reason would cause from GROUP BY. My friend, sophy, advised me to join users with photos first then make it as derived table. Last join it with friends, it works. Here is my query, but it is seems too complicated:

SELECT
     t_photo.*, COUNT(f.user_id) as total_friend
FROM (
     SELECT u.id as user_id, COUNT(p.user_id) as total_photo
     FROM
         users as u LEFT JOIN photos as p ON u.id = p.user_id
     WHERE
  u.id = 1070
     GROUP BY
         p.user_id
) AS t_photo
LEFT JOIN friends as f ON f.user_id = t_photo.user_id
GROUP BY t_photo.user_id