Google charts

1,939 views

Published on

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,939
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Google charts

  1. 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. 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. 3. Technology • JavaScript • Event Listeners • HTML5/SVG • Browser compatibility • Flash for some chart types Thursday, July 4, 13
  4. 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. 5. Thursday, July 4, 13
  6. 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. 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. 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. 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. 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. 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. 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. 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. 14. Code Playground https://code.google.com/apis/ajax/playground/?type=visualization Thursday, July 4, 13

×