Your SlideShare is downloading. ×
0
Google charts
Google charts
Google charts
Google charts
Google charts
Google charts
Google charts
Google charts
Google charts
Google charts
Google charts
Google charts
Google charts
Google charts
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Google charts

1,257

Published on

Talk about Google Charts, given at the R Rhein-Neckar User Group Meeting.

Talk about Google Charts, given at the R Rhein-Neckar User Group Meeting.

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,257
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Introduction to Google Charts R User Group Rhein-Neckar 4. July 2013 Maik Röder Python Consultant roeder@berg.net Thursday, July 4, 13
  • 2. Google Charts • Create • charts • https://developers.google.com/chart/interactive/docs/gallery • and reporting applications • over structured data • helps integrate these • directly into your website • or on a Gadget • https://developers.google.com/chart/interactive/docs/ gadgetgallery Thursday, July 4, 13
  • 3. Technology • JavaScript • Event Listeners • HTML5/SVG • Browser compatibility • Flash for some chart types Thursday, July 4, 13
  • 4. Chart Types • Area Charts • Bar Charts • Bubble Charts • Candlestick Charts • Column Charts • Combo Charts • Gauge Charts • Geo Charts • Line Charts • Pie Charts • Scatter Charts • Stepped Area Charts • Table Charts • Timelines • Tree Map Charts • Trendlines Thursday, July 4, 13
  • 5. Thursday, July 4, 13
  • 6. DataTable var data = new google.visualization.DataTable();   data.addColumn('string', 'Name');   data.addColumn('number', 'Salary');   data.addColumn('boolean', 'Full Time');   data.addRows(5);   data.setCell(0, 0, 'John');   data.setCell(0, 1, 10000);   data.setCell(0, 2, true);   data.setCell(1, 0, 'Mary');   data.setCell(1, 1, 25000);   data.setCell(1, 2, true);   data.setCell(2, 0, 'Steve');   data.setCell(2, 1, 8000);   data.setCell(2, 2, false);   data.setCell(3, 0, 'Ellen');   data.setCell(3, 1, 20000);   data.setCell(3, 2, true);   data.setCell(4, 0, 'Mike');   data.setCell(4, 1, 12000);   data.setCell(4, 2, false); Thursday, July 4, 13
  • 7. arrayToDataTable Input var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses'],     ['2004',  1000,      400],     ['2005',  1170,      460],     ['2006',  660,       1120],     ['2007',  1030,      540] ]); Thursday, July 4, 13
  • 8. Google Docs Input function initialize() { // The URL here is the URL of the spreadsheet.         // This is where the data is.         var query = new google.visualization.Query(             'https://spreadsheets.google.com/pub? key=pCQbetd-CptF0r8qmCOlZGg');         query.send(draw);       } Thursday, July 4, 13
  • 9. Json <script type="text/javascript" src="jquery-1.6.2.min.js"></script> <script type="text/javascript"> ...  function drawChart() {       var jsonData = $.ajax({           url: "getData.php",           dataType:"json",           async: false           }).responseText; // Create our data table out of JSON data loaded from server. var data = new google.visualization.DataTable(jsonData); ... Thursday, July 4, 13
  • 10. DataSource Query // Replace the data source URL on next line with your data source // URL. Specify that we want to use the XmlHttpRequest object to // make the query. var opts = {sendMethod: 'xhr'}; var query = new google.visualization.Query('http:// spreadsheets.google.com?key=123AB&...', opts); // Optional request to return only column C and the sum of column // B, grouped by C members. query.setQuery('select C, sum(B) group by C'); // Send the query with a callback function. query.send(handleQueryResponse); function handleQueryResponse(response) { var data = response.getDataTable(); ... • Query • Read Thursday, July 4, 13
  • 11. HTML Integration <html>   <head> ... var chart = new google.visualization.BarChart( document.getElementById('chart_div') ); chart.draw(data, options); ...   </head>   <body>     <div id="chart_div" style="width: 900px; height: 500px;"> </div>   </body> </html> Thursday, July 4, 13
  • 12. Chart Options var options = {       title: 'Company Performance',       vAxis: {title: 'Year',   titleTextStyle: {color: 'red'}}     }; var chart = new google.visualization.BarChart( document.getElementById('chart_div')); chart.draw(data, options); Thursday, July 4, 13
  • 13. Filter on view var view = new google.visualization.DataView(data); view.setRows(data.getFilteredRows([{column: 0, value: 'WoldGM'}, {column: 1, value: 'GM_Rep2'}, {column: 2, value: 9000}])) view.setColumns([4]) var chart = new google.visualization.ImageSparkLine(document.getEleme ntById('read_distribution_1_6_div')); chart.draw(view, {width: 100, height: 62, showAxisLines: false, showValueLabels: false, labelPosition: 'none'}); Thursday, July 4, 13
  • 14. Code Playground https://code.google.com/apis/ajax/playground/?type=visualization Thursday, July 4, 13

×