The Google Charts JavaScript library provides us with the capability to create various types of charts. The Google Charts library is available online hosted on Google servers.

The following code sample shows how we can create a simple pie chart using the Google Charts JavaScript library.

<html>
<head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("visualization", "1", {packages:["corechart"]});
        google.setOnLoadCallback(drawPieChart);
        function drawPieChart()
        {
            var data = google.visualization.arrayToDataTable([
                ['Sales', 'K$ per Month'],
                ['Asia',     22],
                ['Europe',   18],
                ['America',  42],
                ['Africa',   30],
                ['Australia',14]
            ]);

            var options = {
                title: 'Corporate Sales'
            };

            var chart = new google.visualization.PieChart(document.getElementById('saleschart'));
            chart.draw(data, options);
        }
    </script>
</head>
<body>
<div id="saleschart" style="width: 900px; height: 500px;"></div>
</body>
</html>

The following video clip overviews this code sample, shows its execution and explains it.

You can find more resources for learning how to use this JavaScript library in my free online courses website at http://abelski.lifemichael.com.

Leave a Reply

Your email address will not be published. Required fields are marked *