Our Engineers can Write as well

How to Implement Google Pie Charts in a Web Application

A pie chart is a statistical diagram in circle form which is sliced or divided to represent numerical proportion. It is used when comparison must be shown visually and graphically for quick and easy understanding. It is also the perfect choice to illustrate a given set of data in percentage format.

Pie charts are widely used in web applications and software developers choose Google Visualization API to develop dynamic pie charts.

In this blog by Future focus, let’s get to know how to implement Google Pie Chart in a web application.

Assume that you must create a pie chart representing the following data which indicates a set of people using different browsers at a given point of time that needs to be embedded into an application:

NoBrowserPercentage %
1.Mozilla FireFox30
2.Internet Explorer10
3.Google Chrome40
4.Safari10
5.Opera5
6.Others10
Here are the steps:

1. Load Google chart library file in web pages that must include Google charts.

a. All web pages with Google charts should include the following lines in <head> of the web page:

Code Below:

 

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

2. Load the Google Visualization API and the pie chart package as:

Code Below:

 

google.charts.load (‘current’, { ‘packages’: [‘corechart’] } );

3. Set a callback to run when Google Visualization API is loaded:

Code Below:

 

google.charts. setOnLoadCallback (drawChart);

4. Create chart data:

Code Below:

 

var data = google. visualization. arrayToDataTable([
[‘Browser’, ‘People’], [‘Firefox’, 30], [‘IE’, 10], [‘Chrome’, 40], [‘Safari’, 10], [‘Opera’, 5], [‘Others’, 10]]);

5. Set chart options:

Code Below:

 

var Options = {‘title: ‘Number of people using different browser’, ‘width’:400,’height’:300}

6. Instantiate and draw chart, passing options:

Code Below:

 

var chart = new google.visualization.PieChart( document. getElementById(‘piechart’));
chart.draw(data, options);

7. HTML section that will hold the pie chart:

Code Below:

 

<html>

  <head>

    <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(drawChart);

      function drawChart() {

             var data = google.visualization. arrayToDataTable([

                                                [‘Browser’, ‘People’],

                                                [‘Firefox’, 30],

                                                [‘IE’, 10],

                                                [‘Chrome’, 40],

                                                [‘Safari’, 10],

                                                [‘Opera’, 5],

                                                [‘Others’, 10]]);

        var options = {

          title: ‘Number of people using different browser’

           };

        var chart = new google. visualization. PieChart( document. getElementById (‘piechart’));

        chart.draw(data, options);

      }

    </script>

  </head>

  <body>

    <div id=”piechart” style=”width: 900px; height: 500px;”></div>

  </body>

</html>

If your coding was successful, you should be able to generate the following pie chart:

google pie chart
rathika - software engineer

Contributed by:

Rathika Mani
Software Engineer

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