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.

admin Javascript add plugions, Javascript

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

admin Javascript Javascript, Mootools, time picker

BySlideMenu is a Powerful Javascript Accordion Menu baed on well known Javascript framework, MooTools. This Plugin allows you to easily create beautiful sliding accordion menu on any element you want (ul, li, div,…) using images / text.

Javascript Accordion Menu Features

• Works horizontally or vertically
• Adjust size automatically
• Menu is expandable by mouseover or by click, as you want
• Menu can be pinned or not, by mouseover or click, you choose
• A default index can be defined.
• Can be used with any elements (ul/li, div, p…)
• Overflow support

admin Javascript java script, Mootools, power

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..

admin Javascript, Slideshow Javascript, Slideshow, slideshow JS

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.

admin Javascript Javascript, webmaster

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.

admin Javascript css, Javascript, xhtml

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!

admin Javascript checkbox, Javascript

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.

admin Javascript generated, Javascript

myPatterns is a new library adding custom notations for data structures in JS (and also C). It’s really useful for writing elegant programs using general pattern matching.

To explain myPatterns, let’s introduce a standard JavaScript object:

PLAIN TEXT

JavaScript

Using myPattern, you can write a test to check if this object represents a person whose first child is a boy 18 years old:

PLAIN TEXT

JavaScript:

The website explains the pattern above:

In the above, the match() statement both checks whether the object has a certain form (e.g. that the children field is an array containing a first element of a given form), and returns a "substitution" object s having the following value: {l: "Smith", b: 1991, x: [ {firstname: "Deborah" , born: 1996} ]}.

Furthermore, using your own notations, you could write the same condition more concisely, and with your own personal touch, for example:

PLAIN TEXT

JavaScript:

1. s = match(x, "<%first ~ %last: [boy(18) | %rest]>")

In the above, the object is noted in a more concise way, and the age of the first son is directly specified in the pattern, as if it was stored in the object, taking advantage of active patterns to compute the age on the fly.

Neat!

admin Javascript java script

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

admin Javascript, jquery blackberry, Javascript, jquery, soundManager