How to load google chart js

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!