FIX: Drush can't update Drupal to 7.28

Recently Drupal 7.28 is released. Since I've setup the update notification on some sites, then I've got so many emails from my drupal sites. As usual, I go to the web server, run the command "drush up" to upgrade the core and the modules. Everything looks fine as following:

 Name    Installed Version  Proposed version  Message  

 Drupal  7.27               7.28              Updates available

Update information last refreshed: Thursday, 05/15/2014 - 09:30

Code updates will be made to drupal core.

WARNING:  Updating core will discard any modifications made to Drupal core files, most noteworthy among these are .htaccess and robots.txt.  If you have made any modifications to these files, please back them up before updating so that you can re-create your modifications in the updated version of the file.

Note: Updating core can potentially break your site. It is NOT recommended to update production sites without prior testing.

Do you really want to continue? (y/n): y

Project drupal was updated successfully. Installed version is now 7.28.

Backups were saved into the directory /home/ubuntu/drush-backups/drupal/20140515073230/drupal.                                                                                                                                                                       [ok]

No database updates required                                                                                                                                                                                                                                         [success]

'all' cache was cleared.                                                                                                                                                                                                                                             [success]

Finished performing updates.                                                                                                                                                                                                                                         [ok]

So I supposed the core is updated to 7.28. BUT, the update notification emails come again and again. Then I ran "crush st" to check the status of the drupal installation, it showed:

$ drush st

 Drupal version                  :  7.27

Unbelievable, right? Drush cheats me on that ;)

So it seems a manual update is unavoidable, but I want to give Drush a second chance. So here are the command set to update drupal core to 7.28.

cd /tmp

drush dl

sudo rsync -rltD --delete --exclude 'sites' /tmp//drupal-7.28/ .

cd /path/to/web/root

drush updatedb

drush pm-update

Now I get a right upgraded Drual with 7.28.

$ drush st

 Drupal version                  :  7.28

HOWTO: Make Google Charts SVG responsible and printable with full page width

Google Charts is widely used for a while. It's no doubt that it is easy to use and have great documentation. But, it has also many limitations. One problem I recently discovered is printing. Since the SVG that is generated by Google Charts is NOT responsible. If the user wants to print the page, the result only shows part of the charts since the Google Charts adds a CSS style like "overflow:hidden" to the SVG.

What I want is very simple, the user gets a printed result like WYSIWYG. After different approaches, I came to the idea of Image Replacement. 

The idea: since the generated SVG doesn't response to width changes, we have to use a responsive image instead of the SVG to get the perfect print result.

So here is the implementation. :)

HTML:

<div id='timeline'></div>

<div id='timeline_print'></div>

CSS:

@media print {

    #timeline_print {

        width: 100%;

    }

}

JavaScript(assumed that jQuery is loaded, this.chart refers to the Google Charts object):

var beforePrint = function() {
    $("#timeline_print").html('<img src="' + this.chart.getImageURI() + '">');
    $("#timeline").addClass('hidden');
};
var afterPrint = function() {
    $("#timeline_print").empty();
    $("#timeline").removeClass('hidden');
};
if (window.matchMedia) {
    var mediaQueryList = window.matchMedia('print');
    mediaQueryList.addListener(function(mql) {
        if (mql.matches) {
            beforePrint();
        } else {
            afterPrint();
        }
    });
}

window.onbeforeprint = beforePrint;
window.onafterprint = afterPrint;