In this post , we share a sample HTML working example code of displaying a Pie-Chart integrating with Google Chart APIs. Hope it may be useful to few beginners.
Copy paste the below HTML code in any editor and open in browser for display. For more details on customizing the charts visit Google charts web page.
| <html> | |
| <body> | |
| <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', 'bar']}); | |
| // Set a callback to run when the Google Visualization API is loaded. | |
| google.charts.setOnLoadCallback(tcinfo); | |
| // Callback that creates and populates a data table, | |
| // instantiates the pie chart, passes in the data and | |
| // draws it. | |
| function tcinfo() { | |
| // Create the data table. | |
| ///////////////////////////////////////////////////////////////////////////////////////// | |
| var analysisdata = new google.visualization.DataTable(); | |
| analysisdata.addColumn('string', 'Status'); | |
| analysisdata.addColumn('number', 'Count'); | |
| analysisdata.addRows([ | |
| ['Good', 55], | |
| ['Bad', 45] | |
| ]); | |
| // Set chart options | |
| var analysisoptions = {'title':'Analysis count', | |
| 'width':400, | |
| 'height':300, | |
| 'is3D':true, | |
| 'colors':['#7DCEA0', '#EC7063'] | |
| } | |
| // Instantiate and draw our chart, passing in some options. | |
| var chart = new google.visualization.PieChart(document.getElementById('chart_analysis')); | |
| chart.draw(analysisdata,analysisoptions); | |
| } | |
| </script> | |
| <div style="float: left; width: 25%" id="chart_analysis"></div> | |
| <div style="clear:left;"></div> | |
| <p><font face="Arial" size="2"><a href=http://shareolite.blogspot.com>For much more examples , Visit Shareolight.blogspot.com </a></p> | |
| </body> | |
| </html> |