Google Charts provides a way to visualize data with various presentation charts by embedding simple Javascript code in web pages. The document discusses how to load charts, prepare data in a DataTable class, customize chart options like the legend and title, draw the chart, and includes links to chart galleries and examples.

1. Google Chart
14th June 2016
By Kimsrung Lov

2. Overview
Google Charts provides a perfect way to
visualize data with a various presentation charts
by embed a simple Javascript in your web page.
All chart types are populated with data using
DataTable class

3. Load the charts
For Geochart and Map Chart, you must load
both the old library loader and the new library

4. Prepare the Data
// 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]
]);

5. Prepare the Data
var data = [
['Topping', 'Slices’],
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]
var data = new
google.visualization.arrayToDataTable(data);

6. Customize the chart
var options = {
legend: 'left',
title: 'My Big Pie Chart',
chartArea: {
top: 50,
height: '80%'
},
hAxis: {
gridlines: {
count: 0
}
},
}
https://google-
developers.appspot.com/chart/interactive/docs/customizing_charts

7. Draw the Chart
var chart = new
google.visualization.LineChart(document.getEle
mentById('chart_div'));
chart.draw(data, options);

8. Chart Gallery
• https://google-
developers.appspot.com/chart/interactive/do
cs/gallery
• https://google-
developers.appspot.com/chart/interactive/do
cs/more_charts
• https://jsfiddle.net/api/post/library/pure/

9. Q & A
Thanks You!