Google charts
421 views
21 slides
Apr 12, 2017
Slide 1 of 21
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
About This Presentation
Getting started with Google Charts
Slide Content
GOOGLE CHARTS Payal Mantri 16/3/2017
AGENDA Data Visualization Introduction to Google Charts Features of Google Charts Comparison with other Visualization Tools Types of Charts Prerequisites Environment setup Getting Started Populating the Data Table Live Demo
“The science of visual representation of “data”, defined as information which has been abstracted in some schematic form, including attributes or variables for the units of information" -Friendly, 2008 DATA VISUALIZATION
Google Charts - Introduction
INTRODUCTION Google Charts is a Javascript library that creates graphical charts from user-supplied data. From simple line charts to complex hierarchical tree maps, the chart gallery provides a large number of ready-to-use chart types. A new version of Google Charts was released on September 12, 2016 and is the official current release.
F EATURES OF GOOGLE CHARTS Free to Use Compatibility with different browsers and mobile platforms. Multi-touch Support Lightweight Simple Configurations Multiple axes Configurable tooltips DateTime support . Print using web page External data from server
TYPES OF CHARTS SUPPORTED
TYPES OF CHARTS SUPPORTED
COMPARISON WITH OTHER CHARTING TOOLS Google Charts Fusion Charts HighCharts D3.js Charts Rendered in HTML5 Charts using SVG and VML Javascript Charts using SVG and VML SVG and VML Javascript Charts SVG Input Data Format Javascript API JSON and XML JSON JSON and XML Pricing Free Free for non-commercial use. Deployment Charges start at $149 Free for non-commercial use. BSD license Library Size 70KB 553KB. Minfied -50KB Minified -116kb Documentation Extensive with Real life examples Tutorial Style examples Many demos available No
PRE-REQUISITES To use Google Charts, one should have a basic understanding of HTML CSS JavaScript and any text editor
ENVIRONMENT SETUP Installing Google Charts There are two ways to use Google Charts. Download: Download it locally from https://developers.google.com/chart and use it. CDN access : You also have access to a CDN. The CDN will give you access around the world to regional data centers that in this case, Google Chart host https://www.gstatic.com/charts. Using Downloaded Google Chart Include the googlecharts JavaScript file in the HTML page using following script: <head> <script src="googlecharts/loader.js"></script> </head> Using CDN Include the Google Chart JavaScript file in the HTML page using following script <head> <script src="https://www.gstatic.com/charts/loader.js"></script> </head>
GETTING STARTED Step 1: Import The Google Charts Library and specific Chart Package <script type="text/javascript" src=" https://www.gstatic.com/charts/loader.js "></script> <script type="text/javascript"> google.charts.load('current', {packages: ['corechart']}); ... </script>
GETTING STARTED Step 2: Prepare the data and populate the DataTable Google Chart Tools charts require data to be wrapped in a JavaScript class called Google.visualization.DataTable A DataTable is a two-dimensional table with rows and columns, where each column has a datatype, an optional ID, and an optional label. There are different ways to create a datatable Create Empty Data Table and add columns and rows to it Use a JavaScript Literal Initializer
// Create the data table. var data = new google.visualization. DataTable() ; data.addColumn( 'string’ , 'Topping' ); data.addColumn( 'number' , 'Slices' ); data.addRows([ [ 'Mushrooms' , 3 ], [ 'Onions' , 1 ], [ 'Olives' , 1 ], [ 'Zucchini' , 1 ], [ 'Pepperoni' , 2 ] ]);
POPULATING THE DATA TABLE Use a JavaScript Literal Initializer You can pass a JavaScript literal object into your table constructor, defining the table schema and optionally data as well. Advantages: Useful when generating data on your web server. Processes faster than other methods for larger tables (about 1,000+ cells) Disadvantages: Syntax is tricky to get right, and prone to typos. Not very readable code. Temptingly similar, but not identical, to JSON.
var data = new google.visualization. DataTable( { cols: [ {id: 'x' , label: 'x' , type: 'number' }, {id: 'Dogs' , label: 'Dogs' , type: 'number' } ], rows: [ { c: [ {v: } , {v: } ] }, { c: [ {v: 1 } , {v: 10 } ] }, { c: [ {v: 2 } , {v: 23 } ] }, { c: [ {v: 3 } , {v: 17 } ] }, { c: [ {v: 4 } , {v: 18 } ] }, ] } );
GETTING STARTED Step 3: Customize the chart by specifying options Every chart has many customizable options, including title, colors, line thickness, background fill, and so on. Specify custom options for your chart by defining a JavaScript object with option_name / option_value properties. eg: var options = { chart: { title: 'Box Office Earnings in First Two Weeks of Opening', subtitle: 'in millions of dollars (USD)' }, width: 900, height: 500, vAxis: { title: 'Amount Collected }, hAxis: { title: 'Day' } };
GETTING STARTED Step 4: Draw the Chart Instantiate the chart: Each chart type is based on a different class, listed in the chart's documentation.Create instance of your chart with single parameter var chart = new google.visualization.PieChart(document.getElementById('chart_div')); Draw your chart: Once you have prepared your data and options, you can draw chart by following call chart.draw(myData, options);
Demo Time
Any questions?
THANKS!
Tags
Categories
DesignDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 421
- Slides 21
- Age 3155 days
Related Slideshows
1
MGV Residential Design projects for different clients, including a New Mexico Adobe project-1-.pdf
mannyvesa
26 views
16
EUNITED_Advocacy and Public Engagement through Visual Media
GeorgeDiamandis11
30 views
31
DESIGN THINKINGGG PPT 2 TOPIC IDEATION.pptx
HibaZaidi2
24 views
36
DESIGN THINKING CHAPTER 1 PPTT PPT 1.pptx
HibaZaidi2
27 views
112
Hinduism and Its History - PowerPoint Slides.pptx
ConorMcCormack10
23 views
20
Service Attributes of Manufactured Parts.pptx
MustafaEnesKrmac
24 views