In this post , we share a sample HTML working example code of displaying a Bar stack Horizontal 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 chartdata = google.visualization.arrayToDataTable([ | |
| ['Category', 'Good', 'Bad'], | |
| ['Fruits',0,19], | |
| ['Vegetables',36,11], | |
| ['Cosmetics',10,8] | |
| ]); | |
| var chartview = new google.visualization.DataView(chartdata); | |
| chartview.setColumns([0, 1, | |
| { calc: "stringify", | |
| sourceColumn: 1, | |
| type: "string", | |
| role: "annotation" }, | |
| 2, | |
| { calc: "stringify", | |
| sourceColumn: 1, | |
| type: "string", | |
| role: "annotation" } | |
| ]); | |
| var chartoptions = { | |
| isStacked: 'percent', | |
| series: { 0: {color: '#7DCEA0'} , 1: {color: '#EC7063'} }, | |
| is3D:true, | |
| height: 300, | |
| legend: {position: 'top', maxLines: 3}, | |
| vAxis: { | |
| minValue: 0, | |
| ticks: [] | |
| } | |
| }; | |
| var chart = new google.visualization.ColumnChart(document.getElementById('chart_analysis')); | |
| chart.draw(chartdata, chartoptions); | |
| } | |
| </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> |