SlideShare a Scribd company logo
1 of 49
Download to read offline
Charting with
                    Google

Thursday, March 24, 2011
http://bit.ly/googlechartlinks
                    Follow along with a list of all the links mentioned




Thursday, March 24, 2011
Russell Heimlich (Like the Maneuver)
          ★ Sole Developer at the
                  Pew Research Center

          ★ 3 Years at U.S.News
                  & World Report

          ★ Creator of
                  Dummyimage.com

          ★ Left handed!

Thursday, March 24, 2011
How Can Google Help Us Make Charts?
          ★ DataTable Object
          ★ Interactive Charts
                  (Visualization API)

          ★ Image Charts
                  (Chart API)




Thursday, March 24, 2011
Getting Started
                                  You have to start somewhere...




                           http://www.flickr.com/photos/npobre/2601582256/


Thursday, March 24, 2011
Load Some Libraries
           <!--Load the AJAX API-->
           <script src="http://www.google.com/jsapi"></script>


           <script type="text/javascript">
           // Load the Visualization API and the piechart package.
           google.load('visualization', '1', {'packages':['corechart']});

               
           // Set a callback to run when everything is loaded.
           google.setOnLoadCallback(drawChart);

           function drawChart() {
              // MAGIC!
           }
           </script>

Thursday, March 24, 2011
DataTable Object
                            Like a database in JavaScript




Thursday, March 24, 2011
What is a DataTable?
          ★ Representation of your data in JavaScript
          ★ Query just like SQL
          ★ Sortable, Filterable, Cloneable, Manipulatable
          ★ Easy to pass along to different visualizations




Thursday, March 24, 2011
Making a DataTable
           var data = new google.visualization.DataTable();

           data.addColumn('string', 'Task');
           data.addColumn('number', 'Hours');

           data.addRows([
             ['Work', 11],
             ['Eat', 1],
             ['Commute', 2],
             ['Watch TV', 3]
           ]);




Thursday, March 24, 2011
More Ways To Populate Data
           // Create and populate the data table.
             var data = new google.visualization.DataTable();
             data.addColumn('string', 'Task');
             data.addColumn('number', 'Hours per Day');
             
              data.addRows(4);
             
              data.setValue(0, 0, 'Work'); //row index, cell index, value
             data.setValue(0, 1, 11);
             data.setValue(1, 0, 'Eat');
             data.setValue(1, 1, 1);
             data.setValue(2, 0, 'Commute');
             data.setValue(2, 1, 2);
             data.setValue(3, 0, 'Watch TV');
             data.setValue(3, 1, 3);



Thursday, March 24, 2011
Which Looks Like This

                            Task         Hours
                             Work          11


                             Eat           1


                           Commute         2


                           Watch TV        3


Thursday, March 24, 2011
DataViews
          ★ Subset of data from a DataTable
          ★ Remove or duplicate rows or columns
          ★ Original DataTable stays intact
          ★ Live view of the underlying data, not a copy




Thursday, March 24, 2011
Making A DataView
           var view = new google.visualization.DataView(data);

           view.setRows(
              view.getFilteredRows([{
                  column:1,
                  maxValue:5
              }])
           );




Thursday, March 24, 2011
Our DataView Now Looks Like This

                            Task        Hours

                             Eat           1


                           Commute         2


                           Watch TV        3


Thursday, March 24, 2011
Building Interactive Charts
                           Getting Nitty Gritty




Thursday, March 24, 2011
Let’s Make A Pie Chart
            // Create and draw the visualization.
           var target = document.getElementById('visualization');
           new google.visualization.PieChart(target).draw(
              view,
              {title: ‘So, how was your day?’}
           );




Thursday, March 24, 2011
And Play With Different Properties
           new google.visualization.PieChart(target).draw(
              view,
              {
                title: ‘So, how was your day?’,
                is3D: true,
                colors: ['#0099ff', '#00ff99', '#9900ff']
              }
           );




Thursday, March 24, 2011
Putting It All Together: Music Age Demo
          ★ Scrape data from an
                  HTML table and put it
                  into a DataTable

          ★ Dynamically create a
                  legend for choosing
                  what to graph

          ★ Make line graphs and
                  bar charts from
                  selected data points
Thursday, March 24, 2011
Table Scrapin’ Fun
           var tableHeaders = $('table th');
           var tableData = $('table tbody tr');
           data = new google.visualization.DataTable();

           for (i=0; i<tableHeaders.length; i++) {
                var cell = tableHeaders[i].innerHTML;
                var cellType = 'number';
                if (i==0) {
                   cellType = 'string';
                }
                data.addColumn(cellType, cell);
           }




Thursday, March 24, 2011
More Table Scrapin’ Fun
           for (i=0; i<tableData.length; i++) {
                var row = $(tableData[i]).children();
                var rowData = new Array();
                for (j=0; j<row.length; j++) {
                   var cell = row[j].innerHTML;
                   if (!cell.match(/[a-zA-Z_.-?!+]/)) {
                       cell = Number(cell)
                   }
                   rowData.push(cell);
                }
                data.addRow(rowData);
           }




Thursday, March 24, 2011
Preppin’ The View
           var artists = $('#legend li');
           var selectedArtists = [0];

           $('table .on').removeClass('on');
           $('table tr').children(':nth-child(1)').addClass('on');

           for (i=0; i<artists.length; i++) {
                if (!$(artists[i]).hasClass('off')) {
                   selectedArtists.push(i+1);
                   $('table tr').children(
                       ':nth-child('+ (i+2) +')'
                    ).addClass('on');
                }
           }

           var view = new google.visualization.DataView(data);
           view.setColumns(selectedArtists);
Thursday, March 24, 2011
Drawin’ The Line Chart
           $('#line').html('');
           var lineChart = new google.visualization.LineChart(
              document.getElementById('line')
           );

           lineChart.draw(view, {
               width: 500,
               height: 350,
               enableTooltip: true,
               showCategories: true,
               legend: 'none',
               max: 75,
               pointSize: 5
           });




Thursday, March 24, 2011
Drawin’ The Bar Chart
           $('#bar').html('');
           var chart = new google.visualization.ColumnChart(
              document.getElementById('bar')
           );

           chart.draw(view, {
               width: 500,
               height: 350,
               enableTooltip: true,
               showCategories: true,
               legend: 'none',
               max: 75,
               is3D: true
           });




Thursday, March 24, 2011
Constructing Static Charts
                           Time to put your thinking cap on




Thursday, March 24, 2011
What is the Google Chart API?
           “The Google Chart API lets you dynamically
           generate charts with a URL string. You can embed
           these charts on your web page, or download the
           image for local or offline use.”


           –– Google Chart Documentation




Thursday, March 24, 2011
Build a URL,
                           Get a Chart

Thursday, March 24, 2011
What types of charts can you make?




Thursday, March 24, 2011
Every Chart Starts With A URL
           http://chart.googleapis.com/chart?



           Parameters come after the question mark
           separated by ampersands (&)


           The order of parameters doesn’t matter




Thursday, March 24, 2011
Requires 3 Things
          ★ Chart Type (cht=<chart type>)
          ★ Chart Size (chs=<width>x<height>)
          ★ Data (chd=<data string>)



          ★ http://chart.googleapis.com/chart?
                  cht=p3&chs=250x100&chd=t:60,40


Thursday, March 24, 2011
Data Formats
          ★ Basic Text Format (chd=t:)
          ★ Simple Encoding (chd=s:)
          ★ Extended Encoding (chd=e:)


          ★ Some formats use less characters than others.




Thursday, March 24, 2011
Basic Text Data Format
          ★ Floating Point Values From 0-100
          ★ Values less than 0 are considered NULL
          ★ Values higher than 100 are truncated to 100
          ★ What you see is what you get
          ★ Ideal for smaller datasets
          ★ Produces the largest number of characters



Thursday, March 24, 2011
Basic Text Data Example
          ★ chd=t:_30,-30,50,80,200




Thursday, March 24, 2011
Simple Encoding Data Format
          ★ Integer values 0-61
          ★ Relative Scaling
          ★ Low Granularity
          ★ Each value encoded as a single alphanumeric
                  character
          ★ Produces the smallest number of characters



Thursday, March 24, 2011
Simple Encoding Function
           var simpleEncoding =
           'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'

           //Scales submitted values so that maxVal becomes the highest.
           function simpleEncode(valueArray, maxValue) {
               var chartData = ['s:'];
               for (var i = 0; i < valueArray.length; i++) {
                 var currentValue = valueArray[i];
                 if (!isNaN(currentValue) && currentValue >= 0) {
                   chartData.push(simpleEncoding.charAt(
                   Math.round((simpleEncoding.length-1) *
                   currentValue / maxValue))
                 ); }
                 else { chartData.push('_'); }
               }
               return chartData.join('');
           }
Thursday, March 24, 2011
Simple Encoding Example
          ★ chd=t:1,19,27,53,61,-1|12,39,57,45,51,27
          ★ chd=s:BTb19_,Mn5tzb




Thursday, March 24, 2011
Extended Data Format
          ★ Integer values 0-4095
          ★ Relative scaling
          ★ High Granularity
          ★ Each value encoded as
                  two alphanumeric characters




Thursday, March 24, 2011
Extended Encoding Function
           Similar to Simple Encoding Function
           but too big to show here.


           Grab it at
           http://code.google.com/apis/chart/docs/
           data_formats.html#encoding_data




Thursday, March 24, 2011
Extended Encoding Example
          ★ chd=t:90,1000,2700,3500|3968,-1,1100,250
          ★ chd=e:BaPoqM2s,-A__RMD6




Thursday, March 24, 2011
Data Scaling
          ★ chds=<min-value>, <max-value>
          ★ Related to the data format you use!




Thursday, March 24, 2011
Axis Scaling
          ★ chxr=<axis_index>,<start_val>,<end_val>,
                  <opt_step>


          ★ Axis labels are not calculated to reflect chart
                  data automatically! (We do that ourselves)


          ★ If you’re data is 0-100, then you’re good!

Thursday, March 24, 2011
Axis Scaling Example




Thursday, March 24, 2011
Year In The News Interactive
          ★ Load a bunch of data
                  into a DataTable

          ★ User selects which
                  data points they want
                  to see

          ★ Render a series of
                  static Google Charts

          ★ Shareable Charts
Thursday, March 24, 2011
Official Documentation
          ★ DataTable & DataView Docs
          ★ Google Visualization API
          ★ Google Charts API




Thursday, March 24, 2011
Chart Tools
          ★ Chart Wizard
                  Easy Interface for Building Charts


          ★ Live Chart Playground
                  Easy way to edit parameters


          ★ Google Code Playground
                  Online Charting Development Environment
Thursday, March 24, 2011
More Links
          ★ Easy Graphs with Google Chart Tools|Nettuts+


          ★ jQuery Google Chart Plugin


          ★ List of Google Chart Wrappers


          ★ Animating Static Google Charts

Thursday, March 24, 2011
Sharing Is Caring
          ★ Grab everything from this presentation via SVN
                  http://svn.kingkool68.com/projects/google-
                  charting-api/


          ★ List of Links Mentioned


          ★ Stay in Touch @kingkool68 or Facebook or
                  shoot me an e-mail
Thursday, March 24, 2011
And
                     Remember...

Thursday, March 24, 2011
Play and Have Fun!
                              It’s the only way to learn.




Thursday, March 24, 2011
Thank You!
                           Please say hi to me later,
                             share your thoughts,
                              and ask questions.




Thursday, March 24, 2011

More Related Content

What's hot

ヘルスケアサービスを実現する最新技術 〜HealthKit・GCP + Goの活用〜
ヘルスケアサービスを実現する最新技術  〜HealthKit・GCP + Goの活用〜ヘルスケアサービスを実現する最新技術  〜HealthKit・GCP + Goの活用〜
ヘルスケアサービスを実現する最新技術 〜HealthKit・GCP + Goの活用〜
DeNA
 

What's hot (18)

ASP.Net 3.5 SP1 Dynamic Data
ASP.Net 3.5 SP1 Dynamic DataASP.Net 3.5 SP1 Dynamic Data
ASP.Net 3.5 SP1 Dynamic Data
 
Visualizing your Data Natively on the HPCC Systems Platform with the “Visuali...
Visualizing your Data Natively on the HPCC Systems Platform with the “Visuali...Visualizing your Data Natively on the HPCC Systems Platform with the “Visuali...
Visualizing your Data Natively on the HPCC Systems Platform with the “Visuali...
 
Cubes - Lightweight Python OLAP (EuroPython 2012 talk)
Cubes - Lightweight Python OLAP (EuroPython 2012 talk)Cubes - Lightweight Python OLAP (EuroPython 2012 talk)
Cubes - Lightweight Python OLAP (EuroPython 2012 talk)
 
Cph Scala meetup 14.10.2021
Cph Scala meetup 14.10.2021Cph Scala meetup 14.10.2021
Cph Scala meetup 14.10.2021
 
ヘルスケアサービスを実現する最新技術 〜HealthKit・GCP + Goの活用〜
ヘルスケアサービスを実現する最新技術  〜HealthKit・GCP + Goの活用〜ヘルスケアサービスを実現する最新技術  〜HealthKit・GCP + Goの活用〜
ヘルスケアサービスを実現する最新技術 〜HealthKit・GCP + Goの活用〜
 
DN 2017 | Multi-Paradigm Data Science - On the many dimensions of Knowledge D...
DN 2017 | Multi-Paradigm Data Science - On the many dimensions of Knowledge D...DN 2017 | Multi-Paradigm Data Science - On the many dimensions of Knowledge D...
DN 2017 | Multi-Paradigm Data Science - On the many dimensions of Knowledge D...
 
Android Sample Project By Wael Almadhoun
Android Sample Project By Wael AlmadhounAndroid Sample Project By Wael Almadhoun
Android Sample Project By Wael Almadhoun
 
DN 2017 | Reducing pain in data engineering | Martin Loetzsch | Project A
DN 2017 | Reducing pain in data engineering | Martin Loetzsch | Project ADN 2017 | Reducing pain in data engineering | Martin Loetzsch | Project A
DN 2017 | Reducing pain in data engineering | Martin Loetzsch | Project A
 
Webinar: Applikationsentwicklung mit MongoDB : Teil 5: Reporting & Aggregation
Webinar: Applikationsentwicklung mit MongoDB: Teil 5: Reporting & AggregationWebinar: Applikationsentwicklung mit MongoDB: Teil 5: Reporting & Aggregation
Webinar: Applikationsentwicklung mit MongoDB : Teil 5: Reporting & Aggregation
 
The D3 Toolbox
The D3 ToolboxThe D3 Toolbox
The D3 Toolbox
 
Developing an Expression Language for Quantitative Financial Modeling
Developing an Expression Language for Quantitative Financial ModelingDeveloping an Expression Language for Quantitative Financial Modeling
Developing an Expression Language for Quantitative Financial Modeling
 
D3.js 30-minute intro
D3.js   30-minute introD3.js   30-minute intro
D3.js 30-minute intro
 
ヘルスケアサービスを実現する最新技術
〜HealthKit・GCP+Go〜
ヘルスケアサービスを実現する最新技術
〜HealthKit・GCP+Go〜ヘルスケアサービスを実現する最新技術
〜HealthKit・GCP+Go〜
ヘルスケアサービスを実現する最新技術
〜HealthKit・GCP+Go〜
 
Viewpic
ViewpicViewpic
Viewpic
 
Accessing data with android cursors
Accessing data with android cursorsAccessing data with android cursors
Accessing data with android cursors
 
Visdjango presentation django_boston_oct_2014
Visdjango presentation django_boston_oct_2014Visdjango presentation django_boston_oct_2014
Visdjango presentation django_boston_oct_2014
 
Sap bo 4.2 course content (1)
Sap bo 4.2 course content (1)Sap bo 4.2 course content (1)
Sap bo 4.2 course content (1)
 
Booklab
BooklabBooklab
Booklab
 

Viewers also liked

!(How to Kill MySQL Performance)
!(How to Kill MySQL Performance)!(How to Kill MySQL Performance)
!(How to Kill MySQL Performance)
Vishnu Agarwal
 

Viewers also liked (8)

Integrating Google APIs into Your Applications
Integrating Google APIs into Your ApplicationsIntegrating Google APIs into Your Applications
Integrating Google APIs into Your Applications
 
!(How to Kill MySQL Performance)
!(How to Kill MySQL Performance)!(How to Kill MySQL Performance)
!(How to Kill MySQL Performance)
 
You Don't Know Query - WordCamp Portland 2011
You Don't Know Query - WordCamp Portland 2011You Don't Know Query - WordCamp Portland 2011
You Don't Know Query - WordCamp Portland 2011
 
Making Symofny shine with Varnish - SymfonyCon Madrid 2014
Making Symofny shine with Varnish - SymfonyCon Madrid 2014Making Symofny shine with Varnish - SymfonyCon Madrid 2014
Making Symofny shine with Varnish - SymfonyCon Madrid 2014
 
Google charts
Google chartsGoogle charts
Google charts
 
Veracity Embracing Uncertainty
Veracity Embracing UncertaintyVeracity Embracing Uncertainty
Veracity Embracing Uncertainty
 
Effective Doctrine2: Performance Tips for Symfony2 Developers
Effective Doctrine2: Performance Tips for Symfony2 DevelopersEffective Doctrine2: Performance Tips for Symfony2 Developers
Effective Doctrine2: Performance Tips for Symfony2 Developers
 
Subversion - Utilisation et bonnes pratiques
Subversion - Utilisation et bonnes pratiquesSubversion - Utilisation et bonnes pratiques
Subversion - Utilisation et bonnes pratiques
 

Similar to Charting with Google

EclipseCon2011 Cross-Platform Mobile Development with Eclipse
EclipseCon2011 Cross-Platform Mobile Development with EclipseEclipseCon2011 Cross-Platform Mobile Development with Eclipse
EclipseCon2011 Cross-Platform Mobile Development with Eclipse
Heiko Behrens
 
01 data modeling-and-er-diagrams
01 data modeling-and-er-diagrams01 data modeling-and-er-diagrams
01 data modeling-and-er-diagrams
glubox
 
See sql server graphical execution plans in action tech republic
See sql server graphical execution plans in action   tech republicSee sql server graphical execution plans in action   tech republic
See sql server graphical execution plans in action tech republic
Kaing Menglieng
 
Rich Internet Applications con JavaFX e NetBeans
Rich Internet Applications  con JavaFX e NetBeans Rich Internet Applications  con JavaFX e NetBeans
Rich Internet Applications con JavaFX e NetBeans
Fabrizio Giudici
 
mobl presentation @ IHomer
mobl presentation @ IHomermobl presentation @ IHomer
mobl presentation @ IHomer
zefhemel
 

Similar to Charting with Google (20)

M.TECH 1ST SEM COMPUTER SCIENCE ADBMS LAB PROGRAMS
M.TECH 1ST SEM COMPUTER SCIENCE ADBMS LAB PROGRAMSM.TECH 1ST SEM COMPUTER SCIENCE ADBMS LAB PROGRAMS
M.TECH 1ST SEM COMPUTER SCIENCE ADBMS LAB PROGRAMS
 
Move your data (Hans Rosling style) with googleVis + 1 line of R code
Move your data (Hans Rosling style) with googleVis + 1 line of R codeMove your data (Hans Rosling style) with googleVis + 1 line of R code
Move your data (Hans Rosling style) with googleVis + 1 line of R code
 
Hidden Treasures of the Python Standard Library
Hidden Treasures of the Python Standard LibraryHidden Treasures of the Python Standard Library
Hidden Treasures of the Python Standard Library
 
Accessing data with android cursors
Accessing data with android cursorsAccessing data with android cursors
Accessing data with android cursors
 
EclipseCon2011 Cross-Platform Mobile Development with Eclipse
EclipseCon2011 Cross-Platform Mobile Development with EclipseEclipseCon2011 Cross-Platform Mobile Development with Eclipse
EclipseCon2011 Cross-Platform Mobile Development with Eclipse
 
Data visualization by Kenneth Odoh
Data visualization by Kenneth OdohData visualization by Kenneth Odoh
Data visualization by Kenneth Odoh
 
A la découverte de TypeScript
A la découverte de TypeScriptA la découverte de TypeScript
A la découverte de TypeScript
 
01 data modeling-and-er-diagrams
01 data modeling-and-er-diagrams01 data modeling-and-er-diagrams
01 data modeling-and-er-diagrams
 
See sql server graphical execution plans in action tech republic
See sql server graphical execution plans in action   tech republicSee sql server graphical execution plans in action   tech republic
See sql server graphical execution plans in action tech republic
 
Rich Internet Applications con JavaFX e NetBeans
Rich Internet Applications  con JavaFX e NetBeans Rich Internet Applications  con JavaFX e NetBeans
Rich Internet Applications con JavaFX e NetBeans
 
Interacting with Accumulo and Graphulo using Julia/Python D4M
Interacting with Accumulo and Graphulo using Julia/Python D4MInteracting with Accumulo and Graphulo using Julia/Python D4M
Interacting with Accumulo and Graphulo using Julia/Python D4M
 
Java 103
Java 103Java 103
Java 103
 
Collections Framework Beginners Guide 2
Collections Framework Beginners Guide 2Collections Framework Beginners Guide 2
Collections Framework Beginners Guide 2
 
Collections Framework Begineers guide 2
Collections Framework Begineers guide 2Collections Framework Begineers guide 2
Collections Framework Begineers guide 2
 
Robotlegs Introduction
Robotlegs IntroductionRobotlegs Introduction
Robotlegs Introduction
 
mobl presentation @ IHomer
mobl presentation @ IHomermobl presentation @ IHomer
mobl presentation @ IHomer
 
Charting & Data Visualization in Ext GWT 3.0
Charting & Data Visualization in Ext GWT 3.0Charting & Data Visualization in Ext GWT 3.0
Charting & Data Visualization in Ext GWT 3.0
 
Data visualization in python/Django
Data visualization in python/DjangoData visualization in python/Django
Data visualization in python/Django
 
jQuery Rescue Adventure
jQuery Rescue AdventurejQuery Rescue Adventure
jQuery Rescue Adventure
 
JavaScript for Flex Devs
JavaScript for Flex DevsJavaScript for Flex Devs
JavaScript for Flex Devs
 

More from Russell Heimlich (6)

Cache Rules Everything Around Me
Cache Rules Everything Around MeCache Rules Everything Around Me
Cache Rules Everything Around Me
 
stickyHeader.js
stickyHeader.jsstickyHeader.js
stickyHeader.js
 
Analytics And You
Analytics And YouAnalytics And You
Analytics And You
 
Video Captioning on the Web
Video Captioning on the WebVideo Captioning on the Web
Video Captioning on the Web
 
Accessibility Lightning Talk
Accessibility Lightning TalkAccessibility Lightning Talk
Accessibility Lightning Talk
 
Building An Accessible Site from the Ground Up
Building An Accessible Site from the Ground UpBuilding An Accessible Site from the Ground Up
Building An Accessible Site from the Ground Up
 

Recently uploaded

如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjjWeek 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
joshuaclack73
 
挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质
yzeoq
 
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
ugzga
 
NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...
NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...
NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...
Amil baba
 
一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理
cyebo
 
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...
JIT KUMAR GUPTA
 

Recently uploaded (20)

Week of Action 2022_EIT Climate-KIC_Headers
Week of Action 2022_EIT Climate-KIC_HeadersWeek of Action 2022_EIT Climate-KIC_Headers
Week of Action 2022_EIT Climate-KIC_Headers
 
Avoid these common UI/UX design mistakes
 Avoid these common UI/UX design mistakes Avoid these common UI/UX design mistakes
Avoid these common UI/UX design mistakes
 
如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证
 
Naer VR: Advanced Research and Usability Testing Project
Naer VR: Advanced Research and Usability Testing ProjectNaer VR: Advanced Research and Usability Testing Project
Naer VR: Advanced Research and Usability Testing Project
 
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjjWeek 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
Week 11 Mini-Tasks.pptxjjjjjjjjjjjjjjjjjjjj
 
挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质挂科办理天主教大学毕业证成绩单一模一样品质
挂科办理天主教大学毕业证成绩单一模一样品质
 
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
 
The Journey of Fashion Designer Sketches - From Concept to Catwalk
The Journey of Fashion Designer Sketches - From Concept to CatwalkThe Journey of Fashion Designer Sketches - From Concept to Catwalk
The Journey of Fashion Designer Sketches - From Concept to Catwalk
 
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(RUG毕业证书)格罗宁根大学毕业证成绩单本科硕士学位证留信学历认证
 
NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...
NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...
NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...
 
FW25-26 Fashion Key Items Trend Book Peclers Paris
FW25-26 Fashion Key Items Trend Book Peclers ParisFW25-26 Fashion Key Items Trend Book Peclers Paris
FW25-26 Fashion Key Items Trend Book Peclers Paris
 
一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理
 
And that's about to change! (Service Design Drinks Berlin May 2024)
And that's about to change! (Service Design Drinks Berlin May 2024)And that's about to change! (Service Design Drinks Berlin May 2024)
And that's about to change! (Service Design Drinks Berlin May 2024)
 
BIT Khushi gandhi project.pdf graphic design
BIT Khushi gandhi project.pdf graphic designBIT Khushi gandhi project.pdf graphic design
BIT Khushi gandhi project.pdf graphic design
 
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...
 
The Impact of Artificial Intelligence on Modern Healthcare.pptx
The Impact of Artificial Intelligence on Modern Healthcare.pptxThe Impact of Artificial Intelligence on Modern Healthcare.pptx
The Impact of Artificial Intelligence on Modern Healthcare.pptx
 
Design Portofolios - Licensed Architect / BIM Specialist
Design Portofolios - Licensed Architect / BIM SpecialistDesign Portofolios - Licensed Architect / BIM Specialist
Design Portofolios - Licensed Architect / BIM Specialist
 
Explaining the Hidden Treasures of Modern Bathroom Design — freixadesign.pdf
Explaining the Hidden Treasures of Modern Bathroom Design — freixadesign.pdfExplaining the Hidden Treasures of Modern Bathroom Design — freixadesign.pdf
Explaining the Hidden Treasures of Modern Bathroom Design — freixadesign.pdf
 
Abdulaziz Tariq Abdulaziz Mustafa CV 2024
Abdulaziz Tariq Abdulaziz Mustafa CV 2024Abdulaziz Tariq Abdulaziz Mustafa CV 2024
Abdulaziz Tariq Abdulaziz Mustafa CV 2024
 
Levi's Advertisement and camapign design
Levi's Advertisement and camapign designLevi's Advertisement and camapign design
Levi's Advertisement and camapign design
 

Charting with Google

  • 1. Charting with Google Thursday, March 24, 2011
  • 2. http://bit.ly/googlechartlinks Follow along with a list of all the links mentioned Thursday, March 24, 2011
  • 3. Russell Heimlich (Like the Maneuver) ★ Sole Developer at the Pew Research Center ★ 3 Years at U.S.News & World Report ★ Creator of Dummyimage.com ★ Left handed! Thursday, March 24, 2011
  • 4. How Can Google Help Us Make Charts? ★ DataTable Object ★ Interactive Charts (Visualization API) ★ Image Charts (Chart API) Thursday, March 24, 2011
  • 5. Getting Started You have to start somewhere... http://www.flickr.com/photos/npobre/2601582256/ Thursday, March 24, 2011
  • 6. Load Some Libraries <!--Load the AJAX API--> <script src="http://www.google.com/jsapi"></script> <script type="text/javascript"> // Load the Visualization API and the piechart package. google.load('visualization', '1', {'packages':['corechart']});     // Set a callback to run when everything is loaded. google.setOnLoadCallback(drawChart); function drawChart() { // MAGIC! } </script> Thursday, March 24, 2011
  • 7. DataTable Object Like a database in JavaScript Thursday, March 24, 2011
  • 8. What is a DataTable? ★ Representation of your data in JavaScript ★ Query just like SQL ★ Sortable, Filterable, Cloneable, Manipulatable ★ Easy to pass along to different visualizations Thursday, March 24, 2011
  • 9. Making a DataTable var data = new google.visualization.DataTable(); data.addColumn('string', 'Task'); data.addColumn('number', 'Hours'); data.addRows([ ['Work', 11], ['Eat', 1], ['Commute', 2], ['Watch TV', 3] ]); Thursday, March 24, 2011
  • 10. More Ways To Populate Data // Create and populate the data table.   var data = new google.visualization.DataTable();   data.addColumn('string', 'Task');   data.addColumn('number', 'Hours per Day');    data.addRows(4);    data.setValue(0, 0, 'Work'); //row index, cell index, value   data.setValue(0, 1, 11);   data.setValue(1, 0, 'Eat');   data.setValue(1, 1, 1);   data.setValue(2, 0, 'Commute');   data.setValue(2, 1, 2);   data.setValue(3, 0, 'Watch TV');   data.setValue(3, 1, 3); Thursday, March 24, 2011
  • 11. Which Looks Like This Task Hours Work 11 Eat 1 Commute 2 Watch TV 3 Thursday, March 24, 2011
  • 12. DataViews ★ Subset of data from a DataTable ★ Remove or duplicate rows or columns ★ Original DataTable stays intact ★ Live view of the underlying data, not a copy Thursday, March 24, 2011
  • 13. Making A DataView var view = new google.visualization.DataView(data); view.setRows( view.getFilteredRows([{ column:1, maxValue:5 }]) ); Thursday, March 24, 2011
  • 14. Our DataView Now Looks Like This Task Hours Eat 1 Commute 2 Watch TV 3 Thursday, March 24, 2011
  • 15. Building Interactive Charts Getting Nitty Gritty Thursday, March 24, 2011
  • 16. Let’s Make A Pie Chart  // Create and draw the visualization. var target = document.getElementById('visualization'); new google.visualization.PieChart(target).draw( view, {title: ‘So, how was your day?’} ); Thursday, March 24, 2011
  • 17. And Play With Different Properties new google.visualization.PieChart(target).draw( view, { title: ‘So, how was your day?’, is3D: true, colors: ['#0099ff', '#00ff99', '#9900ff'] } ); Thursday, March 24, 2011
  • 18. Putting It All Together: Music Age Demo ★ Scrape data from an HTML table and put it into a DataTable ★ Dynamically create a legend for choosing what to graph ★ Make line graphs and bar charts from selected data points Thursday, March 24, 2011
  • 19. Table Scrapin’ Fun var tableHeaders = $('table th'); var tableData = $('table tbody tr'); data = new google.visualization.DataTable(); for (i=0; i<tableHeaders.length; i++) { var cell = tableHeaders[i].innerHTML; var cellType = 'number'; if (i==0) { cellType = 'string'; } data.addColumn(cellType, cell); } Thursday, March 24, 2011
  • 20. More Table Scrapin’ Fun for (i=0; i<tableData.length; i++) { var row = $(tableData[i]).children(); var rowData = new Array(); for (j=0; j<row.length; j++) { var cell = row[j].innerHTML; if (!cell.match(/[a-zA-Z_.-?!+]/)) { cell = Number(cell) } rowData.push(cell); } data.addRow(rowData); } Thursday, March 24, 2011
  • 21. Preppin’ The View var artists = $('#legend li'); var selectedArtists = [0]; $('table .on').removeClass('on'); $('table tr').children(':nth-child(1)').addClass('on'); for (i=0; i<artists.length; i++) { if (!$(artists[i]).hasClass('off')) { selectedArtists.push(i+1); $('table tr').children( ':nth-child('+ (i+2) +')' ).addClass('on'); } } var view = new google.visualization.DataView(data); view.setColumns(selectedArtists); Thursday, March 24, 2011
  • 22. Drawin’ The Line Chart $('#line').html(''); var lineChart = new google.visualization.LineChart( document.getElementById('line') ); lineChart.draw(view, { width: 500, height: 350, enableTooltip: true, showCategories: true, legend: 'none', max: 75, pointSize: 5 }); Thursday, March 24, 2011
  • 23. Drawin’ The Bar Chart $('#bar').html(''); var chart = new google.visualization.ColumnChart( document.getElementById('bar') ); chart.draw(view, { width: 500, height: 350, enableTooltip: true, showCategories: true, legend: 'none', max: 75, is3D: true }); Thursday, March 24, 2011
  • 24. Constructing Static Charts Time to put your thinking cap on Thursday, March 24, 2011
  • 25. What is the Google Chart API? “The Google Chart API lets you dynamically generate charts with a URL string. You can embed these charts on your web page, or download the image for local or offline use.” –– Google Chart Documentation Thursday, March 24, 2011
  • 26. Build a URL, Get a Chart Thursday, March 24, 2011
  • 27. What types of charts can you make? Thursday, March 24, 2011
  • 28. Every Chart Starts With A URL http://chart.googleapis.com/chart? Parameters come after the question mark separated by ampersands (&) The order of parameters doesn’t matter Thursday, March 24, 2011
  • 29. Requires 3 Things ★ Chart Type (cht=<chart type>) ★ Chart Size (chs=<width>x<height>) ★ Data (chd=<data string>) ★ http://chart.googleapis.com/chart? cht=p3&chs=250x100&chd=t:60,40 Thursday, March 24, 2011
  • 30. Data Formats ★ Basic Text Format (chd=t:) ★ Simple Encoding (chd=s:) ★ Extended Encoding (chd=e:) ★ Some formats use less characters than others. Thursday, March 24, 2011
  • 31. Basic Text Data Format ★ Floating Point Values From 0-100 ★ Values less than 0 are considered NULL ★ Values higher than 100 are truncated to 100 ★ What you see is what you get ★ Ideal for smaller datasets ★ Produces the largest number of characters Thursday, March 24, 2011
  • 32. Basic Text Data Example ★ chd=t:_30,-30,50,80,200 Thursday, March 24, 2011
  • 33. Simple Encoding Data Format ★ Integer values 0-61 ★ Relative Scaling ★ Low Granularity ★ Each value encoded as a single alphanumeric character ★ Produces the smallest number of characters Thursday, March 24, 2011
  • 34. Simple Encoding Function var simpleEncoding = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789' //Scales submitted values so that maxVal becomes the highest. function simpleEncode(valueArray, maxValue) { var chartData = ['s:']; for (var i = 0; i < valueArray.length; i++) { var currentValue = valueArray[i]; if (!isNaN(currentValue) && currentValue >= 0) { chartData.push(simpleEncoding.charAt( Math.round((simpleEncoding.length-1) * currentValue / maxValue)) ); } else { chartData.push('_'); } } return chartData.join(''); } Thursday, March 24, 2011
  • 35. Simple Encoding Example ★ chd=t:1,19,27,53,61,-1|12,39,57,45,51,27 ★ chd=s:BTb19_,Mn5tzb Thursday, March 24, 2011
  • 36. Extended Data Format ★ Integer values 0-4095 ★ Relative scaling ★ High Granularity ★ Each value encoded as two alphanumeric characters Thursday, March 24, 2011
  • 37. Extended Encoding Function Similar to Simple Encoding Function but too big to show here. Grab it at http://code.google.com/apis/chart/docs/ data_formats.html#encoding_data Thursday, March 24, 2011
  • 38. Extended Encoding Example ★ chd=t:90,1000,2700,3500|3968,-1,1100,250 ★ chd=e:BaPoqM2s,-A__RMD6 Thursday, March 24, 2011
  • 39. Data Scaling ★ chds=<min-value>, <max-value> ★ Related to the data format you use! Thursday, March 24, 2011
  • 40. Axis Scaling ★ chxr=<axis_index>,<start_val>,<end_val>, <opt_step> ★ Axis labels are not calculated to reflect chart data automatically! (We do that ourselves) ★ If you’re data is 0-100, then you’re good! Thursday, March 24, 2011
  • 42. Year In The News Interactive ★ Load a bunch of data into a DataTable ★ User selects which data points they want to see ★ Render a series of static Google Charts ★ Shareable Charts Thursday, March 24, 2011
  • 43. Official Documentation ★ DataTable & DataView Docs ★ Google Visualization API ★ Google Charts API Thursday, March 24, 2011
  • 44. Chart Tools ★ Chart Wizard Easy Interface for Building Charts ★ Live Chart Playground Easy way to edit parameters ★ Google Code Playground Online Charting Development Environment Thursday, March 24, 2011
  • 45. More Links ★ Easy Graphs with Google Chart Tools|Nettuts+ ★ jQuery Google Chart Plugin ★ List of Google Chart Wrappers ★ Animating Static Google Charts Thursday, March 24, 2011
  • 46. Sharing Is Caring ★ Grab everything from this presentation via SVN http://svn.kingkool68.com/projects/google- charting-api/ ★ List of Links Mentioned ★ Stay in Touch @kingkool68 or Facebook or shoot me an e-mail Thursday, March 24, 2011
  • 47. And Remember... Thursday, March 24, 2011
  • 48. Play and Have Fun! It’s the only way to learn. Thursday, March 24, 2011
  • 49. Thank You! Please say hi to me later, share your thoughts, and ask questions. Thursday, March 24, 2011