| | 1 | {{{ |
| | 2 | #!html |
| | 3 | <script type="text/javascript" src="https://www.google.com/jsapi"></script> |
| | 4 | <script type="text/javascript"> |
| | 5 | |
| | 6 | // Load the Visualization API and the piechart package. |
| | 7 | google.load('visualization', '1.0', {'packages':['corechart']}); |
| | 8 | |
| | 9 | // Set a callback to run when the Google Visualization API is loaded. |
| | 10 | google.setOnLoadCallback(drawChart); |
| | 11 | |
| | 12 | // Callback that creates and populates a data table, |
| | 13 | // instantiates the pie chart, passes in the data and |
| | 14 | // draws it. |
| | 15 | function drawChart() { |
| | 16 | |
| | 17 | // Create the data table. |
| | 18 | var data = new google.visualization.DataTable(); |
| | 19 | data.addColumn('string', 'Topping'); |
| | 20 | data.addColumn('number', 'Slices'); |
| | 21 | data.addRows([ |
| | 22 | ['Mushrooms', 3], |
| | 23 | ['Onions', 1], |
| | 24 | ['Olives', 1], |
| | 25 | ['Zucchini', 1], |
| | 26 | ['Pepperoni', 2] |
| | 27 | ]); |
| | 28 | |
| | 29 | // Set chart options |
| | 30 | var options = {'title':'How Much Pizza I Ate Last Night', |
| | 31 | 'width':400, |
| | 32 | 'height':300}; |
| | 33 | |
| | 34 | // Instantiate and draw our chart, passing in some options. |
| | 35 | var chart = new google.visualization.PieChart(document.getElementById('chart_div')); |
| | 36 | chart.draw(data, options); |
| | 37 | } |
| | 38 | </script> |
| | 39 | |
| | 40 | <div id="chart_div"></div> |
| | 41 | }}} |
