SlideShare a Scribd company logo
1 of 10
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 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.
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
Graphing without flash

More Related Content

What's hot

Features in love
Features in loveFeatures in love
Features in love
bmeme
 

What's hot (9)

HTML5 for Web Designers
HTML5 for Web DesignersHTML5 for Web Designers
HTML5 for Web Designers
 
HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK
HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SKHTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK
HTML5: The Parts You Care About - 4/Nov/13 - PrDC Saskatoon, SK
 
WordCamp Bournemouth 2014 - Designing with data in WordPress
WordCamp Bournemouth 2014 - Designing with data in WordPressWordCamp Bournemouth 2014 - Designing with data in WordPress
WordCamp Bournemouth 2014 - Designing with data in WordPress
 
Webjamsep07
Webjamsep07Webjamsep07
Webjamsep07
 
Overboard.js - where are we going with with jsconfasia / devfestasia
Overboard.js - where are we going with with jsconfasia / devfestasiaOverboard.js - where are we going with with jsconfasia / devfestasia
Overboard.js - where are we going with with jsconfasia / devfestasia
 
5 Reasons Why Your Website Is[n’t] a Native App (PrDC 2015)
5 Reasons Why Your Website Is[n’t] a Native App (PrDC 2015)5 Reasons Why Your Website Is[n’t] a Native App (PrDC 2015)
5 Reasons Why Your Website Is[n’t] a Native App (PrDC 2015)
 
Features in love
Features in loveFeatures in love
Features in love
 
Creating displays of virtual objects and events
Creating displays of virtual objects and eventsCreating displays of virtual objects and events
Creating displays of virtual objects and events
 
HTML5 – the good, the bad, and the fun
HTML5 – the good, the bad, and the funHTML5 – the good, the bad, and the fun
HTML5 – the good, the bad, and the fun
 

Similar to Graphing without flash

Tools for HTML5
Tools for HTML5Tools for HTML5
Tools for HTML5
lillianabe
 

Similar to Graphing without flash (20)

How to win a hackathon - Penn APps 2015
How to win a hackathon - Penn APps 2015How to win a hackathon - Penn APps 2015
How to win a hackathon - Penn APps 2015
 
WebGL Awesomeness
WebGL AwesomenessWebGL Awesomeness
WebGL Awesomeness
 
Frontend development of the (current) future
Frontend development of the (current) futureFrontend development of the (current) future
Frontend development of the (current) future
 
Tools for HTML5
Tools for HTML5Tools for HTML5
Tools for HTML5
 
jhipster-geekle-gbloch
jhipster-geekle-gblochjhipster-geekle-gbloch
jhipster-geekle-gbloch
 
Real solutions, no tricks
Real solutions, no tricksReal solutions, no tricks
Real solutions, no tricks
 
Future of the Web
Future of the WebFuture of the Web
Future of the Web
 
The Future of the web
The Future of the webThe Future of the web
The Future of the web
 
Screw HTML5, make cool shit with AIR
Screw HTML5, make cool shit with AIRScrew HTML5, make cool shit with AIR
Screw HTML5, make cool shit with AIR
 
Reusable Whiteboard Wicket Component for Apache Openmeetings
Reusable Whiteboard Wicket Component for Apache OpenmeetingsReusable Whiteboard Wicket Component for Apache Openmeetings
Reusable Whiteboard Wicket Component for Apache Openmeetings
 
Mobile native-hacks
Mobile native-hacksMobile native-hacks
Mobile native-hacks
 
PhoneGap at Facebook Mobile Hack
PhoneGap at Facebook Mobile HackPhoneGap at Facebook Mobile Hack
PhoneGap at Facebook Mobile Hack
 
orcreatehappyusers
orcreatehappyusersorcreatehappyusers
orcreatehappyusers
 
orcreatehappyusers
orcreatehappyusersorcreatehappyusers
orcreatehappyusers
 
full stqack guktgktktykytkyyyjrneyrynye5n
full stqack guktgktktykytkyyyjrneyrynye5nfull stqack guktgktktykytkyyyjrneyrynye5n
full stqack guktgktktykytkyyyjrneyrynye5n
 
Frontend development of the (current) future
Frontend development of the (current) futureFrontend development of the (current) future
Frontend development of the (current) future
 
HTML5DevConf 2013 (October): WebGL is a game changer!
HTML5DevConf 2013 (October): WebGL is a game changer!HTML5DevConf 2013 (October): WebGL is a game changer!
HTML5DevConf 2013 (October): WebGL is a game changer!
 
PhoneGap/Cordova
PhoneGap/CordovaPhoneGap/Cordova
PhoneGap/Cordova
 
Echo HTML5
Echo HTML5Echo HTML5
Echo HTML5
 
InfoTalk#17 1st
InfoTalk#17 1stInfoTalk#17 1st
InfoTalk#17 1st
 

Graphing without flash

  • 1. TOOLS TO CREATE DYNAMIC CHARTS Without Adobe Flash ® ® Erik Giberti http://af-design.com @giberti
  • 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. 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. 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. 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. 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. 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. 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. 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

Editor's Notes