SlideShare a Scribd company logo
1 of 34
Download to read offline
Introduction
                   YUI-Flot
             Enlightenment




Javascript charting with YUI-Flot

Philip Tellis / philip@bluesmoon.info


      FOSDEM 2010 / 2010-02-07




  FOSDEM 2010 / 2010-02-07    Javascript charting with YUI-Flot
Introduction   Who, what, why?
                                  YUI-Flot   Charting on the web
                            Enlightenment    YUI-Flot


$ finger philip



      Philip Tellis
      philip@bluesmoon.info
      tech.bluesmoon.info
      @bluesmoon
      yahoo
      geek




                 FOSDEM 2010 / 2010-02-07    Javascript charting with YUI-Flot
Introduction   Who, what, why?
                                 YUI-Flot   Charting on the web
                           Enlightenment    YUI-Flot


What’s this talk all about?




      Charting options for web developers
      Javascript charting with YUI-Flot
      Things I learnt
      How you can contribute




                FOSDEM 2010 / 2010-02-07    Javascript charting with YUI-Flot
Introduction   Who, what, why?
                               YUI-Flot   Charting on the web
                         Enlightenment    YUI-Flot


Why do we need charting on the web?




     There’s so much data on the web
     It’s easy for users to access your data over the web
     It’s a little more portable than emailing Excel spreadsheets




              FOSDEM 2010 / 2010-02-07    Javascript charting with YUI-Flot
Introduction   Who, what, why?
                               YUI-Flot   Charting on the web
                         Enlightenment    YUI-Flot


Why do we need charting on the web?




     There’s so much data on the web
     It’s easy for users to access your data over the web
     It’s a little more portable than emailing Excel spreadsheets




              FOSDEM 2010 / 2010-02-07    Javascript charting with YUI-Flot
Introduction   Who, what, why?
                               YUI-Flot   Charting on the web
                         Enlightenment    YUI-Flot


Why do we need charting on the web?




     There’s so much data on the web
     It’s easy for users to access your data over the web
     It’s a little more portable than emailing Excel spreadsheets




              FOSDEM 2010 / 2010-02-07    Javascript charting with YUI-Flot
Introduction   Who, what, why?
                                YUI-Flot   Charting on the web
                          Enlightenment    YUI-Flot


Alternatives for charting on the web




      Static images generated on the server
      Flash based dynamic charts with lots of interactivity
      Javascript + Canvas based charts with some interactivity
      Progressively enhanced CSS only charts
      Non-semantic, HTML Table only charts (don’t do this)




               FOSDEM 2010 / 2010-02-07    Javascript charting with YUI-Flot
Introduction   Who, what, why?
                                YUI-Flot   Charting on the web
                          Enlightenment    YUI-Flot


Image based charts




     Many charting libraries available
     Works on all browsers (kind of)
     Static images can be downloaded and pasted into a report
     Cannot interact with the data, or easily drill-down




               FOSDEM 2010 / 2010-02-07    Javascript charting with YUI-Flot
Introduction   Who, what, why?
                                YUI-Flot   Charting on the web
                          Enlightenment    YUI-Flot


Flash based charts



     Quite pretty and flashy
     Works across most GUI based browsers (with a plugin)
     Does not work on the iPhone
     Grabs focus - still a problem on linux
     Fast, but JS-Flash bridge is slow
     Can progressively enhance a data table




               FOSDEM 2010 / 2010-02-07    Javascript charting with YUI-Flot
Introduction   Who, what, why?
                                YUI-Flot   Charting on the web
                          Enlightenment    YUI-Flot


Javascript+Canvas based charts




     Easy for any Javascript developer to hack
     Based on Open standards
     Does not natively work with Internet Explorer
     Easy to integrate with other javascript libraries
     Can progressively enhance a data table




               FOSDEM 2010 / 2010-02-07    Javascript charting with YUI-Flot
Introduction   Who, what, why?
                                YUI-Flot   Charting on the web
                          Enlightenment    YUI-Flot


CSS only charts




     http://icant.co.uk/csscharts/
     Very simple code
     Data needs to be encoded twice
     Only vertical bar charts




               FOSDEM 2010 / 2010-02-07    Javascript charting with YUI-Flot
Introduction   Who, what, why?
                                YUI-Flot   Charting on the web
                          Enlightenment    YUI-Flot


What is flot?




     A pure javascript charting library
     Uses the HTML Canvas tag for drawing
     Really smooth, and very pretty
     Uses excanvas to work on IE




               FOSDEM 2010 / 2010-02-07    Javascript charting with YUI-Flot
Introduction   Who, what, why?
                                 YUI-Flot   Charting on the web
                           Enlightenment    YUI-Flot


Why I like it




      Looks good – very important based on your target
      audience
      Good event model
      Fast at drawing and redrawing
      Ability to “zoom in” to sections of the data




                FOSDEM 2010 / 2010-02-07    Javascript charting with YUI-Flot
Introduction   Who, what, why?
                                YUI-Flot   Charting on the web
                          Enlightenment    YUI-Flot


Why I ported it to YUI




      My Javascript library of choice is YUI
      My project required a charting widget
      Flash based charts caused me problems on linux
      Flot seems to have a good community around it
      Most important – I already knew and was using Javascript




               FOSDEM 2010 / 2010-02-07    Javascript charting with YUI-Flot
Introduction   What can it do?
                                  YUI-Flot   How to use it?
                            Enlightenment    Differences from Flot


Draw basic x/y scatter plots




       Random set of x,y points
       [[10, 20], [15, 13], [8, 32], [12,
       7], [17, 19], [23, 8], [3, 5]]
       yui-examples/scatter.html




                 FOSDEM 2010 / 2010-02-07    Javascript charting with YUI-Flot
Introduction   What can it do?
                                 YUI-Flot   How to use it?
                           Enlightenment    Differences from Flot


Series plots




               X-axis contains Date objects or
               timestamps
               Resolution is in seconds
               strftime formatting
               yui-examples/timeseries.html




                FOSDEM 2010 / 2010-02-07    Javascript charting with YUI-Flot
Introduction   What can it do?
                              YUI-Flot   How to use it?
                        Enlightenment    Differences from Flot


Multiple series




                       3 series with a common X value
                       Schema style data structure – out of a DB
                       yui-examples/multiseries.html




             FOSDEM 2010 / 2010-02-07    Javascript charting with YUI-Flot
Introduction   What can it do?
                              YUI-Flot   How to use it?
                        Enlightenment    Differences from Flot


Multiple series




        { x: 1, temp: 16, hg: 3, vol: 40 },
        { x: 2, temp: 18, hg: 4, vol: 30 },
        { x: 3, temp: 12, hg: 6, vol: 20 },
        ...




             FOSDEM 2010 / 2010-02-07    Javascript charting with YUI-Flot
Introduction   What can it do?
                                       YUI-Flot   How to use it?
                                 Enlightenment    Differences from Flot


1. Include code into your HTML




  <div id="placeholder"></div>


  <!--[if IE]><script type="text/javascript" src="excanvas.min.js"></script><![endif]-->
  <script type="text/javascript"
          src="http://yui.yahooapis.com/combo
                   ?2.7.0/build/yahoo-dom-event/yahoo-dom-event.js
                   &2.7.0/build/datasource/datasource-min.js">
  </script>
  <script type="text/javascript" src="yui.flot.js"></script>




                     FOSDEM 2010 / 2010-02-07     Javascript charting with YUI-Flot
Introduction   What can it do?
                                      YUI-Flot   How to use it?
                                Enlightenment    Differences from Flot


2. Get your data from somewhere




  var data = [ [10, 20], [15, 5], [8, 32], [13, 97] ];




                     FOSDEM 2010 / 2010-02-07    Javascript charting with YUI-Flot
Introduction   What can it do?
                                      YUI-Flot   How to use it?
                                Enlightenment    Differences from Flot


3. Set your chart’s parameters




  var data = [ [10, 20], [15, 5], [8, 32], [13, 97] ];

  var config = { lines: {show: true}, points: {show: true} };




                     FOSDEM 2010 / 2010-02-07    Javascript charting with YUI-Flot
Introduction   What can it do?
                                      YUI-Flot   How to use it?
                                Enlightenment    Differences from Flot


4. Instantiate the chart




  var data = [ [10, 20], [15, 5], [8, 32], [13, 97] ];

  var config = { lines: {show: true}, points: {show: true} };

  YAHOO.widget.Flot("placeholder", [data], config);




                     FOSDEM 2010 / 2010-02-07    Javascript charting with YUI-Flot
Introduction   What can it do?
                                YUI-Flot   How to use it?
                          Enlightenment    Differences from Flot


Flot => YUI-Flot



     Based off flot 0.5, flot is now at 0.6
     Added log scales for all axes (also in Flot 0.6)
     Allow more than two axes in each direction
     Add axis labels
     Drop points to make plot more readable
     Use tabs instead of spaces for indentation




               FOSDEM 2010 / 2010-02-07    Javascript charting with YUI-Flot
Introduction   What can it do?
                                YUI-Flot   How to use it?
                          Enlightenment    Differences from Flot


Timeseries changes




     Accepts Date objects as values for a timeseries
     timestamps are in seconds and not in milliseconds
     Full strftime based date formatter
     locale support for time series




               FOSDEM 2010 / 2010-02-07    Javascript charting with YUI-Flot
Introduction   Future
                                YUI-Flot   Things I learnt
                          Enlightenment    How to contribute


Move up to flot 0.6




     I like the plugin model in flot 0.6
     The thresholds feature is great
     Stacked bars are useful
     Stepped line charts are useful




               FOSDEM 2010 / 2010-02-07    Javascript charting with YUI-Flot
Introduction   Future
                                YUI-Flot   Things I learnt
                          Enlightenment    How to contribute


More additions




     Add error bars & candlesticks
     Pie charts
     Add a smoothing plugin (local regression)
     Upgrade to YUI 3
     Move it into the YUI gallery




               FOSDEM 2010 / 2010-02-07    Javascript charting with YUI-Flot
Introduction   Future
                                 YUI-Flot   Things I learnt
                           Enlightenment    How to contribute


Javascript objects are passed by reference


Bad                                         Good
function fixData(d) {                       function fixData(d) {
   var i, l=d.length;                          var i, l=d.length;
                                               var d_c=[];
    for(i=0; i<l; i++) {                       for(i=0; i<l; i++) {
       d[i] = fix(d[i]);                          d_c[i] = fix(d[i]);
    }                                          }

    return d;                                      return d_c;
}                                           }




                FOSDEM 2010 / 2010-02-07    Javascript charting with YUI-Flot
Introduction   Future
                                             YUI-Flot   Things I learnt
                                       Enlightenment    How to contribute


There’s more to charts than drawing lines




     Understanding statistics helps
     Different visualisations for different types of data
     http://www.perceptualedge.com/articles/Whitepapers/Communicating_Numbers.pdf

     Charts need to summarise data visually
     You can plot more than two dimensions on a 2d canvas
     eg: Dot pitch in a scatter plot or error bars




                       FOSDEM 2010 / 2010-02-07         Javascript charting with YUI-Flot
Introduction      Future
                                      YUI-Flot      Things I learnt
                                Enlightenment       How to contribute


You can rotate HTML elements using CSS or SVG



   DIV.vertical {
      -moz-transform:rotate(270deg);             /* Gecko */

       -webkit-transform:rotate(270deg);         /* Webkit */

       writing-mode:tb-rl;                       /* IE */
       filter:flipV flipH;

       /* alternate for IE */
       filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
   }




                     FOSDEM 2010 / 2010-02-07       Javascript charting with YUI-Flot
Introduction   Future
                                YUI-Flot   Things I learnt
                          Enlightenment    How to contribute


Fork the project on github

      Fork the project on github
      Make your own changes (BSD Licensed)
      Tell me about them through a pull request
      This code is available to everyone




               FOSDEM 2010 / 2010-02-07    Javascript charting with YUI-Flot
Introduction   Future
                                  YUI-Flot   Things I learnt
                            Enlightenment    How to contribute


Sign the YUI CLA




     YUI CLA: You’re commiting legal code
     ie: You own the code, you haven’t stolen it, etc.
     This code can also get into the YUI gallery
     Available for use through the Yahoo! CDN




                 FOSDEM 2010 / 2010-02-07    Javascript charting with YUI-Flot
Introduction   Future
                 YUI-Flot   Things I learnt
           Enlightenment    How to contribute




               YUI-Flot
http://github.com/bluesmoon/yui-flot




FOSDEM 2010 / 2010-02-07    Javascript charting with YUI-Flot
Introduction
                              YUI-Flot
                        Enlightenment


Thanks, Merci, Bedankt, Danke Schön




     Jochen Maes & Philip Paeps
     Ole Laursen & IOLA
     Yahoo! Developer Network
     The YUI team




             FOSDEM 2010 / 2010-02-07    Javascript charting with YUI-Flot
Introduction
                                 YUI-Flot
                           Enlightenment


contact me



     Philip Tellis
     philip@bluesmoon.info
     tech.bluesmoon.info
     @bluesmoon
     yahoo
     geek




                FOSDEM 2010 / 2010-02-07    Javascript charting with YUI-Flot

More Related Content

More from Philip Tellis

Improving D3 Performance with CANVAS and other Hacks
Improving D3 Performance with CANVAS and other HacksImproving D3 Performance with CANVAS and other Hacks
Improving D3 Performance with CANVAS and other HacksPhilip Tellis
 
Frontend Performance: Beginner to Expert to Crazy Person
Frontend Performance: Beginner to Expert to Crazy PersonFrontend Performance: Beginner to Expert to Crazy Person
Frontend Performance: Beginner to Expert to Crazy PersonPhilip Tellis
 
Frontend Performance: De débutant à Expert à Fou Furieux
Frontend Performance: De débutant à Expert à Fou FurieuxFrontend Performance: De débutant à Expert à Fou Furieux
Frontend Performance: De débutant à Expert à Fou FurieuxPhilip Tellis
 
Frontend Performance: Expert to Crazy Person
Frontend Performance: Expert to Crazy PersonFrontend Performance: Expert to Crazy Person
Frontend Performance: Expert to Crazy PersonPhilip Tellis
 
Beyond Page Level Metrics
Beyond Page Level MetricsBeyond Page Level Metrics
Beyond Page Level MetricsPhilip Tellis
 
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf ...
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf ...Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf ...
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf ...Philip Tellis
 
Frontend Performance: Beginner to Expert to Crazy Person
Frontend Performance: Beginner to Expert to Crazy PersonFrontend Performance: Beginner to Expert to Crazy Person
Frontend Performance: Beginner to Expert to Crazy PersonPhilip Tellis
 
Frontend Performance: Beginner to Expert to Crazy Person
Frontend Performance: Beginner to Expert to Crazy PersonFrontend Performance: Beginner to Expert to Crazy Person
Frontend Performance: Beginner to Expert to Crazy PersonPhilip Tellis
 
Frontend Performance: Beginner to Expert to Crazy Person
Frontend Performance: Beginner to Expert to Crazy PersonFrontend Performance: Beginner to Expert to Crazy Person
Frontend Performance: Beginner to Expert to Crazy PersonPhilip Tellis
 
RUM Distillation 101 -- Part I
RUM Distillation 101 -- Part IRUM Distillation 101 -- Part I
RUM Distillation 101 -- Part IPhilip Tellis
 
Improving 3rd Party Script Performance With IFrames
Improving 3rd Party Script Performance With IFramesImproving 3rd Party Script Performance With IFrames
Improving 3rd Party Script Performance With IFramesPhilip Tellis
 
Abusing JavaScript to measure Web Performance, or, "how does boomerang work?"
Abusing JavaScript to measure Web Performance, or, "how does boomerang work?"Abusing JavaScript to measure Web Performance, or, "how does boomerang work?"
Abusing JavaScript to measure Web Performance, or, "how does boomerang work?"Philip Tellis
 
The Statistics of Web Performance Analysis
The Statistics of Web Performance AnalysisThe Statistics of Web Performance Analysis
The Statistics of Web Performance AnalysisPhilip Tellis
 
Abusing JavaScript to Measure Web Performance
Abusing JavaScript to Measure Web PerformanceAbusing JavaScript to Measure Web Performance
Abusing JavaScript to Measure Web PerformancePhilip Tellis
 
Analysing network characteristics with JavaScript
Analysing network characteristics with JavaScriptAnalysing network characteristics with JavaScript
Analysing network characteristics with JavaScriptPhilip Tellis
 
A Node.JS bag of goodies for analyzing Web Traffic
A Node.JS bag of goodies for analyzing Web TrafficA Node.JS bag of goodies for analyzing Web Traffic
A Node.JS bag of goodies for analyzing Web TrafficPhilip Tellis
 

More from Philip Tellis (20)

Improving D3 Performance with CANVAS and other Hacks
Improving D3 Performance with CANVAS and other HacksImproving D3 Performance with CANVAS and other Hacks
Improving D3 Performance with CANVAS and other Hacks
 
Frontend Performance: Beginner to Expert to Crazy Person
Frontend Performance: Beginner to Expert to Crazy PersonFrontend Performance: Beginner to Expert to Crazy Person
Frontend Performance: Beginner to Expert to Crazy Person
 
Frontend Performance: De débutant à Expert à Fou Furieux
Frontend Performance: De débutant à Expert à Fou FurieuxFrontend Performance: De débutant à Expert à Fou Furieux
Frontend Performance: De débutant à Expert à Fou Furieux
 
Frontend Performance: Expert to Crazy Person
Frontend Performance: Expert to Crazy PersonFrontend Performance: Expert to Crazy Person
Frontend Performance: Expert to Crazy Person
 
Beyond Page Level Metrics
Beyond Page Level MetricsBeyond Page Level Metrics
Beyond Page Level Metrics
 
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf ...
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf ...Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf ...
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf ...
 
Frontend Performance: Beginner to Expert to Crazy Person
Frontend Performance: Beginner to Expert to Crazy PersonFrontend Performance: Beginner to Expert to Crazy Person
Frontend Performance: Beginner to Expert to Crazy Person
 
Frontend Performance: Beginner to Expert to Crazy Person
Frontend Performance: Beginner to Expert to Crazy PersonFrontend Performance: Beginner to Expert to Crazy Person
Frontend Performance: Beginner to Expert to Crazy Person
 
Frontend Performance: Beginner to Expert to Crazy Person
Frontend Performance: Beginner to Expert to Crazy PersonFrontend Performance: Beginner to Expert to Crazy Person
Frontend Performance: Beginner to Expert to Crazy Person
 
mmm... beacons
mmm... beaconsmmm... beacons
mmm... beacons
 
RUM Distillation 101 -- Part I
RUM Distillation 101 -- Part IRUM Distillation 101 -- Part I
RUM Distillation 101 -- Part I
 
Improving 3rd Party Script Performance With IFrames
Improving 3rd Party Script Performance With IFramesImproving 3rd Party Script Performance With IFrames
Improving 3rd Party Script Performance With IFrames
 
Extending Boomerang
Extending BoomerangExtending Boomerang
Extending Boomerang
 
Abusing JavaScript to measure Web Performance, or, "how does boomerang work?"
Abusing JavaScript to measure Web Performance, or, "how does boomerang work?"Abusing JavaScript to measure Web Performance, or, "how does boomerang work?"
Abusing JavaScript to measure Web Performance, or, "how does boomerang work?"
 
The Statistics of Web Performance Analysis
The Statistics of Web Performance AnalysisThe Statistics of Web Performance Analysis
The Statistics of Web Performance Analysis
 
Abusing JavaScript to Measure Web Performance
Abusing JavaScript to Measure Web PerformanceAbusing JavaScript to Measure Web Performance
Abusing JavaScript to Measure Web Performance
 
Rum for Breakfast
Rum for BreakfastRum for Breakfast
Rum for Breakfast
 
Analysing network characteristics with JavaScript
Analysing network characteristics with JavaScriptAnalysing network characteristics with JavaScript
Analysing network characteristics with JavaScript
 
A Node.JS bag of goodies for analyzing Web Traffic
A Node.JS bag of goodies for analyzing Web TrafficA Node.JS bag of goodies for analyzing Web Traffic
A Node.JS bag of goodies for analyzing Web Traffic
 
Input sanitization
Input sanitizationInput sanitization
Input sanitization
 

Recently uploaded

Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 

Recently uploaded (20)

Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 

Javascript charting with YUI-Flot

  • 1. Introduction YUI-Flot Enlightenment Javascript charting with YUI-Flot Philip Tellis / philip@bluesmoon.info FOSDEM 2010 / 2010-02-07 FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 2. Introduction Who, what, why? YUI-Flot Charting on the web Enlightenment YUI-Flot $ finger philip Philip Tellis philip@bluesmoon.info tech.bluesmoon.info @bluesmoon yahoo geek FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 3. Introduction Who, what, why? YUI-Flot Charting on the web Enlightenment YUI-Flot What’s this talk all about? Charting options for web developers Javascript charting with YUI-Flot Things I learnt How you can contribute FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 4. Introduction Who, what, why? YUI-Flot Charting on the web Enlightenment YUI-Flot Why do we need charting on the web? There’s so much data on the web It’s easy for users to access your data over the web It’s a little more portable than emailing Excel spreadsheets FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 5. Introduction Who, what, why? YUI-Flot Charting on the web Enlightenment YUI-Flot Why do we need charting on the web? There’s so much data on the web It’s easy for users to access your data over the web It’s a little more portable than emailing Excel spreadsheets FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 6. Introduction Who, what, why? YUI-Flot Charting on the web Enlightenment YUI-Flot Why do we need charting on the web? There’s so much data on the web It’s easy for users to access your data over the web It’s a little more portable than emailing Excel spreadsheets FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 7. Introduction Who, what, why? YUI-Flot Charting on the web Enlightenment YUI-Flot Alternatives for charting on the web Static images generated on the server Flash based dynamic charts with lots of interactivity Javascript + Canvas based charts with some interactivity Progressively enhanced CSS only charts Non-semantic, HTML Table only charts (don’t do this) FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 8. Introduction Who, what, why? YUI-Flot Charting on the web Enlightenment YUI-Flot Image based charts Many charting libraries available Works on all browsers (kind of) Static images can be downloaded and pasted into a report Cannot interact with the data, or easily drill-down FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 9. Introduction Who, what, why? YUI-Flot Charting on the web Enlightenment YUI-Flot Flash based charts Quite pretty and flashy Works across most GUI based browsers (with a plugin) Does not work on the iPhone Grabs focus - still a problem on linux Fast, but JS-Flash bridge is slow Can progressively enhance a data table FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 10. Introduction Who, what, why? YUI-Flot Charting on the web Enlightenment YUI-Flot Javascript+Canvas based charts Easy for any Javascript developer to hack Based on Open standards Does not natively work with Internet Explorer Easy to integrate with other javascript libraries Can progressively enhance a data table FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 11. Introduction Who, what, why? YUI-Flot Charting on the web Enlightenment YUI-Flot CSS only charts http://icant.co.uk/csscharts/ Very simple code Data needs to be encoded twice Only vertical bar charts FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 12. Introduction Who, what, why? YUI-Flot Charting on the web Enlightenment YUI-Flot What is flot? A pure javascript charting library Uses the HTML Canvas tag for drawing Really smooth, and very pretty Uses excanvas to work on IE FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 13. Introduction Who, what, why? YUI-Flot Charting on the web Enlightenment YUI-Flot Why I like it Looks good – very important based on your target audience Good event model Fast at drawing and redrawing Ability to “zoom in” to sections of the data FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 14. Introduction Who, what, why? YUI-Flot Charting on the web Enlightenment YUI-Flot Why I ported it to YUI My Javascript library of choice is YUI My project required a charting widget Flash based charts caused me problems on linux Flot seems to have a good community around it Most important – I already knew and was using Javascript FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 15. Introduction What can it do? YUI-Flot How to use it? Enlightenment Differences from Flot Draw basic x/y scatter plots Random set of x,y points [[10, 20], [15, 13], [8, 32], [12, 7], [17, 19], [23, 8], [3, 5]] yui-examples/scatter.html FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 16. Introduction What can it do? YUI-Flot How to use it? Enlightenment Differences from Flot Series plots X-axis contains Date objects or timestamps Resolution is in seconds strftime formatting yui-examples/timeseries.html FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 17. Introduction What can it do? YUI-Flot How to use it? Enlightenment Differences from Flot Multiple series 3 series with a common X value Schema style data structure – out of a DB yui-examples/multiseries.html FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 18. Introduction What can it do? YUI-Flot How to use it? Enlightenment Differences from Flot Multiple series { x: 1, temp: 16, hg: 3, vol: 40 }, { x: 2, temp: 18, hg: 4, vol: 30 }, { x: 3, temp: 12, hg: 6, vol: 20 }, ... FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 19. Introduction What can it do? YUI-Flot How to use it? Enlightenment Differences from Flot 1. Include code into your HTML <div id="placeholder"></div> <!--[if IE]><script type="text/javascript" src="excanvas.min.js"></script><![endif]--> <script type="text/javascript" src="http://yui.yahooapis.com/combo ?2.7.0/build/yahoo-dom-event/yahoo-dom-event.js &2.7.0/build/datasource/datasource-min.js"> </script> <script type="text/javascript" src="yui.flot.js"></script> FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 20. Introduction What can it do? YUI-Flot How to use it? Enlightenment Differences from Flot 2. Get your data from somewhere var data = [ [10, 20], [15, 5], [8, 32], [13, 97] ]; FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 21. Introduction What can it do? YUI-Flot How to use it? Enlightenment Differences from Flot 3. Set your chart’s parameters var data = [ [10, 20], [15, 5], [8, 32], [13, 97] ]; var config = { lines: {show: true}, points: {show: true} }; FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 22. Introduction What can it do? YUI-Flot How to use it? Enlightenment Differences from Flot 4. Instantiate the chart var data = [ [10, 20], [15, 5], [8, 32], [13, 97] ]; var config = { lines: {show: true}, points: {show: true} }; YAHOO.widget.Flot("placeholder", [data], config); FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 23. Introduction What can it do? YUI-Flot How to use it? Enlightenment Differences from Flot Flot => YUI-Flot Based off flot 0.5, flot is now at 0.6 Added log scales for all axes (also in Flot 0.6) Allow more than two axes in each direction Add axis labels Drop points to make plot more readable Use tabs instead of spaces for indentation FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 24. Introduction What can it do? YUI-Flot How to use it? Enlightenment Differences from Flot Timeseries changes Accepts Date objects as values for a timeseries timestamps are in seconds and not in milliseconds Full strftime based date formatter locale support for time series FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 25. Introduction Future YUI-Flot Things I learnt Enlightenment How to contribute Move up to flot 0.6 I like the plugin model in flot 0.6 The thresholds feature is great Stacked bars are useful Stepped line charts are useful FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 26. Introduction Future YUI-Flot Things I learnt Enlightenment How to contribute More additions Add error bars & candlesticks Pie charts Add a smoothing plugin (local regression) Upgrade to YUI 3 Move it into the YUI gallery FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 27. Introduction Future YUI-Flot Things I learnt Enlightenment How to contribute Javascript objects are passed by reference Bad Good function fixData(d) { function fixData(d) { var i, l=d.length; var i, l=d.length; var d_c=[]; for(i=0; i<l; i++) { for(i=0; i<l; i++) { d[i] = fix(d[i]); d_c[i] = fix(d[i]); } } return d; return d_c; } } FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 28. Introduction Future YUI-Flot Things I learnt Enlightenment How to contribute There’s more to charts than drawing lines Understanding statistics helps Different visualisations for different types of data http://www.perceptualedge.com/articles/Whitepapers/Communicating_Numbers.pdf Charts need to summarise data visually You can plot more than two dimensions on a 2d canvas eg: Dot pitch in a scatter plot or error bars FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 29. Introduction Future YUI-Flot Things I learnt Enlightenment How to contribute You can rotate HTML elements using CSS or SVG DIV.vertical { -moz-transform:rotate(270deg); /* Gecko */ -webkit-transform:rotate(270deg); /* Webkit */ writing-mode:tb-rl; /* IE */ filter:flipV flipH; /* alternate for IE */ filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3); } FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 30. Introduction Future YUI-Flot Things I learnt Enlightenment How to contribute Fork the project on github Fork the project on github Make your own changes (BSD Licensed) Tell me about them through a pull request This code is available to everyone FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 31. Introduction Future YUI-Flot Things I learnt Enlightenment How to contribute Sign the YUI CLA YUI CLA: You’re commiting legal code ie: You own the code, you haven’t stolen it, etc. This code can also get into the YUI gallery Available for use through the Yahoo! CDN FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 32. Introduction Future YUI-Flot Things I learnt Enlightenment How to contribute YUI-Flot http://github.com/bluesmoon/yui-flot FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 33. Introduction YUI-Flot Enlightenment Thanks, Merci, Bedankt, Danke Schön Jochen Maes & Philip Paeps Ole Laursen & IOLA Yahoo! Developer Network The YUI team FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot
  • 34. Introduction YUI-Flot Enlightenment contact me Philip Tellis philip@bluesmoon.info tech.bluesmoon.info @bluesmoon yahoo geek FOSDEM 2010 / 2010-02-07 Javascript charting with YUI-Flot