Google Charts Pie Example

This page demonstrates how to create an interactive pie chart using Google Charts. Google Charts is a powerful and flexible charting library that allows you to visualize your data in various ways. Below, you'll find a sample pie chart representing fictional data.

Implementation Details

To implement this, we load the Google Charts library and then use JavaScript to draw the chart. You'll need a <div> element to hold the chart, and a JavaScript function to configure and render it.

HTML Structure

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

JavaScript Code


// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart']});

// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);

// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
  // Create the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Task');
  data.addColumn('number', 'Hours per Day');
  data.addRows([
    ['Work',     11],
    ['Eat',      2],
    ['Commute',  2],
    ['Watch TV', 2],
    ['Sleep',    7]
  ]);

  // Set chart options
  var options = {
    title: 'My Daily Schedule',
    pieHole: 0.4, // Creates a donut chart
    colors: ['#0078d4', '#f25022', '#ffb900', '#00bcf2', '#7fba00'], // Custom colors
    chartArea: {width: '90%', height: '80%'},
    legend: {
        position: 'labeled',
        alignment: 'center',
        textStyle: {
            color: '#333',
            fontSize: 14
        }
    },
    titleTextStyle: {
        color: '#0078d4',
        fontSize: 20,
        bold: true
    },
    tooltip: {
        textStyle: {
            fontSize: 12
        }
    }
  };

  // Instantiate and draw our chart, passing in some options.
  var chart = new google.visualization.PieChart(document.getElementById('piechart'));
  chart.draw(data, options);
}

Google Charts Pie Chart Example

Implementation Details

HTML Structure

JavaScript Code