Graphing without flash

TOOLS TO CREATE DYNAMIC CHARTS Without Adobe Flash ® ® Erik Giberti http://af-design.com @giberti

WHY? Apple isn’t going to support Flash on iPhone , iPod or iPad . ® ® ® ® And many other mobile devices don’t support it either.

SOLUTIONS • Generate Images Dynamically Creating an image dynamically from your source data on the ﬂy as the browser requests it. Lacking in interactivity but supported by any device that supports images. • HTML5 Canvas Tag Not natively supported by IE, although support can be enabled through use of the ExplorerCanvas project. http://code.google.com/p/explorercanvas • SVG (Scaleable Vector Graphics) Allows for rich user experiences while remaining lightweight. Native support in IE 9, plugins available for 8 and lower. Supported by all other major browser lines.

CREATE IMAGES DYNAMICALLY • Hosted: Google Chart API http://code.google.com/apis/charttools • PHP: GraPHPite http://graphpite.sourceforge.net • PHP: pChart http://pchart.sourceforge.net • Python: Pychart http://home.gna.org/pychart • Java: EasyCharts http://www.objectplanet.com/easycharts

CREATE IMAGES DYNAMICALLY • Java: ElegantJ Charts http://www.elegantjcharts.com • Java: JFreeChart http://www.jfree.org/jfreechart • .NET: Microsoft .net Chart Controls http://www.microsoft.com/downloads/details.aspx?FamilyID=130f7986- bf49-4fe5-9ca8-910ae6ea442c • .NET: .net Charting http://www.dotnetcharting.com • Silverlight: Microsoft Silverlight Toolkit http://www.silverlight.net

HTML5 CANVAS SOME OF THESE SUPPORT SVG TOO • JS Charts http://www.jscharts.com • PlotKit http://www.liquidx.net/plotkit • Processing.js http://processingjs.org • Dojo Toolkit http://www.dojotoolkit.org • Bluff http://bluff.jcoglan.com

HTML5 CANVAS SOME OF THESE SUPPORT SVG TOO • Canvas 3D Graph http://dragan.yourtree.org/code/canvas-3d-graph • TufteGraph (jQuery Based) http://xaviershay.github.com/tufte-graph • Emprise JavaScript Charts http://www.ejschart.com • Canvas Pie Chart with Tooltips (Mootools Based) http://blog.greghoustondesign.com/canvas-pie-chart-with-tooltips • MooChart (Mootools Based) http://moochart.coneri.se

HTML5 CANVAS SOME OF THESE SUPPORT SVG TOO • InfoVis Toolkit http://thejit.org • Highcharts http://www.highcharts.com • Flot http://code.google.com/p/flot • Flotr Javascript Plotting Library (Prototype Based) http://solutoire.com/flotr • Graphico (Prototype + Raphael Based) http://grafico.kilianvalkhof.com

SVG • Raphael Javascript Library http://raphaeljs.com • SVG Kit http://svgkit.sourceforge.net • SVG Web http://code.google.com/p/svgweb • ProtoVis http://vis.stanford.edu/protovis

http://af-design.com	209
http://www.techgig.com	39
http://www.slideshare.net	6
http://www.techgig.timesjobs.com	3

Graphing without flash

by Erik Giberti

Accessibility

Upload Details

Usage Rights

4 Embeds 257

Statistics

Graphing without flash Presentation Transcript