Scott Jehl has released jQuery Visualize, the plugin that groks HTML tables and generates lovely charts from it, all from a simple $('table').visualize(); (lot’s of options for you to twiddle too if you want).
First, you create a bog standard table like:
| PLAIN TEXT |
|
HTML:
|
Then you visualize it. You end up with pretty graphs like these:
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.
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.
This JavaScript Charts supports a lot of features and has a very good documentations. However, it is only free for personal use.
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.
This Mootools pie chart class is based on Stoyan Stefanov’s Canvas Pie.The code now requires less html markup than the original.
This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript.
moochart is a plugin for MooTools 1.2 that draws bubble diagrams on the canvas tag. Future versions might include pie, bar & line graphs.
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
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.
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.
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.
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.
The YUI Charts Control visualizes tabular data on a web page in several possible formats including vertical columns, horizontal bars, lines, and pies
TufteGraph is a beautiful jquery Chart plugin.
Content Management System, or CMS is an application used to manage news easily so that users can publish, edit and delete articles from the back-end admin system. HTML and other scripting language are not necessary to operate a CMS, though having them will add more advantages.
Since we had looked into 22 open source PHP frameworks, i decided to do a roundup of 20 Open Source PHP Content Management Systems so that readers who don’t have strong PHP knowledge can easily create their website using free and open source CMS.
Wordpress is a powerful yet easy to use content management system. Initially it was designed as a blogging platform. However, it slowly become popular and can be customized into a powerful CMS with some tricks and plugins. I had wrote an article about Wordpress SEO plugins and also talked about things that you should know about Wordpress 2.8.
Drupal is a free and open source modular framework and Content Management System (CMS) written in PHP. It is used as a back-end system for many different types of websites, ranging from small personal blogs to large corporate and political sites.
Joomla is an award-winning content management system (CMS), which enables you to build Web sites and powerful online applications. Many aspects, including its ease-of-use and extensibility, have made Joomla the most popular Web site software available. Best of all, Joomla is an open source solution that is freely available to everyone.
Frog CMS simplifies content management by offering an elegant user interface, flexible templating per page, simple user management and permissions, as well as the tools necessary for file management. 
SilverStripe is a PHP CMS built with Sapphire framework, and it uses MVC design pattern. you can view example sites that built with SilverStripe from the official webpage. 
Mambo is a full-featured, award-winning content management system that can be used for everything from simple websites to complex corporate applications. Although some Mambo sites had already migrated to Joomla, but i think i should include Mambo as it is still a great CMS. 
TYPOlight is a PHP 5 CMS and it has a lot of features such as live update, cross-browser CSS framework generator(IE7 compatible), templated based front end output, use Ajax and Web 2.0 technologies. You should check out the main page for more info. 
Concrete5 is an open source content management system with simple administaror interface. You can edit a web page live by using the editing toolbar provided after you log in as administrator. 
Textpattern is yet another very popular content management system. It requires PHP 4 to run and has a lot of plugins that you can use for various customizations. 
Symphony is a CMS that uses XML/XSLT as its templating language. Symphony lets you customize anything you like, from the website’s URL structure to your publishing environment. For a non programmer, this CMS might be complicated to learn. 
MODx is both a PHP application framework and content management system. MODx is the first free PHP CMS to offer an API that fully supports Web 2.0 Ajax technology. It is SEO friendly CMS, and allows you to configure the meta content for each page. 
Habari is a highly recommended open source blogging platform. It is being written specifically for modern web hosting environment, and uses modern object oriented programming techniques. 
CMS Made Simple is highly customizable and there are a lot of Modules for you to download. The Documentation is pretty complete and easy to follow. 
ImpressCMS is a community developed Content Management System. It is highly scalable and is extremely useful for managing online communities. 
Exponent uses an intuitive and flexible content editing system that allows website pages to be edited on the page as it is displayed. You can download modules and themes from the official website too! 
MiaCMS is a fork of the Mambo CMS. It has a powerful and extensible third party entension system, and also a flexible site theming capabilities. MiaCMS supports OpenID and can consider to be a stable and mature CMS. 
Jojo is a search engine friendly CMS. You will have SEO friendly URL to your article, and Jojo will handle www/non-www domains for you. Beside SEO friendly, Jojo also lets you extend the functionality by adding product databases, blogs, image galleries or whatever takes your fancy. 
TYPO3 is a free Open Source content management system for enterprise purposes on the web and in intranets. It offers full flexibility and extendability while featuring an accomplished set of ready-made interfaces, functions and modules. 
Elxis CMS comes with a lot of features such as Search Engine Friendly URL, strong security, adjustable member list and complete user profiles. Its automated tasks, modern design, AJAX technology and multi-lingual interface helps you be more productive. 
Chyrp is a lightweight blogging platform and it uses Twig as the templating engine. The documentation is quite complete and you can download a lot of useful modules from the main site. 
jQuery Tools is a collection of the most important user-interface components for today’s websites. This single JavaScript file weighs only 5.8 Kb. This library contains some useful JavaScript tools like tabs, tooltips, accordions, overlays, smooth navigation, great visual effects and all those “web 2.0? goodies that you have seen on your favourite websites.
You don’t need to be a programmer to use these tools. They have lots of Demos you can explore and you can copy their source code to your site and things will work. Each tool is used in a similar manner and by learning one tool you can easily learn the other tools.
And above all, the library is constantly maintained and updated. Expect to see new releases coming out on a regular basis. This library is dual licensed under MIT and GPL 2+ licenses.
The Dock is a set of iconic images that expand when rolled over with the cursor, and usually perform some action when clicked. jqDock is a jQuery plugin that mimics that behaviour by transforming a contiguous set of HTML images into an expanding Dock, vertical or horizontal, with or without labels.
Basically, jqDock expands a reduced size image towards its full size when the cursor is on or near it. You can specify a vertical or horizontal orientation for the Dock, and select the direction in which the image should expand and whether to show labels or not. The styling and positioning of the Dock is (almost) entirely down to you.
You should also check out other Fish Eye Menus we mentioned earlier.
Developer Kevin van Zonneveld was once working on a project with a lot of client(JS) / server(PHP) interaction, and he found himself coding PHP functions (like base64_decode & urldecode) in JavaScript to smoothen communication between the two languages.
He stored the stored the functions in a file called PHP.JS which was included in the project. But even when the project was done, it remained fun trying to port PHP functions to JavaScript, and so the library grew.
Kevin decided to share the little library on his blog, triggering the enthusiasm of a lot of PHP developers longing for PHP functionality in JavaScript. PHP.JS is an open source project in which they try to port PHP functions to JavaScript. By including the PHP.JS library in your own projects, you can use your favorite PHP functions client-side.
jQuery Masonry is a layout plugin for jQuery. Think of Masonry as the flip side of CSS floats. Where as floats arrange elements horizontally then vertically, Masonry arranges them vertically then horizontally. The result leaves no vertical gaps between elements of varying height, just like a mason fitting stones in a wall. Masonry will work with all structural elements: div’s, lists, p’s, spans.
There are no setting or options within in the plugin. Instead, all spacing properties can be set with CSS. The only property required for Masonry to work is for the width of the child elements. Child elements should be should have equal width in order to avoid any overlapping.
dhtmlxScheduler is a web-based event calendar which provides simple in-browser scheduling solution. With smooth Ajax-enabled interface dhtmlxScheduler allows users to add, modify or delete events without refreshing the web page.
Intuitive drag-n-drop behavior gives the possibility to change events date and start/end time by simply dragging the event boxes. The calendar events can be displayed in Day/Week/Month views.
dhtmlxScheduler is very lightweight (about 19KB gzipped), cross-browser and highly customizable. Each aspect of the calendar interface can be configured through JavaScript API. Developers can easily add/update events, change date format, time scale or calendar language.
Although dhtmlxScheduler is a pure JavaScript solution, it can be easily connected to the backend database with the help of dhtmlxConnector, a PHP extension that enables data communication between client-side interface and server-side datasource.
You can also use your own server-side code written in any language (PHP, Java, ASP, etc.) to bind scheduler content to the database. dhtmlxScheduler is distributed under GNU GPL and commercial licenses.
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.
Everyone loves the Gmail and Facebook inline chat modules. This Gmail/Facebook Style jQuery Chat Module enables you to seamlessly integrate Gmail/Facebook style chat into your existing website.
You can see the chat box displays at the bottom right hand corner of the screen. You can keep the chat boxes open and stores state (data) even when pages are browsed/refreshed. It will display “Sent at…” after 3 minutes of inactivity. You can also minimize and close chat boxes easily.
This chat script can be used for free under LGPL-style license for non-commercial purposes. However, you need to purchase a license for commercial purposes.
