Prev Next

JavaScript Google Chart

Google Charts is a free JavaScript library for creating interactive and visually appealing charts and graphs. It supports various chart types, including line, bar, column, pie, and geo charts, and is easy to integrate with Google Sheets and other data sources.

Key Topics

Getting Started with Google Charts

To use Google Charts, load the Google Charts library in your HTML file:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

Initialize the library and load the required chart package (e.g., corechart for most chart types).

Creating Charts

Google Charts uses the google.visualization namespace to create and render charts. Data is provided in a DataTable format.

<div id="chart_div" style="width: 600px; height: 400px;"></div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
    google.charts.load('current', { packages: ['corechart'] });
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
        const data = google.visualization.arrayToDataTable([
            ['Year', 'Sales'],
            ['2019', 1000],
            ['2020', 1170],
            ['2021', 660],
            ['2022', 1030]
        ]);

        const options = {
            title: 'Company Performance',
            hAxis: { title: 'Year' },
            vAxis: { title: 'Sales' }
        };

        const chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    }
</script>

Explanation: This example creates a line chart with yearly sales data. The chart is rendered inside the chart_div element using the LineChart class.

Customizing Charts

Charts can be customized by modifying the options object. This includes setting colors, labels, grid lines, and other visual elements.

<div id="custom_chart_div" style="width: 600px; height: 400px;"></div>
<script>
    google.charts.load('current', { packages: ['corechart'] });
    google.charts.setOnLoadCallback(drawCustomChart);

    function drawCustomChart() {
        const data = google.visualization.arrayToDataTable([
            ['Element', 'Density'],
            ['Copper', 8.94],
            ['Silver', 10.49],
            ['Gold', 19.30],
            ['Platinum', 21.45]
        ]);

        const options = {
            title: 'Density of Precious Metals (g/cm³)',
            backgroundColor: '#f1f1f1',
            pieSliceText: 'value',
            slices: {
                1: { offset: 0.2, color: '#76A7FA' },
                2: { offset: 0.1, color: '#A6CEE3' }
            }
        };

        const chart = new google.visualization.PieChart(document.getElementById('custom_chart_div'));
        chart.draw(data, options);
    }
</script>

Explanation: This example customizes a pie chart by adding colors, offsets for slices, and a background color.

Example: Pie Chart

Below is a simple example of a pie chart displaying browser usage data:

<!DOCTYPE html>
<html>
    <head>
        <title>Google Chart Example</title>
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    </head>
    <body>
        <div id="piechart" style="width: 900px; height: 500px;"></div>
        <script>
            google.charts.load('current', { packages: ['corechart'] });
            google.charts.setOnLoadCallback(drawPieChart);

            function drawPieChart() {
                const data = google.visualization.arrayToDataTable([
                    ['Browser', 'Usage'],
                    ['Chrome', 65],
                    ['Firefox', 20],
                    ['Safari', 10],
                    ['Others', 5]
                ]);

                const options = {
                    title: 'Browser Market Share',
                    pieHole: 0.4
                };

                const chart = new google.visualization.PieChart(document.getElementById('piechart'));
                chart.draw(data, options);
            }
        </script>
    </body>
</html>

Key Takeaways

  • Ease of Use: Google Charts provides a simple way to create interactive visualizations.
  • Customization: Extensive options for styling charts, from colors to interactive elements.
  • Versatility: Supports various chart types, including pie, bar, column, and geo charts.
  • Integration: Easily integrates with Google Sheets and external data sources.
Prev Next