• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Google charts
 

Google charts

on

  • 1,224 views

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.

Statistics

Views

Total Views
1,224
Views on SlideShare
1,224
Embed Views
0

Actions

Likes
1
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Google charts Google charts Presentation Transcript

    • Introduction to Google Charts R User Group Rhein-Neckar 4. July 2013 Maik Röder Python Consultant roeder@berg.net Thursday, July 4, 13
    • 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
    • Technology • JavaScript • Event Listeners • HTML5/SVG • Browser compatibility • Flash for some chart types Thursday, July 4, 13
    • 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
    • Thursday, July 4, 13
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • Code Playground https://code.google.com/apis/ajax/playground/?type=visualization Thursday, July 4, 13