Post
Ask Question

Google charts (Pie and Bar) with Example JavaScript

Google Charts is a very popular chart to visualize the data in web applications. It was released officially in 2005. After that, enhancement was done in 2007, 2010, and upcoming years. Google services, like Google Drive and Google Analytics, integrate with enhanced data visualization features are included.

Different types of charts are pie, bar, line, etc. Also, Google charts are dynamic in nature and explore data from different ways like databases or Google Sheets. Adaptive to different screen sizes like mobile and desktop views, also a free source and suitable for personal and professional projects. Google chart Javascript library example with hot coded data in Pie and Bar chart example is below.

Code Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google Pie and Bar Chart</title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', {'packages':['corechart']});
        google.charts.setOnLoadCallback(bar);
        google.charts.setOnLoadCallback(pie);

        function pie() {
            // Create the data table.
            var data = google.visualization.arrayToDataTable([
                ['aaa', ''],
                ['abab', 11],
                ['bbb', 2],
                ['RRR', 2],
                ['www', 2],
                ['zzz', 7],
                ['yyy', 7],
                ['xxx', 7]
            ]);
            var options = {
                title: 'Pie chart',
                is3D: true,
            };
            var chart = new google.visualization.PieChart(document.getElementById('piechart'));
            chart.draw(data, options);
        }

        function bar() {
            var data = google.visualization.arrayToDataTable([
                ['aaa', ''],
                ['ccc', 11],
                ['bbb', 50],
                ['RRR', 2],
                ['www', 20],
                ['rrrr', 70],
                ['Zrrrr', 79]
            ]);
            var options = {
                title: 'Bar chart',
                hAxis: { title: 'y-axis', minValue: 0 },
                vAxis: { title: 'x-axis' }
            };
            var chart = new google.visualization.BarChart(document.getElementById('barchart'));
            chart.draw(data, options);
        }
    </script>
</head>
<body>
    <h3>Google Bar Chart Example</h3>
    <div id="piechart" style="width: 900px; height: 500px"></div>
    <div id="barchart" style="width: 900px; height: 500px"></div>
</body>
</html>

Output

Output


Similar Articles