<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Languages');
data.addColumn('number', 'Tutorials');
data.addRows([
['PHP', 300],
['MySQL', 100],
['JavaScript', 200],
['JQuery', 100],
['HTML', 200]
]);
// Set chart options
var options = {'title':'Tutorials at plus2net.com',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
HTML
<div id="chart_div"></div>
Create one HTML page and copy above JavaScript code and html code inside tag of your webpage. The above Pie chart will be displayed on your page. You should have internet connection to connect to Google Chart library.
Changing Height Width and Title
var options = {'title':'Tutorials at plus2net.com',
'width':400,
'height':300};