JavaScript Google Charts

Powerful charting library by Google for data visualization

📊 What is Google Charts?

Google Charts is a powerful, free charting library that provides a wide variety of charts and data visualization tools. It's easy to use and offers interactive features with no plugins required. 


<!-- Load Google Charts -->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<!-- Chart container -->
<div id="myChart" style="width: 900px; height: 500px;"></div>

<script>
// 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);

function drawChart() {
    // Create the data table
    var data = google.visualization.arrayToDataTable([
        ['Task', 'Hours per Day'],
        ['Work',     11],
        ['Eat',      2],
        ['Commute',  2],
        ['Watch TV', 2],
        ['Sleep',    7]
    ]);

    // Set chart options
    var options = {
        title: 'My Daily Activities'
    };

    // Instantiate and draw the chart
    var chart = new google.visualization.PieChart(document.getElementById('myChart'));
    chart.draw(data, options);
}
</script>

Output:

Google Charts Types

📊

Column Charts

Vertical bar charts for comparisons 

google.visualization.ColumnChart
📈

Line Charts

Show trends and changes over time 

google.visualization.LineChart
🥧

Pie Charts

Display proportional data 

google.visualization.PieChart
🗺️

Geo Charts

Display data on geographical maps 

google.visualization.GeoChart

🔹 Creating a Column Chart

Column charts are great for comparing different categories: 

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawColumnChart);

function drawColumnChart() {
    var data = google.visualization.arrayToDataTable([
        ['Month', 'Sales', 'Expenses'],
        ['Jan', 1000, 400],
        ['Feb', 1170, 460],
        ['Mar', 660, 1120],
        ['Apr', 1030, 540],
        ['May', 1200, 580]
    ]);

    var options = {
        title: 'Company Performance',
        titleTextStyle: { fontSize: 18 },
        hAxis: { title: 'Month' },
        vAxis: { title: 'Amount ($)' },
        backgroundColor: '#f9f9f9',
        colors: ['#4285F4', '#EA4335']
    };

    var chart = new google.visualization.ColumnChart(
        document.getElementById('columnChart')
    );
    chart.draw(data, options);
}

Output:

🔹 Interactive Line Chart

Line charts show trends and patterns over time: 

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawLineChart);

function drawLineChart() {
    var data = google.visualization.arrayToDataTable([
        ['Year', 'Sales', 'Expenses'],
        ['2019', 1000, 400],
        ['2020', 1170, 460],
        ['2021', 660, 1120],
        ['2022', 1030, 540],
        ['2023', 1200, 600],
        ['2024', 1350, 650]
    ]);

    var options = {
        title: 'Company Growth Over Time',
        titleTextStyle: { fontSize: 18 },
        curveType: 'function',
        legend: { position: 'bottom' },
        hAxis: { title: 'Year' },
        vAxis: { title: 'Amount ($)' },
        pointSize: 5,
        colors: ['#0F9D58', '#F4B400']
    };

    var chart = new google.visualization.LineChart(
        document.getElementById('lineChart')
    );
    chart.draw(data, options);
}

Output:

🔹 Data Table Integration

Google Charts can also display data in interactive tables: 

google.charts.load('current', {'packages':['table']});
google.charts.setOnLoadCallback(drawTable);

function drawTable() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('number', 'Salary');
    data.addColumn('boolean', 'Full Time Employee');

    data.addRows([
        ['Mike', {v: 10000, f: '$10,000'}, true],
        ['Jim', {v: 8000, f: '$8,000'}, false],
        ['Alice', {v: 12500, f: '$12,500'}, true],
        ['Bob', {v: 7000, f: '$7,000'}, true]
    ]);

    var options = {
        title: 'Employee Data',
        width: '100%',
        height: '100%',
        alternatingRowStyle: false,
        cssClassNames: {
            'headerRow': 'headerStyle',
            'tableRow': 'tableRowStyle',
            'oddTableRow': 'oddTableRowStyle'
        }
    };

    var table = new google.visualization.Table(
        document.getElementById('dataTable')
    );
    table.draw(data, options);
}

Output:

🔹 Google Charts Boilerplate Template

A complete starter template for Google Charts projects: 

<!DOCTYPE html>
<html>
<head>
    <title>Google Charts Dashboard</title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .dashboard {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-top: 20px;
        }
        .chart-container {
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 15px;
            background: #f9f9f9;
        }
        .full-width {
            grid-column: 1 / -1;
        }
    </style>
</head>
<body>
    <h1>Business Analytics Dashboard</h1>
    
    <div class="dashboard">
        <div class="chart-container">
            <div id="pieChart" style="width: 100%; height: 300px;"></div>
        </div>
        
        <div class="chart-container">
            <div id="columnChart" style="width: 100%; height: 300px;"></div>
        </div>
        
        <div class="chart-container full-width">
            <div id="lineChart" style="width: 100%; height: 400px;"></div>
        </div>
    </div>
    
    <script>
        // Load Google Charts
        google.charts.load('current', {
            'packages': ['corechart', 'table']
        });
        
        // Set callback
        google.charts.setOnLoadCallback(drawCharts);
        
        function drawCharts() {
            drawPieChart();
            drawColumnChart();
            drawLineChart();
        }
        
        function drawPieChart() {
            var data = google.visualization.arrayToDataTable([
                ['Category', 'Percentage'],
                ['Desktop', 60],
                ['Mobile', 30],
                ['Tablet', 10]
            ]);
            
            var options = {
                title: 'Traffic Sources',
                pieHole: 0.4,
                colors: ['#4285F4', '#34A853', '#FBBC04']
            };
            
            var chart = new google.visualization.PieChart(
                document.getElementById('pieChart')
            );
            chart.draw(data, options);
        }
        
        function drawColumnChart() {
            var data = google.visualization.arrayToDataTable([
                ['Product', 'Sales'],
                ['Product A', 1000],
                ['Product B', 1170],
                ['Product C', 660],
                ['Product D', 1030]
            ]);
            
            var options = {
                title: 'Product Sales',
                colors: ['#EA4335'],
                vAxis: { title: 'Sales ($)' }
            };
            
            var chart = new google.visualization.ColumnChart(
                document.getElementById('columnChart')
            );
            chart.draw(data, options);
        }
        
        function drawLineChart() {
            var data = google.visualization.arrayToDataTable([
                ['Month', 'Revenue', 'Profit'],
                ['Jan', 1000, 200],
                ['Feb', 1170, 250],
                ['Mar', 660, 100],
                ['Apr', 1030, 300],
                ['May', 1200, 350],
                ['Jun', 1350, 400]
            ]);
            
            var options = {
                title: 'Financial Performance',
                curveType: 'function',
                legend: { position: 'bottom' },
                colors: ['#0F9D58', '#F4B400']
            };
            
            var chart = new google.visualization.LineChart(
                document.getElementById('lineChart')
            );
            chart.draw(data, options);
        }
        
        // Make charts responsive
        window.addEventListener('resize', function() {
            drawCharts();
        });
    </script>
</body>
</html>

🧠 Test Your Knowledge

Which function is used to load Google Charts packages?