Tuesday, October 3rd, 2006
Dynamic Graphics in the Browser
Category: Canvas
, Programming, UI
Dynamic graphics inside the browser are starting to become a little bit more practical, thanks to increased support for Canvas and SVG. I recently discussed eight competing techniques for generating dynamic graphics in an Ajax application, each with their own implications for portability, usability, and performance.
The following techniques are descibed:
- SVG
- Canvas
- Dynamic images from the server
- VML
- Richer Plugin (e.g. Flash)
- CSS/DOM
- data: resource
- XBM
3.7 rating from 33 votes
Right Now I am using Dynamic Images from the server. I created the once on the server then passes it to the enduser everytime after that until the data is stale (an admin adds an event) then I re-cache the image on the server side with the new data. This saves the server from getting uneeded db hits and strain from creating the images over n over n over.
What about the GD library for PHP? You can do some prett amazing things with that, and coupled with Ajax the possibilities are almost limitless. Plus it has the advantage of not requiring any special plugins or capabilities for client browsers, just the GD library/module installed on the PHP serving server.
The dojo library will have a cross-browser SVG/VML library (dojo.gfx) for uniform rendering of graphics across browsers without plugins.
A promising flash-based approach is AFLAX.
My solution is with php and the gd library
In my opinion this is just another proof of concept, it may have some minor applications where it will actually be used, but on a large scale we’ll not see anything change for quite some time: images are either static or serverside generated. Messing around with client side graphing adds too much to bother about.
An example of technique number 6, combined with real-time server-pushed data through the Comet paradigm is visible here (based on Lightstreamer):
http://app.lightstreamer.com/ChartDemo/
[...] Behr: Rich Color ChoosingMS Live.com: Ajax Image SearchGoogle Image Labeler: Collaborative Tagging GamePHPClasses.org Ajax UpgradeAjax as a Remedy for the Cacheability-Personalization DilemmaThe State Of Web Development - Ajax set to surpass Flash in ‘07Dynamic Graphics in the BrowserThe Dangers of Cross-Domain Ajax with FlashCOMET with PHPDojo Spreadsheet WidgetFull RSS feeds - I was serious the last time, too.Ajaxium 2.0: ASP.NET Ajax ContainerIntra-iframe Message PassingTop 8 Ajax evaluation criteriaAJAX MVC (so to speak)The beauty in (user) experienceEliminating async Javascript callbacks by preprocessingAjax-based PHP Grid Acquired, Soon to Open Source”Atlas” 1.0 Naming and RoadmapAjax IE Caching IssueMooTools ReleasedAJAX-based One-Page Checkout: VideoWhy Ajax?Bridging Java Swing with AjaxBeginning Ajax with ASP.NETGWT + JSF = G4jsfMore Developers Are Using AJAX in Emerging Markets Than in North AmericaGeek in the ParkTechCrunch UKThe Future of NetvibesProfiling and Optimising Ajax ApplicationsFilteringTable dojo WidgetIs Google Still The Ajax King?If blogging is a conversationZero Kode, Visual Designer for ZKAjax Login with AcegiAsk.com’s Binoculars - Help or Hinderace?AjaxitaggingIntroducing LaCo (or AJAX for the non-programmer)Adding AJAX to a Website step by step, Part IISXSW Panel PickerCross-Domain Ajax InsecurityAdding AJAX to a website step by stepHow to Design a large AJAX ApplicationCross Domain XMLHttpRequestWhat’s So Special About Ajax?What we think of Web 2.030Boxes Releases the822, a New People Search EngineToo Much AJAX?Web 2.0: Why Tufte is wrongWeb 2.0 desktop-style apps: Why no local drafts?Build an RSS Feed Reader using Ajax and PHPCSS: The Tech Ajax ForgotGmail and content findabilityReading on a screen is a lousy experienceAptana: New Web IDE in BetaIs Ajax development slowing down?Cross-site Ajax (from OSCON 2006)Ajax and the Spring Framework with TIBCO General InterfaceMeebo IM Now in NetvibesNokia and Backbase cooperate on Mobile AJAXGoplan updatesMike Potter Builds a Flash-y Ajax SiteGPokr: Ajax Poker AppBiggest AJAX problemBreaking User Interfaces for Fun and ProfitSafari: Browser.Back + AjaxAdvanced Box Model TestingInterview with Jakob NielsenDeclarative AjaxIs AJAX Accessibility a major issue?Free AJAX Training CourseIntegration of Spry and PHP/MySQLJ2EE and AJAX: AJAX with ServletsTwo Key Challenges for Ajax Adoption that We Have IgnoredAdobe Spry and PHP/MySQLAjax Activity IndicatorsMODx CMS - An Ajax/PHP Content SystemWeb API authentication for mashupsExplaining AJAXJSON.NETuniAjax: an ajax framework focused on browser supportAtlas June CTPRelay: Ajax File ManagerDojo Available in Ning ApplicationsInterview with ZK Creator Tom YehLondon Tube Route FinderSearchMash: Googles playpenYahoo! Browser-Based AuthenticationGoogle Reader Fresh LookTranscorners: Because you are obsessed with rounded cornersbytefx: simple effectsLessons in JavaScript Performance OptimizationTransparent custom corners and borders, version 2Transparent Messages in JavaScriptWatching Your Words2020 Internet VisionMan Bites Mainstream MediaUPS Begins Talks with TeamstersCDW, Welcome to the Fast FiveOPML Icon ProjectWritely Getting TightlyGood Looking Deal HuntingMore Lists; Less ThinkingLaunching web-applications quietlyAdvertising Beyond the Web: Heavyhitters take to TVNewsGator Desktop Sync for IE7 and VistaObjectifying JavaScriptUsability Report CardMicrosoft JavaScript Perf. TipsLighter Fare: Craigslist eCommerceJavaScript Closures for DummiesKeep Your Customers Updated with RSS FeedsDramatically improved IE7 JavaScript performanceScope in JavascriptTIBCO GI Supports FirefoxWeb Development Tools for the Power DeveloperStop using the “beta†labelGoplan is on, invites are outWeb 2.0 and the necessity of failureFacebook Gets Egg on its Face, Changes News Feed FeatureChosenVIP to Launch Exclusive Social Networking SiteBreaking: Xanga Fined $1 Million For Violating Children’s PrivacyvSocial Gets Funding for More Video-SharingTreemo Launches - YouTube Plus Photobucket on Your PhoneFaketown 2.0 - The Next Habbo Hotel?Wink 2.0 Launches, Becomes a Social NetworkCrowdstorm and Dovetail.tv Launch TodayFrom Barcamp to ShiftRojo Acquired by SixApartThe Facebook Backlash BeginsMotionbox Gets FundedJavaScript ThrobberSoapbox’s Social Network For ReviewsApocalypse 2.0 - A New Era of FragmentationYouTube IPO?HyperScope: From the past to the futureMultiply to Announce Social Bookmarking ToolDojo’s Deferred APIPoliticians Come To Facebook for Election 2006Tagged Rolls Out New FeaturesJavaScript Persistent Object Notation (JSPON)Pageviews are ObsoleteBlog It with WLW from FirefoxBookMooch’s Social Network for Book LoversWebshots ReloadedMySpace Audio Comments from MyChingoHotspottin Launches Social Network For HotspotsKaboodle Gets Widgetized!Vdiddy Aggregates YouTube, Metacafe, MySpace VideoGoogle Pitching Services to Small and Medium Sized BusinessesCorporate collaboration softwarejQuery 1.0 ReleasedWindows Live Writer PluginsLightbox using iFrames instead of AJAXFacebook Ads, Powered by MicrosoftGrouper Acquired by Sony For $65 Million in CashFacebook Notes - Facebook Adds BlogsParis Hilton Videos Now on YouTubeTraineo Launches Social Network for Weight LossCrazyEgg LaunchesThisNext Launches Shopping Social NetworkAmateurIllustrator Takes on DeviantArtFeedpass Takes Aim at MySpace BlogsUnivillage Launches UK FacebookFriendster Makes Friends with $10 MillionDon’t be afraid of GoogleBattleOut Puts Photos Head-to-HeadPhotobucket Raises Millions MoreTwango is YouTube for EverythingNick Lachey’s Celebrity Social Network - Flop or YFly?YouTube To Host Music VideosBurrp Launches Social Reviews Site TodayTakkle - Social Network For High School SportsBlueOrganizer - a Fresh Look, and Codes for MySpaceKiko for Sale on eBay For $50,000MySpace Video vs YouTube - Who’s Winning?Trailfire Launches Advanced Social Bookmarking ToolSurvey of Javascript Inheritance TechniquesWindows Live Writer (Beta)Blogger Releases New Beta VersionKevo Launches - Wikipedia Meets Paris HiltonInterview: Google’s Bruce Johnson on the new GWT 1.1 ReleaseDrawing the line on picking clientsUnobtrusive Javascript and Ajax for RailsTypePad Launches TypePad MobileJavaScript Tricks And Good Programming StyleReal Time Satellite Tracking (with Google Maps)Crowdstorm - Social Networking Meets ShoppingRSS EtiquetteTripHub Launches Group Travel SiteAdoppt - Another Generic Social NetworkFanpop Launches Social Network for FansJavaScript Model-View-Controller with Dojo toolkitCEO Blogging at WordCamp 2006Can Your Programming Language Do This? Javascript Can.AOL Video Is Live - and it’s BIG!Del.icio.us Adds Network Badges - Now Officially a Social NetworkThe Dangers of Browser DetectHow To Load And Parse XML Data Without ActiveXFlickrMap V2 Released - Put Flickr Maps on Your BlogCREAMaid One-Ups PayPerPostWindows Live Spaces Goes Live, Succeeds MSN SpacesYahoo! yodelsOne month to Barcamp Portugal!ClipShack Owner Gets $2MLook Out Dell - Sutori is ComingHosting providers, meet reality checkEons Launches - You Have 5 Unread Death AlertsYouTube Now “More Popular†than MySpaceMake your own kind of music at SingShotWeatherBug Launches YouTube for WeatherCNN Exchange - CNN’s Answer to YouTubeCooqy Brings eBay to MySpace - and Finds a Workaround to the MySpace Update?Hating Web 2.0: Privacy vs. ConvenienceSingShot Launches the YouTube of KaraokeCreating an Ajax Login Page with Dojo/Zend FrameworkSpyMedia 2.0 Launches - Sell Your Photos on Blogs and MySpaceMySpace Screws Up Again: Accounts Being Deleted?Snapvine Adds Voice Comments To MySpacePrototypify: Running Prototype code with legacy codePains of document.domain in FireFox 1.5Cyworld US is LiveSlate Reddit ReleasedJavascript Boot Camp TutorialSnocap Launches Linx - Napster Founder Selling Unprotected MP3s on MySpaceMenuTree Serves Up Take-Out 2.0Netscape HackedYouTube Is Not For SaleSayNow Adds Mobile Shoutouts To MySpace MusicSportsMates Launches - Sports Themed MySpaceSneakerplay’s Sneaker-Based Social NetworkPlanning an Ajax Boot CampFacebook Giving Away Free iTunes MusicOtavo Launches - Yahoo Answers, Friendster and del.ici.ous Rolled into OneRediscovering Flyweight for JavascriptStylehive Gets FundingImageKind Launches - CafePress for Wall ArtLink Thumbnail: Photo Mouse OverDabble Searches YouTube, MySpace Video, Metacafe and MoreNextcat - MySpace For EntertainmentDiigo Launches, Nobody CaresSocialtext Open Launches - Commercial Open Source WikiTeamSugar Launches Social Network for WomenFolkd is a Half-Decent Digg Clone (Finally)Gotuit - YouTube for Premium Content?Technorati Turns Three, Releases Major UpdateXN Test: The next Unit Testing project?XMLHttpRequest Quirks and PHPMySpace Goes OfflineCSS Browser SelectorGoogle PaintA Java-based HTTP Proxy for AjaxIf you can’t build a community, buy oneJson.NET 1.1: Converting between XML and JSONThe Importance of Maintainable JavaScriptAJAX pagination made simple (with Symfony)Stop trying to be MyspaceA Basic Approach to Server-side Data Validation with AJAXGo forth and APITuesday Morning RoundupOPML IconEcho2 Widget PanelSlightly ThickerBoxDigg and the wisdom of crowdsJson.NET: Library to help with .NET - JS communicationPayPerPost: Right or Wrong?Barcamp Portugal, more detailsIntelliJ IDEA Google Web Toolkit SupportGoogle CheckoutPrivate and Public Members in JavaScriptJavaRef: Ajaxified JavaDocSafari gets a Javascript debuggerSpeeding up Prototype’s $$ Selector ZDNet’s Ryan Stewart argues against performing interactive graphics with Ajax (i.e. standard web technologies). The article relates to my post on different techniques for graphics with Ajax (covered on Ajaxian). Michael responds that the main argument against Flash is the user base, then goes on to list the plusses and minuses of “richer plugins”. You simply should not be trying to create a rich, graphical experience in Ajax. The options (SVG, Canvas, VML, ect) are buggy, supported in different ways depending on the browser, and, for the most part, are a poor experience for both users and developers. The kind of rich interactivity that Flash and Windows Presentation Foundation provide are going to be leaps and bounds ahead of what any browser technology can do, and that’s why they will succeed. The web becomes richer every day. Video and Music are taking the web by storm, and with the surge in broadband adoption, people are making these things part of their every day web experience. Ajax applications can’t take advantage of them in the way the Flash or WPF can. Flash (more generally, Richer Plugins) was actualy one of the graphics techniques mentioned in the original article. It’s all about trade-offs. I’ve actually argued myself that Ajax developers ought to take Flash more seriously, as it’s an excellent complement to Ajax. Flash sometimes makes a nice sweet spot - with graphics and multimedia closer to that of the desktop than standard DHTML/Ajax, but still living in a web platform that’s often more convenient than the desktop. The two monster apps of the past 12-18 months, YouTube and MySpace, demonstrate the power of Flash and multimedia on the web. The benefits of Flash over Ajax are self-evident and undeniable, but Flash comes with its own set of problems too - not every user has Flash installed, not every user has the latest version, not every network allows Flash applications to run, not every developer and company wants to commit to proprietary technology when viable alternatives are available. Ajax apps tend to be easier to degrade gracefully as well; Flash is more all-or-none. What if I want to introduce a histogram to an Ajax enterprise app? I’ll happily use a DOM/CSS library like CSS Graphs. Or if I’m writing a Firefox extension, I might use a data: resource to create a whimpy graphic since I no longer care about portability or even extravagant display. Maybe I want a 16×16 heatmap next to each search result - I’ll draw it with a Canvas and keep all the search results in standard HTML. And so on. See? Competent developers don’t engage in dogmatic battles, because they know software is all about trade-offs. Many times, Flash wins. Many times, it loses. Last word goes to Ryan: Don’t waste time trying to build the next generation of the web with graphical Ajax solutions … you already have a solution, and it’s getting more robust by the day. As your web applications start to require a more rich environment, embrace Rich Internet Applications - you’ll be better off. October 4th, 2006 [...]
Why AJAX needs Flash
Why AJAX needs Flash: If you develop SWF you may have already seen this Visual Synthesizer from Big Spaceship, but I think it’s useful for Web2.0 types to look at as well, particularly because any browser which supports XmlHttpRequest will likely supp…
payday loan company is the payday loan company’s #1 RATED service! We have the fastest payday loan application and our online service can get you the cash advance till payday loan you need in your hands TODAY!
Also check out this ajax/dhtml based website which allows flowcharting in both IE and firefox. Backend processing allows you to save images as jpeg/png/svg or pdf.
http://www.cumulatelabs.com
worth a look
Open-jACOB: http://www.openjacob.org
Ajax Draw2D: http://www.openjacob.org/draw2d.html
Ajax Workflow: http://www.openjacob.org/jacob.blooper.html
greetings
Andreas