Make Responsive Pie Chart with Google Charts

A Pie Chart is a circular graph that divided into slices to represent statistics. In the web application, the pie chart is very useful to display data statistic in percentages. Google Charts provides an easy way to visualize data statistic in the website. In this tutorial, we will show you how to build and embed pie chart to display demographics data in the web page using Google Charts. Also, we will make the Google pie chart responsive for different screen resolution.

Create Pie Chart with Google Charts

Google Visualization API provides the quickest way to create charts and add pie chart in the web page. You can embed a pie chart on your website within minutes using Google Charts.

The following code creates a pie chart with Google Charts.

JavaScript Code:
Load Google Chart library.

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

Use chart object with drawChart callback. You need to specify the div id (piechart) in the PieChart() method where you want to display the pie chart.

<script type="text/javascript">
  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {

    var data = google.visualization.arrayToDataTable([
      ['Language', 'Rating'],
      ['PHP', 79],
            ['JavaScript', 71],
            ['Swift', 68],
            ['SQL', 56],
            ['Java', 45],
            ['Perl', 45],
            ['Ruby', 35],
            ['Python', 30],
            ['AngularJS', 29],
            ['Node.js', 28],
            ['Objective-C', 19],
            ['C#', 17],
            ['C++', 15],
            ['C', 14]
    ]);

    var options = {
      title: 'Most Popular Programming Languages'
    };

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

    chart.draw(data, options);
  }
</script>

HTML Code:
Create a <div> element with id to display the Google Chart in this div.

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

You can make the Google pie chart dynamic using PHP and MySQL. See this tutorial to create different types of dynamic pie chart with PHP and MySQL – Create Dynamic Pie Chart in PHP with Google Charts

Make Google Pie Chart Responsive

In a particular screen size, the Google pie chart will display properly. But if you want to load Google pie chart properly in different screen resolution, it needs to responsive. To make Google pie chart responsive, HTML and JavaScript code need to be modified.

The following code creates a responsive Google pie chart with CSS.

JavaScript Code:
Add width and height in the draw() method of chart object.

<script type="text/javascript">
  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {

    var data = google.visualization.arrayToDataTable([
      ['Language', 'Rating'],
      ['PHP', 79],
            ['JavaScript', 71],
            ['Swift', 68],
            ['SQL', 56],
            ['Java', 45],
            ['Perl', 45],
            ['Ruby', 35],
            ['Python', 30],
            ['AngularJS', 29],
            ['Node.js', 28],
            ['Objective-C', 19],
            ['C#', 17],
            ['C++', 15],
            ['C', 14]
    ]);

    var options = {
      title: 'Most Popular Programming Languages',
      width: '100%',
      height: '500px'
    };

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

    chart.draw(data, options);
  }
</script>

HTML Code:
Put the piechart div in a parent div.

<div id="chart_wrap">
    <div id="piechart"></div>
</div>

CSS Code:
Add the following CSS for the parent and piechart div.

#chart_wrap {
    position: relative;
    padding-bottom: 100%;
    height: 0;
    overflow:hidden;
}

#piechart {
    position: absolute;
    top: 0;
    left: 0;
    width:100%;
    height:500px;
}