Accessible Charts & Graphs from Table Elements using HTML 5 Canvas and jQuery

Accessible Charts & Graphs from Table Elements using HTML 5 Canvas and jQuery
This technique provides a simple method for generating bar, line, area, and pie charts from an HTML table, and allows you to configure them in a variety of ways.

Chart in 50 Useful New jQuery Techniques and Tutorials

AmCharts Interactive Flash Charts for Developers

AmCharts provides us three type of charts, Pie ChartsLine Charts andBar/Column Charts. They are all animated and interactive Flash Charts. Users can pull out a slice of pie chart by clicking on it. Users can zoom in/out by highlighting a specific area of the line chart. The bar/column can be 100 stacked, mouseover to view more details. All Charts are free to download, the only limitation of free version is that a small link to AmCharts will be displayed in top left corner of your charts.

amcharts3.gifamcharts1.gif amcharts2.gif

Requirements: Any Modern with Flash 8.0+
Demo: http://www.amcharts.com
License: License Free

Emprise 100% Pure Javascript Interactive Charts

A set of Emprise Javascript Charts ( Line, Area, Scatter, Pie, Bar and Function series ) with zooming, scaling and scrolling ablity. Built with compatibility in mind and tested on all major browsers, you can be assured your charts will function consistently for the broadest range of end users. Every aspect of the charting display can be configured and customized through well-documented properties and methods. It is free for everyone unless you want extra features.

emprisechart.gif

Requirements: Safari, Camino, Firefox and Internet Explorer 6+, Opera
Demo: http://www.ejschart.com/examples/index.php
License: License Free

20 Types of Free Charts from PHP/SWF Charts

PHP/SWF Charts is a simple, yet powerful PHP tool to create attractive web charts and graphs from dynamic data. Use PHP scripts to generate or gather the data from databases, then pass it to this tool to generate Flash (swf) charts and graphs. PHP/SWF Charts makes the best of both the PHP and SWF worlds. PHP scripts provide integration, and Flash provides the best graphic quality. It supports many charts types, Line, Column, Stacked column, Floating column, 3D column, Stacked 3D column, Parallel 3D column, Pie, 3D Pie, Bar, Stacked bar, Floating bar, Area, Stacked area, Candlestick, Scatter, Polar, Mixed, Composite and Joined. Can you ask for more? They have the following main features.

  • Web charts and graphs from dynamic data
  • Live and interactive chart updates without reloading the web page
  • Clickable charts, and drill-down
  • Animated transitions
  • Printable charts
  • Simple and flexible chart generation

PHP/SWF Charts is free to download and use. The free, unregistered version contains all the features except for:

  1. Clicking a chart takes the user to the PHP/SWF Charts web site
  2. No displaying charts inside another flash file
  3. No technical support, and no product updates by e-mail

php-swf-charts.png

Requirements: Flash Player 6+, Server with PHP Support
Demo: http://www.maani.us/charts/index.php?menu=Gallery
License: License Free

FusionCharts Free Interactive and Data-Driven Flash Charts

FusionCharts Free is a flash charting component that can be used to render data-driven & animated charts for your web applications and presentations. It is a cross-browser and cross-platform solution that can be used with ASP.NET, ASP, PHP, JSP, ColdFusion, Ruby on Rails, simple HTML pages or even PowerPoint Presentations to deliver interactive and powerful flash charts. You do NOT need to know anything about Flash to use FusionCharts. All you need to know is the language you’re programming in.

The free version offers you most of the features that you would normally need. If the features in free version does not satiate your requirements, you might consider a paid version. In contrast, offers a lot more advanced options like gradients, 3D Lightings (shadow, blur effect, glow effect and bevel), custom animations, in-built debuggers, more chart types, enhanced AJAX support, data-driven flash maps, loading into other Flash movies, personalized implementation support etc.

If you are interested, you may want to look at FusionCharts Google Gadget as well.

fusioncharts.png

Requirements: Flash Support
Demo: http://www.fusioncharts.com/Free/Gallery.asp
License: License Free

How to Create Professional 3D Pie Charts in Illustrator

Are you still using the traditional 2D graph for your reports and presentations?N.Design Studio taught us how to create 3D Pie Charts with Illustrator CS2 at ease. The Pie Charts looks so real and professional.

pie-charts1.png

As a freelancer, we may come into the situation that you have to present some sort of statistical data to your client. Of course you may use Excel’s graph tool to easily create a bunch of charts, but more or less all of those predefined designs suck. Bartelme Design show us how to create visually appealing Pie charts using Adobe Illustrator’s graph tool.

pie-charts2.png

GoSquared showed us how to create beautiful Pie Charts in Illustrator. Just follow a few simple steps, and you’ll view pie charts in a whole new light.

pie-charts3.png

IMmodernLife created a comprehensive tutorial of how to make overwhelming niceness of the Pie Charts. He is using Adobe Illustrator CS2, but the tips should apply to most of the more recent versions.

pie-charts4.png

Requirements: Adobe Illustrator
Demo 1: http://www.ndesign-studio.com/resources/tutorials/3d-graphs/”
Demo 2: http://bartelme.at/journal/archive/creating_graphs/journal/281/
Demo 3: http://www.gosquared.com/liquidicity/archives/103
Demo 4: http://www.modernlifeisrubbish.co.uk/article/howto…
License: License Free

Produce Interactive Charts of Time Series with dygraphs

dygraphs is an open source JavaScript library that produces produces interactive, zoomable charts of time series. It is designed to display dense data sets and enable users to explore and interpret them. You can mouse over to highlight individual values. Click and drag to zoom. Double-click to zoom back out. Change the number and hit enter to adjust the averaging period.

Another significant feature of the dygraphs library is the ability to display error bars around data series. dygraphs is purely client-side JavaScript. It does not send your data to any servers – the data is processed entirely in the client’s browser.

dygraphs-javascript

Requirements: JavaScript Enabled
Demo: http://www.danvk.org/dygraphs/
License: License Free