Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Graphing without flash

3,522 views

Published on

  • Be the first to comment

Graphing without flash

  1. 1. TOOLS TO CREATE DYNAMIC CHARTS Without Adobe Flash ® ® Erik Giberti http://af-design.com @giberti
  2. 2. WHY? Apple isn’t going to support Flash on iPhone , iPod or iPad . ® ® ® ® And many other mobile devices don’t support it either.
  3. 3. SOLUTIONS • Generate Images Dynamically Creating an image dynamically from your source data on the fly 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.
  4. 4. 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
  5. 5. 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
  6. 6. 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
  7. 7. 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
  8. 8. 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
  9. 9. 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

×