How to add Google Charts to your web page?
To add Google Charts to your web page, the code is as follows:
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 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | <!DOCTYPE html> <html> <head> <title>Google Charts Tutorial</title> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", { packages: ["corechart"] }); </script> <style> .barchartContainer { width: 550px; height: 400px; margin: 0 auto; font-weight: bold; } body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } </style> </head> <body> <h1 style="text-align: center;"> Adding google charts to your web page Example </h1> <div class="barchartContainer"></div> <script language="JavaScript"> function drawChart() { var data = google.visualization.arrayToDataTable([ ["Year", "India"], ["2013", 500], ["2014", 800], ["2015", 1000], ["2016", 1200], ["2017", 1400] ]); var options = { title: "Educated people(in millions)" }; var chart = new google.visualization.BarChart( document.querySelector(".barchartContainer") ); chart.draw(data, options); } google.charts.setOnLoadCallback(drawChart); </script> </body> </html> |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
