I have been working on a business intelligence application recently and did a lot of research for a Flash based library to build out dynamic charts. There are a number of players in the market, some free and some even open source. I ended up choosing a product called amCharts which seemed very flexible and the pricing was generally lower than the competition. You can download and use the charts for free with the “chart by amCharts” text in the top left corner, this comes in handy when evaluating. Being savvy with JavaScript, I liked the fact that there was a powerfully API behind the charts for data and settings manipulation. As such, there is no need for postbacks or tedious AJAX calls.

Another selling point was the ASP.NET control library they offer which made development much quicker. I also chose the developer license to get the full Flash source code for some custom modifications. One last cool feature is the chart builder at http://extra.amcharts.com/editor/ which makes visualizing the charts and generating the settings file a breeze. Charts like this can really add some “wow” factor to an application. They have an active community forum, plenty of documentation, and a helpful staff so check them out.

Click here for a quick demonstration of a dynamic pie chart inside a draggable box which should be ready for release soon. If you are interested in the demo source you can download it here. Check out their website for more demos and details.

TinyBox is a lightweight and standalone modal window script. At only 3.5KB it doesn’t include any slideshow capabilities built-in but allows for any AJAX or HTML input so the sky is the limit. Future versions will include additional features. It can also be used for images and auto hiding alerts. The popups fade in/out and dynamically size based on the content if enabled. The styling is completely customizable through the simple CSS. I have a couple tutorials and a few scripts I will be posting very soon so check back.

To display a popup box use the following code:

TINY.box.show('advanced.html',1,300,150,1,3)

There is nothing to initialize, just start using the script. The TINY.box.show function takes 6 parameters: the HTML content for the box or the relative path to the AJAX source, a toggle (true/false or 1/0) if the content is via AJAX, the width of the window (use 0 for auto), the height of the window (use 0 for auto), a toggle (true/false or 1/0) to animate the window, and the time in seconds to wait before auto hiding the popup (optional).

TinyBox has been tested in Firefox 2/3, IE 6/7/8, Opera, Safari and Chrome. Please send bug reports to michael@leigeber.com with the subject “BUG REPORT”. This script is available free of charge for any project, personal or commercial, under the creative commons license and is offered AS-IS, NO FREE SUPPORT provided. Hopefully I will have the support forum live shortly. Click here to inquire about paid support.

Click here for the demo.

Click here to download the source code.

This updated table sorter script is easy to use and feature packed at only 2.5KB. New features include column highlighting, optional pagination, support for links, and date/link parsing. A few other features are alternate row highlighting, header class toggling, auto data type recognition and selective column sorting. More updates will follow soon.

To initialize a table sorter follow the pattern below:

var sorter = new TINY.table.sorter("sorter");
sorter.head = "head"; //header class name
sorter.asc = "asc"; //ascending header class name
sorter.desc = "desc"; //descending header class name
sorter.even = "evenrow"; //even row class name
sorter.odd = "oddrow"; //odd row class name
sorter.evensel = "evenselected"; //selected column even class
sorter.oddsel = "oddselected"; //selected column odd class
sorter.paginate = true (false); //toggle for pagination logic
sorter.pagesize = 15 (20); //toggle for pagination logic
sorter.currentid = "currentpage"; //current page id
sorter.limitid = "pagelimit"; //page limit id
sorter.init("table",1);

Before initialization, a new table sorter object must be created. The parameter taken by TINY.table.sorter is the variable name used for the object. The object.init function takes 2 parameters: the id of the table and the initially sorted column index (optional). If you want to exclude a column from sorting add class=”nosort” to the appropriate table header. Table styling is completely customizable via the CSS.

TinyTable has been tested in Firefox 2/3, IE 6/7/8, Opera, Safari and Chrome. Please send bug reports to michael@leigeber.com with the subject “BUG REPORT”. This script is available free of charge any project, personal or commercial, under the creative commons license and is offered AS-IS, no free support provided. Click here to inquire about paid support.

Click here for the demo.

Click here to download the source code.

This updated accordion script is powerful and lightweight at only 1.2kb. It now includes multi-level support, the option to allow multiple panels to expand concurrently, and a hide/show all toggle. I have reverted the markup to a div based structure to eliminate any validation issues with the definition tables in the previous version. Check back for more posts and scripts soon.

To initialize an accordion use the following code:

var accordion=new TINY.accordion.slider("accordion");
accordion.init("accordion","h3",0,0,"selected");

You must create a new accordion object before initialization. The parameter taken by accordion.slider is the variable name used for the object. The object.init function takes 5 parameters: the id of the accordion “ul”, the header element tag, whether the panels should be expandable independently (optional), the index of the initially expanded section (optional) and the class for the active header (optional).

There is no other JavaScript that needs to be added to the HTML. The init function parses the unordered list and adds the appropriate mouse events to the headings as provided. This has been tested in Firefox 2/3, IE 6/7/8, Opera, Safari and Chrome. Please send any bug reports to michael@leigeber.com with the title “BUG REPORT”. This script is available for any personal or commercial projects. SORRY, NO FREE SUPPORT PROVIDED.

I apologize If I have not responded to emails you may have sent. I get many emails each day and simply do not have time to answer all of them nor can I neglect my paying clients. Please contact me if you are interested in paid support otherwise a support forum will be available very soon for community support.

Update 6/16/2009

The script has been updated with a couple bug fixes, performance tweaks, and feature requests. I also shaved off 0.2KB.

You can now expand a particular section by its index, for example parentAccordion.pr(0,1), with the second parameter being the index of the section. If you don’t want any section to be expanded by default then use -1 for the initially expanded index in the initialization function, example accordion.init(”accordion”,”h3″,0,-1,”selected”). The script is also no longer tied to a strict doctype. If you are using this along with Flash, be sure to set the wmode property on the SWF object.

Click here for the demo.

Click here to download the source code.

This dynamic JavaScript slideshow is feature packed and under 5KB. It is the long awaited update to my previous script here. A few new features include description support, link support, no naming restrictions, portrait image support, graceful degradation and active thumbnail status. This script was built ground-up and will soon be included at scriptiny where all my scripts will be added as they are updated, debugged and incorporated in the new TINY namespace. I will also document the scripts more thoroughly and publish multiple examples. I will continue to publish scripts there and support as I have time via the new community forum. I will try and post more frequently here on a wide range of web development related topics.

Here is an example of the markup to build a slideshow…

<ul id="slideshow">
<li>
<h3>Image One</h3>
<span>photos/image-one.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<a href="#"><img src="thumbnails/image-one.jpg" alt="Image One" /></a>
</li>
<li>
<h3>Image Two</h3>
<span>photos/image-two.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<img src="thumbnails/image-two.jpg" alt="Image Two" />
</li>
</ul>

Each “li” above represents an image. The “h3″ content becomes the title for the image and the “p” the description. The “span” content is the path to the fullsize image. If you want to link the image wrap an “a” tag around the “img” tag which is the thumbnail image.

The following are the parameters that can be set on the object… more complete documentation will follow soon. Default values are displayed as (10) and recommended values as [1-20].

Images

imgSpeed = int; (10)
navOpacity = int; (25)
navHover = int; (70)
letterbox = “string”; (#000) required color for letterbox on portrait images
link = “string”; class name for link hover state

Auto Slideshow

auto = boolean; (false)
speed = int; (10)

Information Dialog

info = boolean; (true)
infoID = “string”; required for information dialog
infoSpeed = int; (10)

Thumbnail Slider

thumbs = “string”; id of thumbnail slider, disabled if not set
scrollSpeed = int; [1-20] (5)
thumbOpacity = int; [0-100] (70)
active = “string”; required for thumbnail active border
spacing = int; (5) spacing between thumbnails
left = “string”; id of left navigation link, required for slider
right = “string”; id of right navigation link, required for slider

Here is an example calling the script…

<script type="text/javascript" src="compressed.js"></script>
<script type="text/javascript">
$('slideshow').style.display='none';
$('wrapper').style.display='block';
var slideshow=new TINY.slideshow("slideshow");
window.onload=function(){
slideshow.auto=true;
slideshow.speed=5;
slideshow.link="linkhover";
slideshow.info="information";
slideshow.thumbs="slider";
slideshow.left="slideleft";
slideshow.right="slideright";
slideshow.scrollSpeed=4;
slideshow.spacing=5;
slideshow.active="#fff";
slideshow.init("slideshow","image","imgprev","imgnext","imglink");
}
</script>

The init function takes 5 parameters (id of the slideshow content placeholder, the id of the image placeholder, the id of the previous image placeholder, the id of the next image placeholder, the id of the image link placeholder).

This script has been tested in Firefox, Internet Explorer, Opera, Safari and Chrome. Please send any bug reports to michael@leigeber.com with the title “BUG REPORT”. This script is available for any personal or commercial projects under the creative commons license and is offered AS-IS, NO FREE SUPPORT PROVIDED.

Click here for the demo.

Click here to download the source.