Create a Pie Chart Using CSS And Google Charts

Pie Chart is a type of graph that shows data in a circular shape and is often used to show percentage or measurement data. The percentage represented on the graph for each category is given next to the corresponding piece of one part of the pie chart. These charts are excellent for displaying data for two or more categories.

Create A Pie Chart Using CSS

1.Add HTML

<!DOCTYPE html>
<html>
   <head>
      <title>Pie Chart</title>
   </head>
   <body>
      <h1>Pie Chart</h1>
      <div class="pie-chart"></div>
   </body>
</html>

2.Add CSS

.pie-chart { 
        margin-top: 300px; 
        display: block; 
        position: absolute; 
        width: 500px; 
        height: 500px; 
        border-radius: 50%; 
        background-image: conic-gradient( 
            red 50deg,  
            blue 0 235deg,  
            green 0); 
}

Full Code

<!DOCTYPE html>
<html>
   <head>
      <title>Pie Chart</title>
      <style> 
         .pie-chart { 
         margin-top: 300px; 
         display: block; 
         position: absolute; 
         width: 500px; 
         height: 500px; 
         border-radius: 50%; 
         background-image: conic-gradient( 
         red 50deg,  
         blue 0 235deg,  
         green 0); 
         }
      </style>
   </head>
   <body>
      <h1>Pie Chart</h1>
      <div class="pie-chart"></div>
   </body>
</html>

Output

CSS PIE CHART
CSS PIE CHART

 

Create A Pie Chart Using Google API

1.Add HTML

<!DOCTYPE html>
<html>
<head>
<title>Pie Chart</title>
</head>
<body>
<h1>My Pie Chart</h1>
<div id="pie-chart"></div>
</body>
<html>

2.Add a Google Chart API To Your Site.

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

 3.Add JavaScript

<script type = "text/javascript" >

    // Load Google Charts To Your Site 

    google.charts.load('current', {
        'packages': ['corechart']
    });
google.charts.setOnLoadCallback(drawChart);

// Add The Chart Values 
function drawChart() {
    var data = google.visualization.arrayToDataTable([
            ['Task', 'Hours per Day'],
            ['Work', 8],
            ['Exercise', 2],
            ['Mobile', 2],
            ['Games', 3],
            ['Sleep', 9]
]);

        // Add Size Of Google Chart

        var options = {
            'title': 'My Daily Time Table',
            'width': 500,
            'height': 400
        };

        // Display Chart On Your Div  Id 'pie-chart'

        var chart = new google.visualization.PieChart(document.getElementById('pie-chart')); chart.draw(data, options);
    }

</script>

Full Code

<!DOCTYPE html>
<html>
<head>
<title>Pie Chart</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type = "text/javascript" >

    // Load Google Charts To Your Site 

    google.charts.load('current', {
        'packages': ['corechart']
    });
google.charts.setOnLoadCallback(drawChart);

// Add The Chart Values 
function drawChart() {
    var data = google.visualization.arrayToDataTable([
            ['Task', 'Hours per Day'],
            ['Work', 8],
            ['Exercise', 2],
            ['Mobile', 2],
            ['Games', 3],
            ['Sleep', 9]
]);

        // Add Size Of Google Chart

        var options = {
            'title': 'My Daily Time Table',
            'width': 500,
            'height': 400
        };

        // Display Chart On Your Div  Id 'pie-chart'

        var chart = new google.visualization.PieChart(document.getElementById('pie-chart')); chart.draw(data, options);
    }

</script>
</head>
<body>
<h1>My Pie Chart</h1>
<div id="pie-chart"></div>
</body>
<html>

Output

Google Pie Chart
Google Pie Chart

 

Leave a Comment

Your email address will not be published.