Your SlideShare is downloading. ×
  • Like
  • Save
Google charts
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply
Published

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,040
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
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