TOOLS TO CREATE
                       DYNAMIC CHARTS
                          Without Adobe Flash
                      ...
WHY?




Apple isn’t going to support Flash on iPhone , iPod or iPad .
      ®                                           ®...
SOLUTIONS
• Generate Images Dynamically
  Creating an image dynamically from your source data on the fly as the browser
  r...
CREATE IMAGES DYNAMICALLY

• Hosted: Google     Chart API http://code.google.com/apis/charttools

• PHP: GraPHPite     htt...
CREATE IMAGES DYNAMICALLY

• Java: ElegantJ       Charts http://www.elegantjcharts.com

•   Java: JFreeChart http://www.jf...
HTML5 CANVAS
                                SOME OF THESE SUPPORT SVG TOO




• JS   Charts http://www.jscharts.com

• Pl...
HTML5 CANVAS
                             SOME OF THESE SUPPORT SVG TOO




• Canvas     3D Graph http://dragan.yourtree.o...
HTML5 CANVAS
                              SOME OF THESE SUPPORT SVG TOO




• InfoVis Toolkit       http://thejit.org


•...
SVG


• Raphael    Javascript Library http://raphaeljs.com

• SVG   Kit http://svgkit.sourceforge.net

• SVG Web       htt...
Graphing without flash
Upcoming SlideShare
Loading in...5
×

Graphing without flash

3,183

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,183
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
30
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide










  • 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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×