How to Implement Google Pie Chart in HTML Page
Solution: How to Implement Google Pie Chart in HTML Page with source code, demo, and also how you can complete the full program easily. To complete the program you need to follow those steps given bellow
Previously, we discuss a jQuery example Emoji Rating System. This time we will implement Google chart with Google jQuery. Lots of graphs and other charts program with implementation are coming in the upcoming code. So, stay with us.
Live Demo
Also Helpful –
Implement Chosen & Multiple Chosen
How to Implement Google Pie Chart in HTML Page
To implement any kind of chart in an HTML page you need to chart loader js file to get the chart design and features. Here google provide the chart loader js file “https://www.gstatic.com/charts/loader.js”. Which can be used easily.
To load the chart use "google.charts.load" function. Here we use "drawChart" the function to draw the chart. In "chart.draw" function define the Title, Height, Width, and is3D or not. And "google.visualization.PieChart" function set the div to show your chart.
For 2D Google Pie Chart –
To complete the 2D Google Pie Chart with debugging free code you have to create two files. The first file is to HTML and the second file gonna be JavaScript for function-related,
index.html
Create an HTML file named ‘index.html‘ and put those codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!-- Coding Debugging (https://codingdebugging.com) --> <!DOCTYPE html> <html lang="en-US"> <head> <title>Google Pie Chart - Coding Debugging</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> </head> <body> <div align="center"> <div id="piechart"></div> </div> <!-- Google Chart Loader JS --> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <!-- Function JS --> <script src="function.js"></script> </body> </html> |
function.js
Create a JavaScript file named ‘function.js‘ and put those codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
// LOAD GOOGLE CHARTS google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); // DRAW THE CHART AND SET THE CHART VALUES function drawChart() { var data = google.visualization.arrayToDataTable([ ['Skills', 'Known Percentage (%)'], ['HTML', 8], ['CSS', 6], ['PHP/PDO', 8], ['JavaScript', 6], ['Java', 4] ]); // OPTIONAL; ADD A TITLE AND SET THE WIDTH AND HEIGHT OF THE CHART var options = {'title':'My Skills', 'width':500, 'height':400,}; // DISPLAY THE CHART INSIDE THE <DIV> ELEMENT WITH ID="PIECHART" var chart = new google.visualization.PieChart(document.getElementById('piechart')); chart.draw(data, options); } |
For 3D Google Pie Chart –
To complete the 3D Google Pie Chart with debugging free code you have to create two files. The first file is to HTML and the second file gonna be JavaScript for function-related,
index.html
Create an HTML file named ‘index.html‘ and put those codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!-- Coding Debugging (https://codingdebugging.com) --> <!DOCTYPE html> <html lang="en-US"> <head> <title>Google Pie Chart - Coding Debugging</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> </head> <body> <div align="center"> <div id="piechart_3d"></div> </div> <!-- Google Chart Loader JS --> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <!-- Function JS --> <script src="function.js"></script> </body> </html> |
function.js
Create a JavaScript file named ‘function.js‘ and put those codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
// LOAD GOOGLE CHARTS google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); // DRAW THE CHART AND SET THE CHART VALUES function drawChart() { var data = google.visualization.arrayToDataTable([ ['Skills', 'Known Percentage (%)'], ['HTML', 8], ['CSS', 6], ['PHP/PDO', 8], ['JavaScript', 6], ['Java', 4] ]); // OPTIONAL; ADD A TITLE AND SET THE WIDTH AND HEIGHT AND 3D OF THE CHART var options_3d = {'title':'My Skills 3D', 'width':500, 'height':400,is3D: true}; // DISPLAY THE CHART INSIDE THE <DIV> ELEMENT WITH ID="PIECHART_3D" var chart_3d = new google.visualization.PieChart(document.getElementById('piechart_3d')); chart_3d.draw(data, options_3d); } |
Thank you for visiting!
We appreciate you for your precious time. I hope you are learn something from here! If you have any queries about this coding comment down below we will reply ASAP.
Keep coding, Keep debugging!