Google charts
•
2 likes•3,304 views
This document introduces Google Charts, which allows users to create interactive charts and reports from structured data and integrate them directly into websites or gadgets. It describes the technology used, different types of charts that can be created, and how to load and visualize data from sources like JavaScript arrays, Google Docs spreadsheets, JSON, and external data queries. It also provides examples of options for customizing charts, filtering data views, and integrating charts into HTML.
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (12)
Similar to Google charts
Similar to Google charts (20)
More from maikroeder
More from maikroeder (7)
Recently uploaded
Recently uploaded (20)
Google charts
- 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