Google Chart Tools
-
Upload
kanika-garg -
Category
Education
-
view
3.135 -
download
2
description
Transcript of Google Chart Tools
- 1. Kanika Garg 10BM60035Lavanya R. 10BM60042
2. Introduction GCT is a tool for creating charts and maps from data available Any data source which uses the Chart Tools Data Source Protocolcan be used to pick up data to create these charts. Various Data sources: Google Spreadsheets Google Fusion Tables and Some third party data providers like Salesforce If you own a website and implement this protocol, you can also become a data provider for Google Chart Tools. 3. Advantages of the tool With this tool, you can customize your charts to fit the look and feelof your website. Charts are highly interactive. HTML5/SVG technology is used to create these charts and itprovides cross-browser compatibility and cross platformportability to iPhones, iPads and Android. No plugins are needed. It is a Free Tool which can connect to your real time data (DynamicData) Rich Gallery: It has a vast library of charts, maps and tables whichcan be used to visualize and customize your data according to yourrequirements 4. Building Blocks Chart Library - Charts are exposed as JavaScript classes. The chartscan be customized easily according to the look and feel of yourwebsite. Data Tables - The charts are populated with the data from theJavaScript DataTable class. The common data structure facilitateseasily switching between different types Data Sources - The data can be queried from the websites thatimplement the Chart Tools Datasource. 5. Chart CreationThe charts can be rendered in your webpage by coding the charts andcustomizing it according to your needs.Important Parts of the Script :Loading the chart libraries The Google JSAPI API The Google Visualization library and The library for the chart itself 6. Data for charts Data should be wrapped in a JavaScript class called google. visualization.DataTable. DataTable is two-dimensional table with rows and columns. Each column has a datatype, an optional ID and an optional Label. Various Ways To Create and Populate the Data Tables: Create a new DataTable, then call addColumn()/addRows()/addRow()/setCell() arrayToDataTable() JavaScript literal initializer Sending a Datasource Query 7. Customizing the chart Each chart has options including title, colours, line thickness, backgroundfill, and so on that are customizable to your needs. Specify custom options for your chart by defining a JavaScript object with option_name/option_value properties. Every chart has its own list of options and a default value for the option. 8. Draw the Chart The final step is to draw the chart and for that you must firstinstantiate an instance the chart followed by calling the draw().The chart type is based on a class and the appropriate package ofthe base class should have been included in the library. Theinstance would look like: var chart = new google.visualization.Piechart(document.getElementById(c hart_div)); Data and the options for the chart should be prepared before thechart is drawn. Along with this the
Comes for Placements toVGSOM);data.setCell(1, 1, PwC Global Model);data.setCell(2, 0, Tax and regulatory Services);data.setCell(2, 1, PwC Global Model);data.setCell(3, 0, Assurance);data.setCell(3, 1, PwC Global Model);data.setCell(4, 0, Consulting);data.setCell(4, 1, Advisory);data.setCell(5, 0, GRID);data.setCell(5, 1, Advisory); 24. data.setCell(6, 0, Financial Advisory Services);data.setCell(6, 1, Advisory);data.setCell(7, 0, Internal Audit Services);data.setCell(7, 1, Advisory);data.setCell(8, 0, Mergers and Acquisitions);data.setCell(8, 1, Tax and regulatory Services);data.setCell(9, 0, Indirect Tax);data.setCell(9, 1, Tax and regulatory Services);data.setCell(10, 0, Direct Tax);data.setCell(10, 1, Tax and regulatory Services);data.setCell(11, 0, Transfer Pricing);data.setCell(11, 1, Tax and regulatory Services);data.setCell(11, 0, System Process Assurance);data.setCell(11, 1, Assurance);data.setCell(12, 0, Statutory Audit);data.setCell(12, 1, Assurance); // Create and draw the visualization. new google.visualization.OrgChart(document.getElementById(visualization)).draw(data, {allowHtml: true}); } 25. Organisational Chart 26. Example 2: function drawVisualization() {var query = new google.visualization.Query(https://docs.google.com/spreadsheet/ccc?key=0AsVUeZINdWEmdGl4R2dCMVhFbGhGWGxISEJBRFBCNmc#gid=0);query.setQuery(SELECT A,D WHERE D > 5000 ORDER BY A);query.send(handleQueryResponse);}function handleQueryResponse(response) {if (response.isError()) {alert(Error in query:+ response.getMessage() + + response.getDetailedMessage());return;}var data = response.getDataTable();visualization = new google.visualization.LineChart(document.getElementById(visualization));visualization.draw(data, {legend: bottom});} 27. Line Chart 28. Business Value Added Its a powerful Visualisation tool with Interactivity featurewhich gives data a meaningful look and helps easy analysis ofthe data. It reduces time spent on analysis of big data tables byconverting these into easy to analyze charts The charts are created in an easy to use URLs which can beembedded anywhere in your webpage. Managers and Decision makers have less time to look at bigdata tables and do number crunching to come to decisions.They need data visualisation tools like charts to have an overalllook at the data and compare them to arrive at decisions. 29. Thank You