Chapter 65: Plot Google
1. What is “Plot Google” actually? (Clear definition first)
When students, beginners, BCA/B.Tech/MCA students, or data visualization learners in India search or ask for “Plot Google”, “Google plot”, “Google Charts plot”, they almost always mean:
How to create beautiful, interactive charts and graphs using Google Charts (the free service from Google that lets you plot data in web pages very easily).
Google Charts (also called Google Visualization API) is not a separate library you install — it is a free web service from Google. You just add one <script> tag to your HTML, give it data in JavaScript, and Google draws the chart for you inside a <div> (not even <canvas> — they use SVG or VML depending on browser).
Why students love it so much (especially in India):
- Zero installation — just one line of HTML
- Very easy — basic chart in 5–10 lines
- Looks professional — Google’s own design (clean, modern)
- Fully interactive (hover tooltips, zoom, legend click, animations)
- Free forever — no limits for personal/educational use
- Works offline after first load (cached)
- Many chart types — line, bar, pie, column, area, scatter, combo, gauge, map, org chart, timeline, candlestick, etc.
2. How Google Charts Works (Very Simple Flow)
- Include one Google script in <head>
- Prepare data in a DataTable (like Excel rows & columns)
- Choose chart type (BarChart, LineChart, PieChart…)
- Draw it inside any <div> with chart.draw()
That’s it — no npm install, no webpack, no build step.
3. Your First Google Charts Plot – Hello World Bar Chart (Copy-Paste & Run)
Create a file called google-charts-hello.html and paste this complete code:
HTML
|
0 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 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Google Charts – Hello World Bar Chart</title> <style> body { background: #f0f4f8; font-family: Arial, sans-serif; display: flex; flex-direction: column; align-items: center; padding: 20px; } #chart_div { width: 900px; height: 500px; background: white; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); } h1 { color: #2c3e50; margin-bottom: 10px; } </style> <!-- === THE ONLY LINE YOU NEED TO INCLUDE GOOGLE CHARTS === --> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> // Load Google Charts package google.charts.load('current', {'packages':['corechart']}); // When loading is finished, draw the chart google.charts.setOnLoadCallback(drawChart); function drawChart() { // 1. Prepare data (like Excel table) var data = google.visualization.arrayToDataTable([ ['Fruit', 'Sales (dozens)'], // headers ['Apple', 45], ['Banana', 32], ['Orange', 28], ['Mango', 51], ['Grapes', 19] ]); // 2. Chart options (title, colors, size…) var options = { title: 'Fruit Sales This Month', titleTextStyle: { fontSize: 22, color: '#34495e' }, hAxis: { title: 'Fruit', titleTextStyle: { color: '#2c3e50' } }, vAxis: { title: 'Sales (dozens)', minValue: 0 }, legend: { position: 'top' }, colors: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF'], backgroundColor: 'transparent', chartArea: { width: '85%', height: '70%' } }; // 3. Create chart object var chart = new google.visualization.ColumnChart( document.getElementById('chart_div') ); // 4. Draw it! chart.draw(data, options); } </script> </head> <body> <h1>My First Google Charts Plot</h1> <p>Hover bars to see values • Click legend to hide/show • Resize window → chart adjusts</p> <div id="chart_div"></div> </body> </html> |
What you see when you open it:
- Beautiful colorful column (bar) chart
- Hover on any bar → tooltip shows exact value
- Click legend → hide/show that fruit
- Responsive (resize browser → chart resizes)
- Title, axes labels, nice colors — looks very professional
This is your first real Google Charts plot — congratulations! 🎉
4. Step-by-Step: How We Made This Chart (Blackboard Style)
- Include Google Loader<script src=”https://www.gstatic.com/charts/loader.js”></script> → This is the only external file needed
- Load packagegoogle.charts.load(‘current’, {‘packages’:[‘corechart’]}); → ‘corechart’ = bar, line, pie, column, area, etc.
- Wait for loadgoogle.charts.setOnLoadCallback(drawChart); → Calls your function when Google is ready
- Prepare datagoogle.visualization.arrayToDataTable([ … ]) → First row = headers, next rows = data
- Options Title, colors, axes titles, legend position…
- Create & drawnew google.visualization.ColumnChart(div)chart.draw(data, options)
5. More Very Useful Google Charts Examples (Copy-Paste & Try)
A. Line Chart (Change over Time)
JavaScript
|
0 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 |
var data = google.visualization.arrayToDataTable([ ['Month', 'Visitors'], ['Jan', 1200], ['Feb', 1900], ['Mar', 3000], ['Apr', 2800], ['May', 4500], ['Jun', 5200] ]); var options = { title: 'Website Visitors Growth', curveType: 'function', // smooth line legend: { position: 'bottom' } }; var chart = new google.visualization.LineChart( document.getElementById('chart_div') ); chart.draw(data, options); |
B. Pie Chart
JavaScript
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
var data = google.visualization.arrayToDataTable([ ['Category', 'Amount'], ['Rent', 12000], ['Food', 8000], ['Transport', 3000], ['Savings', 5000] ]); var options = { title: 'Monthly Budget', pieHole: 0.4, // makes donut chart colors: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0'] }; var chart = new google.visualization.PieChart( document.getElementById('chart_div') ); chart.draw(data, options); |
C. Combo Chart (Bar + Line)
JavaScript
|
0 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 |
var data = google.visualization.arrayToDataTable([ ['Month', 'Sales', 'Profit %'], ['Jan', 120, 5], ['Feb', 190, 12], ['Mar', 300, 18], ['Apr', 280, 15] ]); var options = { title: 'Sales & Profit', vAxes: { 0: { title: 'Sales (₹)' }, 1: { title: 'Profit %' } }, series: { 0: { targetAxisIndex: 0, type: 'bars' }, 1: { targetAxisIndex: 1, type: 'line' } } }; var chart = new google.visualization.ComboChart( document.getElementById('chart_div') ); chart.draw(data, options); |
6. Teacher’s Quick Tips (Hyderabad Student Style 😄)
- Always use CDN for learning/projects — no installation needed
- Set responsive: true in options → chart auto-adjusts on mobile
- Common mistake #1: Wrong chart type → use ‘ColumnChart’, ‘LineChart’, ‘PieChart’, ‘BarChart’, ‘AreaChart’, ‘ComboChart’…
- Common mistake #2: Forget google.charts.setOnLoadCallback() → chart doesn’t appear
- Pro tip: Use google.charts.load(‘current’, {packages: [‘corechart’, ‘bar’]}) for more types
- Pro tip 2: Save chart as image: chart.getImageURI() → right-click save
Understood how to plot with Google Charts now? Google Charts is one of the easiest & most professional-looking charting tools students can learn — interactive, beautiful, zero setup, and perfect for college projects, dashboards, reports, interviews.
Tell me honestly — what do you want next?
- Full dashboard with 4 different Google Charts?
- Animated chart (growing bars on load)?
- Chart with tooltips + custom colors?
- How to load data from CSV/JSON/API?
- Or 20-question Google Charts quiz?
Just say — we can build any chart together step by step! 🚀
