Webmasters Gallery

We had shared a lot of useful resources about CSS/jQuery recently. Today, I am going to share useful resources and plugins to create a stylish chart. Graph and Chart are very effective ways of showing data.

There are a lot of different methods to generate graphs/charts. For example, you can use Flash, Javascript, CSS, or server side script such as PHP or ASP to generate them. Today, we are going to look into Javascript solutions to generate charts.

1. Creating accessible charts using canvas and jQuery

 
This article show you how to use fgCharting, a jQuery plugin to convert HTML table into a stylish chart/graph. This plugin support several different types, such as line, filledLine, additiveLine, additiveFilledLine, pie, bar, additiveBar.

2. Emprise JavaScript Charts

This JavaScript Charts supports a lot of features and has a very good documentations. However, it is only free for personal use.

3. Flot

Flot is a pure Javascript plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly client-side. The focus is on simple usage (all settings are optional), attractive looks and interactive features like zooming and mouse tracking.

4. Canvas Pie Chart with Tooltips

This Mootools pie chart class is based on Stoyan Stefanov’s Canvas Pie.The code now requires less html markup than the original.

5. jQuery Google Charts

6. jQuery Sparklines

This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript.

7. moochart

moochart is a plugin for MooTools 1.2 that draws bubble diagrams on the canvas tag. Future versions might include pie, bar & line graphs.

8. JS Charts

JS Charts is a free JavaScript based chart generator that requires little or no coding. With JS Charts drawing charts is a simple and easy task, since you only have to use client-side scripting

9. ProtoChart

ProtoChart is a new opensource library using Prototype and Canvas to create good looking charts. This library is highly motivated by Flot, Flotr and PlotKit libraries.

10. Raphaël—JavaScript Library

Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.

11. PlotKit

PlotKit is a Chart and Graph Plotting Library for Javascript. It has support for HTML Canvas and also SVG via Adobe SVG Viewer and native browser support.

12. Flotr Javascript Plotting Library

Flotr is a javascript plotting library based on the Prototype Javascript Framework and inspired by Flot.Flotr enables you to draw appealing graphs in most modern browsers with an easy to learn syntax.

13. Yahoo! UI Library: Charts

The YUI Charts Control visualizes tabular data on a web page in several possible formats including vertical columns, horizontal bars, lines, and pies

14. TufteGraph

TufteGraph is a beautiful jquery Chart plugin.

A Free JavaScript Time Picker Script, Time Picker is using MooTools as Framework. The first ever Time Picker that utilize a very easy drag and drop interface. With it’s unique design, anyone can drag the minutes or hour hands independently to select a time.

A very handy and useful application while building web applications. The beauty of this time picker is that it works in parallel with the date picker.

Time Picker Features

• Easy to use, customize and implement
• Independent hours and minutes hands
• Drag the clock hands to set the time
• Uses CSS spirits for faster loading time
• 12 or 24 hour output with and AM and PM (translatable) ticker

Slideshow JS is a free JavaScript library which helps creating an image slideshow with ease.

It is totally configurable via markup & does not require any scripting. Although the download package comes with various styles, the look & feel of the slideshow can be completely customized.

The library is built with jQuery & it is unobtrusive. It offers several options like:

• number of seconds each image will be displayed
• if the images will be displayed automatically or manually
• image counter & controls activation
• if the images will be displayed randomly or in an order
• & more..

JavaScript is a simple, client-side scripting language which enables you to add exciting and interesting functionality to your HTML pages. It is built in to most web browsers and, although it can be deactivated, most people will have it enabled within their browser. JavaScript’s uses includes the validation of entries within an HTML form and the detection of browser versions and presence or absence of plug-ins. Dreamweaver’s implementation of JavaScript centres on the use of what it calls “behaviors”.

A behavior is simply a pre-written JavaScript function which can be triggered by a given event. To make the Behaviors window visible, choose Behaviors from the Window menu. Next select the element to which you want to attach the JavaScript. Finally, choose one of the available behaviors from the menu in Behaviors window. (The behaviors which are available will depend on the item you have highlighted.)

Dreamweaver attempts to guess the event that you would like to trigger the behavior such as an onMouseOver, onClick or OnDoubleClick. If it guesses the wrong event, simply choose the correct event from the drop-down menu next to the name of the event.

Dreamweaver has a wide selection of behaviors. However, they fall into four main categories: images, windows and alerts, forms and form fields and CSS. To see how behaviors work, let us look at some examples of some behaviors in each of those categories.

The classic example of an image manipulation behavior would be the “swapImage” behavior. This venerable JavaScript function causes the source of a given image to change when the mouse passes over the image and back to the original when the mouse leaves the image. This behavior can either be explicitly applied to an image or can be generated automatically by inserting a rollover image.

In the alerts and windows category, we have Dreamweaver’s “Open Browser Window” behavior. This creates the ever-popular pop-up window. When you assign the behavior, Dreamweaver asks you to choose the HTML page you would like displayed in the window as well as the attributes you would like to add or suppress, such as scroll bars or the ability to resize the window.

The key behavior relating to forms is called “Validate Form”. It performs simple checks on any text field within a given form. (It ignores any fields other than text fields.) To use it, select a field (the validation will then occur when the user leaves the field) or select the entire form (the validation will then occur when the form is submitted). Choose “Validate Form” form the Behaviors panel menu and specify the type of validation you wish to perform, for example, ensuring that a field has not been left blank.

An example of a behavior which manipulates CSS attributes is “Show/Hide Elements”. This enables you to control the visibility of the content inside an HTML element, such as a DIV, heading or paragraph, based on user action. So, for example, when if you have a picture of a product, you can create DIVs with information on various aspects of the product and have the appropriate DIV content become visible as the user mouses over various parts of the product image.

Naturally, there is some overhead involved in using Dreamweaver’s behavior in terms of the code generated within your web page. To make your pages accessible and search engine friendly, it is recommended that you transfer JavaScript code into an external .js file and then link each of your web pages to the external JavaScript file. In Dreamweaver’s code view, highlight all of the JavaScript code between the opening and closing SCRIPT tags, then choose Cut from the Edit menu. Create an empty text file, paste in all the code and save the file with a .js file extension. Finally, in the opening SCRIPT tag on your web page type src=”myscript.js”, replacing “myscript” with the name of your file.

There are many times when I am writing an application I need to display data in a table. Most of the time a simple HTML table styled with CSS is all that I need but occasionally I want a bit more. Today we’ll look at designing a plugin for jQuery that will add some advanced features such as row selection and sorting.

Design Goals

Starting out we are going to keep this pretty simple and as it progresses we’ll add more features.

For now we are going to start with a hand coded HTML table and CSS. In a later post we’ll look at populating the grid from a data source.

In this post today we’ll apply the CSS to the table but will expand this to a skinning system later on.

We’ll also be applying the row selection feature today.

Starting Point

Let’s use a simple table as out starting point.

<table cellpadding="0" cellspacing="0" class="easygrid">
    <tr>
        <th>Name</th>
        <th>Title</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Bill</td>
        <td>CEO</td>
        <td>53</td>
    </tr>
    <tr>
        <td>Jason</td>
        <td>Developer</td>
        <td>29</td>
    </tr>
    <tr>
        <td>Sue</td>
        <td>Accountant</td>
        <td>37</td>
    </tr>
    <tr>
        <td>Frank</td>
        <td>HR Manager</td>
        <td>42</td>
    </tr>
    <tr>
        <td>Jill</td>
        <td>Graphic Artist</td>
        <td>31</td>
    </tr>
</table>

Basic Style

Next we will apply some basic CSS to make our grid look nice.

body, table {
     font-family: verdana, arial, sans-serif;
}

table.easygrid {
     font-size: 11px;
     width: 600px;
     border-top: 1px solid #b8b8b8;
     border-left: 1px solid #b8b8b8;
}

table.easygrid th {
     text-align: left;
     padding: 5px;
     background: #424242;
     color: white;
     border-bottom: 1px solid #b8b8b8;
     border-right: 1px solid #b8b8b8;
}

table.easygrid td {
     padding: 5px;
     border-bottom: 1px solid #b8b8b8;
     border-right: 1px solid #b8b8b8;
}

table.easygrid td.alt {
     background: #f6f3f6;
}

table.easygrid td.selected {
     background: navy;
     color: white;
     font-weight: bold;
}

Building The Plugin

Here is the basic layout of our plugin. We’ll look at implementing those functions in a minute.

This is pretty simple so far. We have our default values, we merge the user passed options with the defaults, and then call two methods on each jQuery instance.

(function($) {
     $.fn.easygrid = function(options) {
         var defaults = {
             alternateBackground: true,
             allowRowSelect: true
         };

         options = $.extend(defaults, options);

         return this.each(function(index, table) {
             setAlternateBackground($('tr:odd td', table), options.alternateBackground);
             rowSelection(table, options.allowRowSelect, options.alternateBackground);
         });
     };
})(jQuery)

Here is our setAlternateBackground method. Note we are passing all the odd rows found in the current table.

function setAlternateBackground(rows, alt) {
     if(alt == true) {
         rows.attr('class', this.className + ' alt');
     }
}

This function appends the alt CSS class to each row if alternate row backgrounds is enabled.

The next function adds a click handler to each row to implement the row selection functionality.

function rowSelection(table, allowSelect, alt) {
     if(allowSelect == true) {
         $('tr', table).click(function() {
            //reset all rows
            $('tr', table).each(function() {
                $('td', this).each(function(index, cell) {
                    $(cell).attr('class', cell.className.replace(' selected'));
                });
            });

            //restore alt backgrounds
            setAlternateBackground($('tr:odd td', table), alt);

            //select this row
            $('td', this).attr('class', this.className + ' selected');
        });
    }
}

There is a little more involved with this function. If this feature is enabled we are adding a click handler to all the rows in the table.

First the click handler will clear any selected rows and reapply the alternate background colors. I am not sure why this gets lost.

Then, finally, the row that was clicked is selected by applying the selected CSS class to each cell of the row.

In my day-to-day SEO work, there are many sites I use that have a bunch of checkboxes on a single page. For example, in SEO, this is usually to check the box beside websites I want to trade links with. Well this gets tidious, so I went on the hunt for some kind of Javascript, Firefox-addon or mini-program that would do this with 1 click of the mouse. Here’s what I figured out…

At the top of my Firefox, I have a Links bar. I simply created a new link, and added the following code as the URL:

javascript:(function(){ function toggle(box){ temp=box.onchange; box.onchange=null; box.checked=!box.checked; box.onchange=temp; } var x,k,f,j; x=document.forms; for (k=0; k</X.LENGTH;>

I honestly don’t recall where I found this – I’ve been using it for several weeks. But thanks to whoever I found it from. (If I find the site, or you email me, I’ll put the link here.)

Basically what that does is go through each form on a page and toggle the checkboxes on and off. It’s great as a quick-link in my Links bar – I can load the page, click that link (checking all of the check boxes on a page) and click submit. Done!

In the “it-had-to-be-done-at-some-point” category, we give you James Hall’s latest project:

I have started working on jsPDF, an entirely Javascript-based PDF generator. Currently the demo serves up the generated PDF as a Data URI, but it could be used on the server side or within browser extensions. It currently only supports simple text, but I’m working on images and font embedding at the moment.

If you’re using Safari, Opera, or Firefox 3.5 Beta, the demo is pretty cool; the client-side JavaScript code generates a data URL which the browser displays.

Neat.

Brad Neuberg pointed me to a Blackberry Storm site that uses Raphael, jQuery, and SoundManager to offer an SVG / VML (for IE) experience.

This is how you will probably create a new tab using the Chrome extensions API when it comes out.

Aaron Boodman talked about the choice and how they are looking to make the APIs look more like this:

I’m using the CRUD pattern as a starting point for all the major sub-systems’ APIs. My hope is that this will have a number of positive effects:

• Minimize API design hand-wringing
• Provide a large base of functionality quickly
• Make it easy for Chromium developers to add new APIs
• Make it easy for extension developers to learn new APIs

I got this all working for a few methods, and then I got to writing the validation code. I could write the code by hand, but that’s so much work. And why bother when somebody has gone and invented JSON Schema.

That’s right, it’s a schema language for JSON. And of course it has a schema, written in JSON schema. Whee!

So we should be able to just declare the expected structure for our API parameters and push the validate() button. Probably there will have to be extra stuff around the edges, but this should get rid of a majority of the grunt work.

I have found that I favor this approach a lot, and you see the same in libraries such as Prototype (Ruby does a lot of this hash munging too). I wish we could just get named parameters in the language so this all just integrated very nicely indeed. What do you think?

Protovis is a visualization toolkit for JavaScript using the canvas element. It takes a graphical approach to data visualization, composing custom views of data with simple graphical primitives like bars and dots. These primitives are called marks, and each mark encodes data visually through dynamic properties such as color and position. Although marks are simple by themselves, you can combine them in interesting ways to make rich, interactive visualizations.

To facilitate this, Protovis supports panels and inheritance. A panel is a container for marks; the contained marks are replicated for each data point on the panel. You can vary the panel position to create small multiple displays, or you can overlay panels. Inheritance lets you derive new marks from existing ones, while sharing some or all of the same properties. This is the same principle as cascading in CSS, or prototypal inheritance in JavaScript.

Please note: Protovis is in its early stages of development. At the moment, they only support Firefox 3, but they plan on adding support for Chrome and Safari 4.