Javascript Listening for a specific Key press

 If you want to know what key was press in a web page, you will normally do a document.addEventListener('keydown',myFunc) function. However, if you only want to act upon s specific key then the situation is slightly different becauses addEventListener does not have function to return anything.

Fortunately, there is a "bind" function in the event listener. by defining the event listener as

document.addEventListener('keydown',myFunc.bind(event))

In myFunc then you could use event.keyCode to determine which key was pressed and bypass any other.

There is an issue here. You can't capture key combinations. Keys like Alt-s will be passed as two event instead of one thus the function is triggered twice. But for just a simple key press like pressing the space-bar, the script works quite well.

Javascript Charts

After playing with Filemaker charts and found it limiting in its use, I decided to change to Web based charts. The first concern is what language to use. PHP has been used to do a lot of things for me thus it is the only choice.

The idea is not to create graphics charts from PHP. It will take considerable processing and data transfer size. Therefore, client side charting is the choice. Javascript is the only scripting language on a browser that does not require plugin so it will do.

The last thing to consider is what type of graphics to use to draw the chart. I have used SVG before to create charts. It is nice but I would like to make use of HTML5 canvas element to do it instead. So I finally settled with canvas graphics.

PHP can talk to javascript via AJAX. I too have done it before but the chart I am doing is not real time dynamic data. Thus, PHP is used to create javascript code. There isn't much javascript code to generate to create a chart if you use a javascript chart module that is easily available.

There are plenty of Javascript charts available. Some offer 90 plus type of charts. Since the requirement is probably just Line, Bar, and Pie, The consideration is to get the smallest size module to do the simple work.

Most popular Javascript charts is actually using HTML although the name is Javascript Chart. They even use ".js" as file name. I find it troubling as they actually requires access to the remote site to get the JS source. It also uses "crossorigin" links to JS source. The worst of all is that even the JS file cannot be downloaded locally. Three of the most popular JS chart module I tried cannot even be run on local directory.

I did a considerable search around internet and finally settled with Rgraph. It is a true JS library module and can be downloaded to run locally. The graphic is simple and not as elegant but it works.

The user JS to generate a charts is very simple. You can see it as below

    var pie = new RGraph.Pie({
        id: 'cvs3',
        data: [4,8,6,3,5,2],
        options: {
            shadow: true,
            shadowOffsety: 7,
            shadowBlur: 25,
            strokestyle: 'rgba(0,0,0,0)',
            labels: ['Henning','Louis','John','Pete','Lucy','Fred'],
            clearto: 'white',
            variant: 'donut3d',
            labelsSticks: true,
            labelsSticksLength:25,
            radius: 100
        }
    }).draw();

All you need to do is change the "data" and the "labels" option. Getting PHP to generate the two parameter is very easy.

Construct the data in the appropriate format in php and use the following line to replace the data line in JS.

data:<?php echo $data; ?>,

The other change is the Labels line

labels:<?php echo $label; ?>,

That's all. The chart will come out beautifully.

If you want to get the chart to be much more interactive and vibrant, the Rgraph documentation will show you very much more options to set the graphs. Below is a picture of a donut pie chart from the Rgraph examples above.

Filemaker Chart vs Web Javascript chart

Recently have issues with Filemaker chart thus have to switch to web based charts. There are quite a number of similarities and oddities. The following is the comparison.

Filemaker	Web
Uses tables	Uses variables
Forms data from table with data pre fetched from SQL result	Forms data direct from SQL result
Charts Preformed	Charts can be defined at run time
Number of legends fixed	Number of legends determined from runtime
Max number of legend fixed	No Max number of legend
Max number of data rows not fixed	Max number of rows not fixed
Titles, X,Y labels prefixed	Determined during runtime although can be prefixed
Chart type prefixed	Chart type can be changed runtime
Interactive chart	Interactive chart
Data values can be displayed	Data values can be displayed
Number of chart types limited	Number of chart types depends on the module writer. Some can have 90 plus chart types
No time lapse display of chart data	Have time lapse display of data
Charts module fixed	Can practically create the chart from scratch.
Not resizable during run time	Can auto resize or changed during runtime
Color prefixed	Color changeable during runtime if needed
Options setting prefixed	Options totally changeable runtime.
Events trigger not available	Events trigger available depends on module writer.
Chart data can be added/removed runtime	Chart data can be added/removed runtime
Must use Filemaker to view chart	Charts can be rendered in any web programming language that can work with javascript and have a graphics display capability.
Expensive.	Can be totally free.
Charts formed by fix app setting	Plain javascript text setting.
Easy to do even with novices	A big learning curve especially when you create chart from scratch
Standardized	Way too flexible until it is scary

You can see that Filemaker charts are for easy creation but is fixed in most features. It is not flexible at all compared to Web Javascript charts. Both caters to specific group of people and interest.

Web Site Database browsing in pages

On a web page, the displaying of large quantities of data takes a lot of time for the server to deliver. It is therefore usual for web masters to show the data in pages where at any one time there is a limited number of records shown.

SQL has such a thing called LIMIT or ROWNUM. It basically limits the number of records retrieved from the database. Obviously to get the next page you need to know what is the last record retrieved. This means that you need to define OFFSET after the LIMIT.

This way of paging works quite well. The only problem is that every request means the database has to retrieve the SQL request again then go down to the OFFSET record then show the number of records set by LIMIT. If you have millions of records retrieved in this way then it is obviously process wasting.

There are some who advocate using a sequential incremented unique field as the offset instead. It will be something like this

SELECT * from table where uniquefield > xxx LIMIT 100

It has to remember the last record retrieved and replace the value xxx on the next page. However, this will work only for paging forward. Normally paging will allow forward, backward or start from a specific page. This can only be done with OFFSET.

Saving file from image proxy

Image proxy is a web page used to serve images from web sites that stores its images outside of the root directory of the web page. This is done for security purposes. The web image tag looks something like <img src=imageproxy.php?filename=xx.png>

The resultant web page looks exactly like any web pages except when you try to save it. The file name become imageproxy.php instead of xx.png. Any user will complain that this is no user friendly.

I took hint from some Netizens that by using the ALT attribute and put the actual filename as its value solved the issue. It also helps when the image is not available. User will get to save the file with the proper name. It benefits both the programmer and user.