Learning Highcharts book – online demos

The kindle version for “Learning Highcharts” is out now. Here is also the link for the online demos of all the examples from the book.

Added Donut Chart support for HighChart ExtJs 4 extension

Donut Chart support is added to the latest HighChart ExtJs 4 extension. The code and an example are included in my latest github. You can also try the demo in joekuan.org. The example uses the same dataset as demonstrated in original Highchart example.

Enhance ExtJS Ticker with Store support

I need a ExtJS ticker and I found someone posted the code in the sencha forum which has an online demo. However, I need a number of extra features which are not supported. So again I have modified the code. Couple of the features are inspired by Mioplanet’s news ticker. Here are the main features:

• option for ExtJS Store object
• visually enhance with color labels
• ticker pauses when mouse hovers over
• support categorised message type such as: Warning, Info
• click event handler support for messages

Configure Shellinabox as a url path on FreeBSD

I need to test my web application on a remote network. For policy reason, I am only allowed web access to my FreeBSD box (no ssh) which makes the debugging to the backend processes very difficult. Hence, I need to install a web based ssh client, shellinabox, a daemon program that opens a listening port service html pages with http requests and the backend is a ssh login process.

Posting JSON data from Ext JS to PHP

I have got a Ext-JS web application which needs to send a group of object data to the PHP server side, then processes and stores them. However, it is easier and less effort to pack the Javascript objects in JSON and POST to the server side. Then on PHP side decodes the receiving JSON string and extracts necessary data and stores them. It took me a while to analyse and debug what the problem was and here is how to do it.

Example of using Python to logon & access Ajax (JSON) webpage in the background

We have an application written in PyGtk. Recently, we need to modify the application to access one of our AJAX/JSON webpages in the background. The beauty of AJAX/JSON webpages opens a channel for any applications to easily access the content. Especially for LAMP product, this avoids directly connecting to the database and using specific SQL queries. As long as the webpages are constructed in AJAX/JSON, then the Python cjson or json package can parse the returned JSON result into a dictionary object.

Note on implementing Ajax style hidden IFRAME upload page on FreeBSD 8.0

This problem has taken me a while to track it down. The same code works fine on Ubuntu with IE8, Firefox, Safari but it just doesn’t work on FreeBSD.

Using Ajax.PeriodicalUpdater to update Flotr graph in both Ajax Window (pop-in) and child browser window (pop-out) simultaneously on IE8

This article describes how to use Ajax.PeriodicalUpdater and Flotr to plot a graph inside Ajax Windows and browser windows (IE8). The same continuous graph that can do ‘pop in’ as an Ajax Window and ‘pop out’ as inside a browser window. Throughout the article, I am using Prototype-UI for creating Ajax Windows, ie all the tools used in here are based on Prototype.

Plotting graphs within Ajax windows is easy. However, drawing graphs between Ajax windows and standalone browser windows requires a bit more understanding on both Flotr and IE8. I will show you and explain what went wrong in the first approach that has only worked on Safari and Firefox but failed on IE8 and came up with a second approach which worked in all browsers.

Note on changing Ajax.PeriodicalUpdater parameters

Sometimes you may have a Ajax.PeriodicalUpdater object running in the background and you need to change the parameter of the page.

To do that, simply change the Ajax.PeriodicalUpdater.options.parameters field, not AjaxPeriodicalUpdater.parameters.

var pu = new Ajax.PeriodicalUpdater(element, 'page.php',
                      { method: 'get',
                        parameters: { arg: val, arg1: val1 }
                      });
pu.options.parameters = { arg2: val2, arg3: val3 };

Don’t assign options.parameters directly with query string. Do the following instead:

var qstr = "arg2=val2&arg3=val3";
pu.options.parameters = qstr.toQueryParams();

Ajax/Prototype/Prototype-UI: Creating a modal busy screen

While I was developing a web based application, one of the operations took rather long to accomplish. So I was looking for ways to create a modal busy screen with spinning image at the center. Most of them involves quite a bit of code. Then I decided to see whether I can make use of Prototype-UI to create a modal busy page and it works!! Amazingly, it doesn’t involve a lot of CSS and Javascript code either. Here are the steps: