Difference between revisions of "Web Element: Data"
Line 24: | Line 24: | ||
(new Runtime).module(define, name => (name === "chart") && inspect()); | (new Runtime).module(define, name => (name === "chart") && inspect()); | ||
</script> | </script> | ||
+ | </html> | ||
+ | <html> | ||
+ | <head> | ||
+ | <!--Load the AJAX API--> | ||
+ | <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']}); | ||
+ | |||
+ | // Set a callback to run when the Google Visualization API is loaded. | ||
+ | google.charts.setOnLoadCallback(drawChart); | ||
+ | |||
+ | // Callback that creates and populates a data table, | ||
+ | // instantiates the pie chart, passes in the data and | ||
+ | // draws it. | ||
+ | function drawChart() { | ||
+ | |||
+ | // Create the data table. | ||
+ | var data = new google.visualization.DataTable(); | ||
+ | data.addColumn('string', 'Topping'); | ||
+ | data.addColumn('number', 'Slices'); | ||
+ | data.addRows([ | ||
+ | ['Mushrooms', 3], | ||
+ | ['Onions', 1], | ||
+ | ['Olives', 1], | ||
+ | ['Zucchini', 1], | ||
+ | ['Pepperoni', 2] | ||
+ | ]); | ||
+ | |||
+ | // Set chart options | ||
+ | var options = {'title':'How Much Pizza I Ate Last Night', | ||
+ | 'width':400, | ||
+ | 'height':300}; | ||
+ | |||
+ | // Instantiate and draw our chart, passing in some options. | ||
+ | var chart = new google.visualization.PieChart(document.getElementById('chart_div')); | ||
+ | chart.draw(data, options); | ||
+ | } | ||
+ | </script> | ||
+ | </head> | ||
+ | |||
+ | <body> | ||
+ | <!--Div that will hold the pie chart--> | ||
+ | <div id="chart_div"></div> | ||
+ | </body> | ||
</html> | </html> |
hkilter.com by H. K. Ilter is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License
© 2020 H. K. Ilter