SuddenDevelopment

Flot + Pie updates: donut, border labels, hover in IE

admin — Fri, 31 Jul 2009 15:38:51 +0000

I have been using javascript libraries for charting lately. I find it works well wil ajax / jQuery pages very well instead of flash because they share variables and functions.The best Open Source one I could find was Flot: http://code.google.com/p/flot/ The most obvious thing missing from it is a Pie chart which was added and updated in the forums of the project. The forums can be confusing, the files have been branched changed etc so many times and the thread style of the subject makes it very difficult. so here are the latest files I could gather that include pie, and my updates.

http://anthong.com/examples/flot.pie.zip

Updates include:

Border Layout for labels: The labels are optionally on the outside of the cart square with lines pointing to the respective slice.

Donut Hole: Optionally set an inner radius for a hollow center.

Hover in IE: IE support for flot requires excanvas: http://excanvas.sourceforge.net/ but excanvas does not support a function that makes the hover easy (isPointInPath) so I added a workaround.

I hope this helps, I may make a full project page out of ALL of the flot updates + examples.

enjoy,

Anthony

Love / Hate of console.log

admin — Wed, 27 May 2009 15:44:49 +0000

console.log is the most necessary debug tool for javascript ever, but it only works in FireFox with FireBug. Otherwise it gives you an error, could sabotage all of your other javascript. You could just comment them all out before releasing code. OR you can add a condition around it so that it only shows if it won’t error.

For security reasons you may want to comment out the console.logs anyways, but it doesnt hurt to apply this method to make sure it never produces an error.

if(typeof console.log == ‘function’){ console.log(‘your log string or object here’); }

Query Result to Hierarchial Array, almost too simple to post.

admin — Mon, 18 May 2009 18:10:04 +0000

I thought I’d be spending a few hours creating a nice reusable way to turn a flat query result into a hierarchial array so I could use it on things like trees or HTML or whatever. When I wrote it out on paper though I felt stupid because the solution was extremely simple.

Assume you have a query result or data like this:
container1 parentA child11
container1 parentA child12
container1 parentB child13
container2 parentC child14
container2 parentC child15
and so on.

every column represents a parent of the column to its right. Duplicates in the columsn let you know which things get grouped together. The solution to turn this into a hierarchy is:

$arrTree[container][parent][child]

you can follow the same pattern indefinately, change the values and the keys as needed. The simplicity in the solution is that by using the columns as the keys it automatically creates them as unique and puts the children under them correctly. I hope this save someone else the paper epiphany

jQuery CheckTree Update: start expanded or collapsed.

admin — Tue, 12 May 2009 19:26:42 +0000

I’m having good success with the jQuery Checktree plugin which can be found here: http://static.geewax.org/checktree/

I added a config option that allows the tree to start collapsed or expanded. It defaults to the current behavior (Collapsed).

In order to start with the checktree expanded define it like this:

jQuery("div#formMedia .checkTree").checkTree({
collapsedarrow: "../collapsed.gif",
expandedarrow: "../expanded.gif",
blankarrow: "../check0.gif" ,
collapseOnInit: false
})

The updated code can be found *here*

Config Defaults with OverRides pattern

admin — Fri, 27 Mar 2009 15:29:55 +0000

This may be obvious to some, but I have approached the same problem in many different ways without thinking too much about it over the years. In an effort to write cleaner easier code to read I settled n a pattern I am happy with, so I’d like to share.

The typical problem: You have code (Language doesn’t matter much) that accepts a number parameters / inputs. You can;t always rely on those inputs being there, so you need to have defaults. There are several things to check for before going to your default settings. Might be check if the input exists, if it matches certain values, and if it’s a certain variable type.

you could end up writing it like this:

if(isset($_POST[‘display’])){
if($_POST[‘display’] == ‘[]‘){
$display = ‘default’;
}else{
$display = json_decode($_POST[‘display’]);
}
}else{
$display = ‘default’;
}
?>

it’s not THAT bad, but it definitely has more conditional branches than necessary, and when you have several variables to do that sort of thing to, it gets ugly fast.

the alternative I like is to set your default, run your check on the input, and only override the default if it passes all the checks. Like so:

$display = ‘default’;
if(isset($_POST[‘display’])){
if($_POST[‘display’] != ‘[]‘){
$display = json_decode($_POST[‘display’]);
}
}

Then when you have several variables / inputs you can define all the defaults first and together in a “Configuration Defaults” section then have all of the input override check after.

Hopefully the process of writing this post will prevent me from ever using the much uglier method. Enjoy.

more jqGrid patterns

admin — Fri, 20 Feb 2009 13:08:01 +0000

I have been using jqGrid a lot, and thought I’d post a few of the solutions / hacks I came up with that were useful:

/* replace grid values */
,loadComplete: function(){
var ids = jQuery("#grid").getDataIDs();
/* for each row loaded */
for(var i=0;ilength;i++){
var cl = ids[i];
/* get the row data, this works best when you have to do this for multiple columns, otherwise you might use getCell */
var objRowData = jQuery("#grid").getRowData(cl);
/* for each column, give it a replacement or function that modifies the value */
jQuery("#grid").setRowData(cl,{
ntlm:renderCheckmark(objRowData.ntlmHidden)
});
}
}

/* Allow resort of rows. */
,loadComplete: function() {
jQuery("#grid").tableDnD({
onDrop:function(objTable,objRow) {
/* get the resulting order */
var rows = jQuery(‘#grid’).getDataIDs();
}
}
}

/* Add something in the middle of the navbar where the inserted position is relative to the "eq(1)" */
jQuery(‘#gridPager td.nav-button:eq(1)’).after(‘html stuff to add in’);

/* Use the nav bar for buttons but hide the pager. CSS */
#grid #first, #grid #prev, #grid input.selbox, #grid #sp_1, #grid #sp_2, #grid #next, #grid #last{display:none;}

Only show the pager when there are enough rows to use it.

,loadComplete: function(){
/* Dynamically show the pager if it’s needed */
if(jQuery("#tableGroup").getGridParam("records") > jQuery("#tableGroup").getGridParam("rowNum")){
jQuery(‘#tableGroupPager’).find(‘#first, #prev, input.selbox, #sp_1, #sp_2, #next, #last’).show();
}else{
jQuery(‘#tableGroupPager’).find(‘#first, #prev, input.selbox, #sp_1, #sp_2, #next, #last’).hide();
}
}

PHP CRUD template for jqGrid

admin — Mon, 24 Nov 2008 19:50:23 +0000

I have been using the JQuery for quite a while. JQuery does not have an official plugin for grids, there are several of them out there. I tried out a few and settled on jqGrid I am very pleased with it in every way. I’ve used it in several projects and it’s always been very flexible and extendable for my needs. I’ve been able to easily add after effects like color sorting, drag and drop reorder etc. with ease. Writing the PHP for the typical CRUD (Create Read Update Delete) functions is very easy but is so boring that I had to do SOMETHING that would both give me a bit of fun and give me smoething to make this part of the process faster for me in the future. So I have a .php template here with it, I can change a few variables around and apply it to any MySQL operation that interacts with jqGrid.

define

$crudColumns = array(
‘id’=>‘id’
,‘title’=>‘title’
,‘icon’=>‘icon’
,‘description’=>‘description’
,‘parent’=>‘parent_list_id’
);
$crudTableName = ‘list’;
$postConfig[‘id’] = ‘id’;

and it’ll create the select, search, paging, insert, update, delete interactions for jqGrid for you.
it also has some convenient spots to edit the sql for additional column / query manipulation. At a minimum it should serve as a good starting point for working with jqGrid beyond the examples they provide (Which are very good and helpful already). If you have any updates or suggestions for this please let me know.
-enjoy

SimplePie RSS Feed library

admin — Wed, 12 Nov 2008 15:48:13 +0000

SimplePie is a PHP development library for reading RSS. It’s amazingly simple, well documented and full featured. I have written 4 RSS readers for portals and virtual desktops using it, and it’s alsways been a pleasure to work with. Here is the link:

http://simplepie.org/

When would you use this? Anytime you want to pull an RSS feed into a page for a decision or display. Almost everything has an RSS feed. You can pull in multiple feeds, have them automatically cached and aggregated, and choose a sort method. It will also automatically find RSS feed URLs if you give it a URL to any site. Combine this with something like Dapper: http://www.dapper.net/ and there’s no limit to what you can integrate into your project!

Here’s some sample code to show how easy SimplePie is:

require_once(‘SimplePie/simplepie.inc’);

$feed = new SimplePie(array(‘http://suddendevelopment.com/?feed=rss2′,‘http://LegalizeThought.com/?feed=rss2′));
$feed->handle_content_type();

$htmlOut = ”;
//====|| Get RSS items for feed||====\\
foreach ($feed->get_items() as $item){
$htmlOut .= ‘

’;
$htmlOut .= ‘

$item->get_permalink().‘">’.$item->get_title().‘

’;
$htmlOut .= ‘’.$item->get_description().‘
’;
$htmlOut .= ‘’.$item->get_date(‘j F Y | g:i a’).‘’;
$htmlOut .= ‘

’;
}
print $htmlOut;

Scrolling a large table with Fixed Horizontal and Vertical Headers

admin — Mon, 22 Sep 2008 14:34:16 +0000

This was a fun little solution I thought was worthy of sharing.

The Problem: You have a very large grid. you need to display it on one page, but when you scroll you loose sight of the headers.

The solutions: Create separate tables for the headers, put them in containers that hide the overflow, and use slidersto control the scrolling.

Demo: http://anthong.com/examples/scrollxy/

References: http://demos.flesler.com/jquery/scrollTo/ http://docs.jquery.com/UI/Slider

Enjoy,

-Anthony

Build, Buy or Retrofit

admin — Sat, 28 Jun 2008 16:20:27 +0000

Build vs. Buy is an old dilemma. I find the answer to be rather simple. If you find a product that:

Meets all of your criteria
Will not require modification to meet the criteria
Is within your budget

Then the choice is clear. Get that product and feel good about it.

The obvious time to build is even more simple. If you can’t find anything that comes close to what you need, put your construction hat on.

The 3rd option is more complicated. You will often not find any exact matches for your requirements, but you’ll find a few that are close. Then it will take some evaluation into how deep the changes will go into the original product. In general I advise AGAINST getting a product that you cannot use right away as intended. For many commercial products, you have much more leverage as a potential customer than a supported one. Present your issues to a sales engineer and make them come up with how their product will support your requirements, in writing.

If you decide to get a product and retrofit it to your needs, you are running some pretty high risks. The risks are:

You will no longer be supported by the owners of that product.
You won’t be able to take advantage of future releases without retrofitting them as well.
Any published user extensions will not be compatible with your version with some added effort.
Over time you version is cannot be recognized or reconciled with the original.

This can be an option if you want to jump start your development and have an appropriately sized full time development staff to maintain it for the rest of the products lifespan.

If you have a development team and a little more lead time to get your product ready, I suggest another approach. Build your product from components that you don’t need to change. Evaluate several lower level applications and development frameworks to assemble exactly what you nee. This will allow you to still take advantage of upgrades and extensions for the various components while still meeting your very specific needs.

This advice comes from analyzing a lot of past experiences, I hope that it can be beneficail to someone else.