- 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 Eachchart 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
element of the HTMLpage should also be ready to place the
chart you are about todraw. 9. Chart TypesArea Chart 10. var ac =
newgoogle.visualization.AreaChart(document.getElementById(visualization));ac.draw(data,
{title : Monthly Coffee Retail Price by Country,isStacked:
true,width: 600,height: 400,vAxis: {title: "Price"},hAxis: {title:
"Month"} }); 11. Bar
Chartgoogle.visualization.BarChart(document.getElementById(visualization)).
12. Gauge ChartGauge chart(dial chart) reperesents one or more
values as needles on a circular or semi-circular surface. This is
rendered using Gauge which is in the package gauge. new
google.visualization.Gauge(document.getElementById(visualiz
ation)). draw(data); 13. var data = new
google.visualization.DataTable(); data.addColumn(string, Label);
data.addColumn(number, Value); data.addRows(3); data.setValue(0, 0,
Speed); data.setValue(0, 1, 80); data.setValue(1, 0, Petrol);
data.setValue(1, 1, 8); data.setValue(2, 0, Temperature);
data.setValue(2, 1, 25); 14. Geo Chartvar chart =
newgoogle.visualization.GeoChart(document.getElementById(chart_div));
15. Table Chart Boolean values are displayed as check marks. var
table = new
google.visualization.Table(document.getElementById(table_div)); 16.
var data = new
google.visualization.DataTable();data.addColumn(string,
Name);data.addColumn(number, RollNo);data.addColumn(boolean, Have
ITBI Elective);data.addRows(3);data.setCell(0, 0,
Kanika);data.setCell(1, 0, Anita);data.setCell(2, 0,
Lavanya);data.setCell(0, 1, 35);data.setCell(1, 1,
100);data.setCell(2, 1, 42);data.setCell(0, 2,
true);data.setCell(1, 2, false);data.setCell(2, 2, true); 17. Tree
Map Chart Here each node can have zero or more children, and one
parent (except for the root, which has no parents). Each node is
displayed as a rectangle, sized and colored according to values
that you assign. Sizes and colors are valued relative to all other
nodes in the graph. You can specify how many levels to display
simultaneously 18. Combo Chartvar chart =
newgoogle.visualization.ComboChart(document.getElementById(chart_div));
19. Line Chart var chart = new
google.visualization.LineChart(document.getElementById(chart
_div)); 20. Line Chart 21. Scatter Chart 22. Candle Stick Chart 23.
Example 1:function drawVisualization() {var data = new
google.visualization.DataTable();data.addColumn(string,
DivisionName);data.addColumn(string, Falls
Under);data.addRows(15);data.setCell(0, 0, PwC Global
Model);data.setCell(1, 0,Advisory, Advisory
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