How to Add a 3D Google Pie Chart on Website Using Javascript and Google Charts API Full Project For Beginners

How to Add a 3D Google Pie Chart on Website Using Javascript and Google Charts API Full Project For Beginners

 

 

Welcome folks today in this post we will be adding a 3d pie google chart on website using javascript and google charts api. All the source code of the project will be given below.

 

 

Get Started

 

 

In order to get started you need to create a index.html file and copy paste the following code

 

 

<!DOCTYPE html> 
<html lang="en-US"> 
<body> 

<h1>Youtube Traffic Source PieChart</h1> 

<div id="piechart"></div> 

<script type="text/javascript"
src="https://www.gstatic.com/charts/loader.js"></script> 

<script type="text/javascript"> 
google.charts.load('current', {'packages':['corechart']}); 
google.charts.setOnLoadCallback(drawChart); 

function drawChart() { 
var data = google.visualization.arrayToDataTable([ 
['Traffic Source', 'Views'], 
['Youtube Search', 8], 
['Suggested Videos', 2], 
['External', 4], 
['Playlist', 2], 
['Playlist Page', 8] 
]); 
var options = {'title':'Youtube Traffic Source', 'width':550, 'height':400}; 
var chart = 
new google.visualization.PieChart(document.getElementById('piechart')); 
chart.draw(data, options); 
} 
</script> 

</body> 
</html>

 

 

 

 

 

So you can see in the above figure we have a simple pie chart ready on our website. Now to make it 3d pie chart we need to add a special option is3D to true. So the code will become like this

See also  jsPDF Library & jsPDF AutoTable Library Crash Course in Javascript 2020

 

 

<!DOCTYPE html> 
<html lang="en-US"> 
<body> 

<h1>Youtube Traffic Source PieChart</h1> 

<div id="piechart"></div> 

<script type="text/javascript"
src="https://www.gstatic.com/charts/loader.js"></script> 

<script type="text/javascript"> 
google.charts.load('current', {'packages':['corechart']}); 
google.charts.setOnLoadCallback(drawChart); 

function drawChart() { 
var data = google.visualization.arrayToDataTable([ 
['Traffic Source', 'Views'], 
['Youtube Search', 8], 
['Suggested Videos', 2], 
['External', 4], 
['Playlist', 2], 
['Playlist Page', 8] 
]); 
var options = {'title':'Youtube Traffic Source', 'width':550, 'height':400,is3D:true}; 
var chart = 
new google.visualization.PieChart(document.getElementById('piechart')); 
chart.draw(data, options); 
} 
</script> 

</body> 
</html>

 

 

 

Leave a Reply