Charts - Pie Chart

One stop solution for perfect admin dashboard!

Simple Pie Chart

<!-- ========== HTML ========== -->
<div id="chart1" class="op-chart"></div>

<!-- ========== JS ========== -->
<script>
    $(function($) {
        // chart1
        var chart1 = AmCharts.makeChart( "chart1", {
          "type": "pie",
          "theme": "light",
          "fontFamily": "Poppins",
          "dataProvider": [ {
            "country": "Lithuania",
            "litres": 501.9
          }, {
            "country": "Czech Republic",
            "litres": 301.9
          }, {
            "country": "Ireland",
            "litres": 201.1
          }, {
            "country": "Germany",
            "litres": 165.8
          }, {
            "country": "Australia",
            "litres": 139.9
          }, {
            "country": "Austria",
            "litres": 128.3
          }, {
            "country": "UK",
            "litres": 99
          }, {
            "country": "Belgium",
            "litres": 60
          }, {
            "country": "The Netherlands",
            "litres": 50
          } ],
          "valueField": "litres",
          "titleField": "country",
           "balloon":{
           "fixedPosition":true
          },
          "export": {
            "enabled": true
          }
        } );
    });
</script>
                                                    
Donut with radial gradient

<!-- ========== HTML ========== -->
<div id="chart2" class="op-chart"></div>

<!-- ========== JS ========== -->
<script>
    $(function($) {
        // chart2
        var chart2 = AmCharts.makeChart("chart2", {
            "type": "pie",
            "theme": "light",
            "fontFamily": "Poppins",
            "innerRadius": "40%",
            "gradientRatio": [-0.4, -0.4, -0.4, -0.4, -0.4, -0.4, 0, 0.1, 0.2, 0.1, 0, -0.2, -0.5],
            "dataProvider": [{
                "country": "Lithuania",
                "litres": 501.9
            }, {
                "country": "Czech Republic",
                "litres": 301.9
            }, {
                "country": "Ireland",
                "litres": 201.1
            }, {
                "country": "Germany",
                "litres": 165.8
            }, {
                "country": "Australia",
                "litres": 139.9
            }, {
                "country": "Austria",
                "litres": 128.3
            }],
            "balloonText": "[[value]]",
            "valueField": "litres",
            "titleField": "country",
            "balloon": {
                "drop": true,
                "adjustBorderColor": false,
                "color": "#FFFFFF",
                "fontSize": 16
            },
            "export": {
                "enabled": true
            }
        });
    });
</script>
                                                    
Animated Time-Line Pie Chart

<!-- ========== HTML ========== -->
<div id="chart3" class="op-chart"></div>

<!-- ========== JS ========== -->
<script>
    $(function($) {
        // Chart 3
        /**
         * Define data for each year
         */
        var chartData = {
          "1995": [
            { "sector": "Agriculture", "size": 6.6 },
            { "sector": "Mining and Quarrying", "size": 0.6 },
            { "sector": "Manufacturing", "size": 23.2 },
            { "sector": "Electricity and Water", "size": 2.2 },
            { "sector": "Construction", "size": 4.5 },
            { "sector": "Trade (Wholesale, Retail, Motor)", "size": 14.6 },
            { "sector": "Transport and Communication", "size": 9.3 },
            { "sector": "Finance, real estate and business services", "size": 22.5 } ],
          "1996": [
            { "sector": "Agriculture", "size": 6.4 },
            { "sector": "Mining and Quarrying", "size": 0.5 },
            { "sector": "Manufacturing", "size": 22.4 },
            { "sector": "Electricity and Water", "size": 2 },
            { "sector": "Construction", "size": 4.2 },
            { "sector": "Trade (Wholesale, Retail, Motor)", "size": 14.8 },
            { "sector": "Transport and Communication", "size": 9.7 },
            { "sector": "Finance, real estate and business services", "size": 22 } ],
          "1997": [
            { "sector": "Agriculture", "size": 6.1 },
            { "sector": "Mining and Quarrying", "size": 0.2 },
            { "sector": "Manufacturing", "size": 20.9 },
            { "sector": "Electricity and Water", "size": 1.8 },
            { "sector": "Construction", "size": 4.2 },
            { "sector": "Trade (Wholesale, Retail, Motor)", "size": 13.7 },
            { "sector": "Transport and Communication", "size": 9.4 },
            { "sector": "Finance, real estate and business services", "size": 22.1 } ],
          "1998": [
            { "sector": "Agriculture", "size": 6.2 },
            { "sector": "Mining and Quarrying", "size": 0.3 },
            { "sector": "Manufacturing", "size": 21.4 },
            { "sector": "Electricity and Water", "size": 1.9 },
            { "sector": "Construction", "size": 4.2 },
            { "sector": "Trade (Wholesale, Retail, Motor)", "size": 14.5 },
            { "sector": "Transport and Communication", "size": 10.6 },
            { "sector": "Finance, real estate and business services", "size": 23 } ],
          "1999": [
            { "sector": "Agriculture", "size": 5.7 },
            { "sector": "Mining and Quarrying", "size": 0.2 },
            { "sector": "Manufacturing", "size": 20 },
            { "sector": "Electricity and Water", "size": 1.8 },
            { "sector": "Construction", "size": 4.4 },
            { "sector": "Trade (Wholesale, Retail, Motor)", "size": 15.2 },
            { "sector": "Transport and Communication", "size": 10.5 },
            { "sector": "Finance, real estate and business services", "size": 24.7 } ],
          "2000": [
            { "sector": "Agriculture", "size": 5.1 },
            { "sector": "Mining and Quarrying", "size": 0.3 },
            { "sector": "Manufacturing", "size": 20.4 },
            { "sector": "Electricity and Water", "size": 1.7 },
            { "sector": "Construction", "size": 4 },
            { "sector": "Trade (Wholesale, Retail, Motor)", "size": 16.3 },
            { "sector": "Transport and Communication", "size": 10.7 },
            { "sector": "Finance, real estate and business services", "size": 24.6 } ],
          "2001": [
            { "sector": "Agriculture", "size": 5.5 },
            { "sector": "Mining and Quarrying", "size": 0.2 },
            { "sector": "Manufacturing", "size": 20.3 },
            { "sector": "Electricity and Water", "size": 1.6 },
            { "sector": "Construction", "size": 3.1 },
            { "sector": "Trade (Wholesale, Retail, Motor)", "size": 16.3 },
            { "sector": "Transport and Communication", "size": 10.7 },
            { "sector": "Finance, real estate and business services", "size": 25.8 } ],
          "2002": [
            { "sector": "Agriculture", "size": 5.7 },
            { "sector": "Mining and Quarrying", "size": 0.2 },
            { "sector": "Manufacturing", "size": 20.5 },
            { "sector": "Electricity and Water", "size": 1.6 },
            { "sector": "Construction", "size": 3.6 },
            { "sector": "Trade (Wholesale, Retail, Motor)", "size": 16.1 },
            { "sector": "Transport and Communication", "size": 10.7 },
            { "sector": "Finance, real estate and business services", "size": 26 } ],
          "2003": [
            { "sector": "Agriculture", "size": 4.9 },
            { "sector": "Mining and Quarrying", "size": 0.2 },
            { "sector": "Manufacturing", "size": 19.4 },
            { "sector": "Electricity and Water", "size": 1.5 },
            { "sector": "Construction", "size": 3.3 },
            { "sector": "Trade (Wholesale, Retail, Motor)", "size": 16.2 },
            { "sector": "Transport and Communication", "size": 11 },
            { "sector": "Finance, real estate and business services", "size": 27.5 } ],
          "2004": [
            { "sector": "Agriculture", "size": 4.7 },
            { "sector": "Mining and Quarrying", "size": 0.2 },
            { "sector": "Manufacturing", "size": 18.4 },
            { "sector": "Electricity and Water", "size": 1.4 },
            { "sector": "Construction", "size": 3.3 },
            { "sector": "Trade (Wholesale, Retail, Motor)", "size": 16.9 },
            { "sector": "Transport and Communication", "size": 10.6 },
            { "sector": "Finance, real estate and business services", "size": 28.1 } ],
          "2005": [
            { "sector": "Agriculture", "size": 4.3 },
            { "sector": "Mining and Quarrying", "size": 0.2 },
            { "sector": "Manufacturing", "size": 18.1 },
            { "sector": "Electricity and Water", "size": 1.4 },
            { "sector": "Construction", "size": 3.9 },
            { "sector": "Trade (Wholesale, Retail, Motor)", "size": 15.7 },
            { "sector": "Transport and Communication", "size": 10.6 },
            { "sector": "Finance, real estate and business services", "size": 29.1 } ],
          "2006": [
            { "sector": "Agriculture", "size": 4 },
            { "sector": "Mining and Quarrying", "size": 0.2 },
            { "sector": "Manufacturing", "size": 16.5 },
            { "sector": "Electricity and Water", "size": 1.3 },
            { "sector": "Construction", "size": 3.7 },
            { "sector": "Trade (Wholesale, Retail, Motor)", "size": 14.2 },
            { "sector": "Transport and Communication", "size": 12.1 },
            { "sector": "Finance, real estate and business services", "size": 29.1 } ],
          "2007": [
            { "sector": "Agriculture", "size": 4.7 },
            { "sector": "Mining and Quarrying", "size": 0.2 },
            { "sector": "Manufacturing", "size": 16.2 },
            { "sector": "Electricity and Water", "size": 1.2 },
            { "sector": "Construction", "size": 4.1 },
            { "sector": "Trade (Wholesale, Retail, Motor)", "size": 15.6 },
            { "sector": "Transport and Communication", "size": 11.2 },
            { "sector": "Finance, real estate and business services", "size": 30.4 } ],
          "2008": [
            { "sector": "Agriculture", "size": 4.9 },
            { "sector": "Mining and Quarrying", "size": 0.3 },
            { "sector": "Manufacturing", "size": 17.2 },
            { "sector": "Electricity and Water", "size": 1.4 },
            { "sector": "Construction", "size": 5.1 },
            { "sector": "Trade (Wholesale, Retail, Motor)", "size": 15.4 },
            { "sector": "Transport and Communication", "size": 11.1 },
            { "sector": "Finance, real estate and business services", "size": 28.4 } ],
          "2009": [
            { "sector": "Agriculture", "size": 4.7 },
            { "sector": "Mining and Quarrying", "size": 0.3 },
            { "sector": "Manufacturing", "size": 16.4 },
            { "sector": "Electricity and Water", "size": 1.9 },
            { "sector": "Construction", "size": 4.9 },
            { "sector": "Trade (Wholesale, Retail, Motor)", "size": 15.5 },
            { "sector": "Transport and Communication", "size": 10.9 },
            { "sector": "Finance, real estate and business services", "size": 27.9 } ],
          "2010": [
            { "sector": "Agriculture", "size": 4.2 },
            { "sector": "Mining and Quarrying", "size": 0.3 },
            { "sector": "Manufacturing", "size": 16.2 },
            { "sector": "Electricity and Water", "size": 2.2 },
            { "sector": "Construction", "size": 4.3 },
            { "sector": "Trade (Wholesale, Retail, Motor)", "size": 15.7 },
            { "sector": "Transport and Communication", "size": 10.2 },
            { "sector": "Finance, real estate and business services", "size": 28.8 } ],
          "2011": [
            { "sector": "Agriculture", "size": 4.1 },
            { "sector": "Mining and Quarrying", "size": 0.3 },
            { "sector": "Manufacturing", "size": 14.9 },
            { "sector": "Electricity and Water", "size": 2.3 },
            { "sector": "Construction", "size": 5 },
            { "sector": "Trade (Wholesale, Retail, Motor)", "size": 17.3 },
            { "sector": "Transport and Communication", "size": 10.2 },
            { "sector": "Finance, real estate and business services", "size": 27.2 } ],
          "2012": [
            { "sector": "Agriculture", "size": 3.8 },
            { "sector": "Mining and Quarrying", "size": 0.3 },
            { "sector": "Manufacturing", "size": 14.9 },
            { "sector": "Electricity and Water", "size": 2.6 },
            { "sector": "Construction", "size": 5.1 },
            { "sector": "Trade (Wholesale, Retail, Motor)", "size": 15.8 },
            { "sector": "Transport and Communication", "size": 10.7 },
            { "sector": "Finance, real estate and business services", "size": 28 } ],
          "2013": [
            { "sector": "Agriculture", "size": 3.7 },
            { "sector": "Mining and Quarrying", "size": 0.2 },
            { "sector": "Manufacturing", "size": 14.9 },
            { "sector": "Electricity and Water", "size": 2.7 },
            { "sector": "Construction", "size": 5.7 },
            { "sector": "Trade (Wholesale, Retail, Motor)", "size": 16.5 },
            { "sector": "Transport and Communication", "size": 10.5 },
            { "sector": "Finance, real estate and business services", "size": 26.6 } ],
          "2014": [
            { "sector": "Agriculture", "size": 3.9 },
            { "sector": "Mining and Quarrying", "size": 0.2 },
            { "sector": "Manufacturing", "size": 14.5 },
            { "sector": "Electricity and Water", "size": 2.7 },
            { "sector": "Construction", "size": 5.6 },
            { "sector": "Trade (Wholesale, Retail, Motor)", "size": 16.6 },
            { "sector": "Transport and Communication", "size": 10.5 },
            { "sector": "Finance, real estate and business services", "size": 26.5 } ]
        };


        /**
         * Create the chart
         */
        var currentYear = 1995;
        var chart3 = AmCharts.makeChart( "chart3", {
          "type": "pie",
          "theme": "light",
          "fontFamily": "Poppins",
          "dataProvider": [],
          "valueField": "size",
          "titleField": "sector",
          "startDuration": 0,
          "innerRadius": 80,
          "pullOutRadius": 20,
          "marginTop": 30,
          "titles": [{
            "text": "South African Economy"
          }],
          "allLabels": [{
            "y": "54%",
            "align": "center",
            "size": 25,
            "bold": true,
            "text": "1995",
            "color": "#555"
          }, {
            "y": "49%",
            "align": "center",
            "size": 15,
            "text": "Year",
            "color": "#555"
          }],
          "listeners": [ {
            "event": "init",
            "method": function( e ) {
              var chart = e.chart;

              function getCurrentData() {
                var data = chartData[currentYear];
                currentYear++;
                if (currentYear > 2014)
                  currentYear = 1995;
                return data;
              }

              function loop() {
                chart.allLabels[0].text = currentYear;
                var data = getCurrentData();
                chart.animateData( data, {
                  duration: 1000,
                  complete: function() {
                    setTimeout( loop, 3000 );
                  }
                } );
              }

              loop();
            }
          } ],
           "export": {
           "enabled": true
          }
        } );
    });
</script>
                                                    
3D Pie Chart

<!-- ========== HTML ========== -->
<div id="chart4" class="op-chart"></div>

<!-- ========== JS ========== -->
<script>
    $(function($) {
        // Chart 4
        var chart4 = AmCharts.makeChart( "chart4", {
          "type": "pie",
          "theme": "light",
          "fontFamily": "Poppins",
          "dataProvider": [ {
            "country": "Lithuania",
            "value": 260
          }, {
            "country": "Ireland",
            "value": 201
          }, {
            "country": "Germany",
            "value": 65
          }, {
            "country": "Australia",
            "value": 39
          }, {
            "country": "UK",
            "value": 19
          }, {
            "country": "Latvia",
            "value": 10
          } ],
          "valueField": "value",
          "titleField": "country",
          "outlineAlpha": 0.4,
          "depth3D": 15,
          "balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
          "angle": 30,
          "export": {
            "enabled": true
          }
        } );
    });
</script>
                                                    
3D Donut Chart

<!-- ========== HTML ========== -->
<div id="chart5" class="op-chart"></div>

<!-- ========== JS ========== -->
<script>
    $(function($) {
        // Chart 5
        var chart5 = AmCharts.makeChart( "chart5", {
          "type": "pie",
          "theme": "light",
          "fontFamily": "Poppins",
          "titles": [ {
            "text": "Visitors countries",
            "size": 16
          } ],
          "dataProvider": [ {
            "country": "United States",
            "visits": 7252
          }, {
            "country": "China",
            "visits": 3882
          }, {
            "country": "Japan",
            "visits": 1809
          }, {
            "country": "Germany",
            "visits": 1322
          }, {
            "country": "United Kingdom",
            "visits": 1122
          }, {
            "country": "France",
            "visits": 414
          }, {
            "country": "India",
            "visits": 384
          }, {
            "country": "Spain",
            "visits": 211
          } ],
          "valueField": "visits",
          "titleField": "country",
          "startEffect": "elastic",
          "startDuration": 2,
          "labelRadius": 15,
          "innerRadius": "50%",
          "depth3D": 10,
          "balloonText": "[[title]]
[[value]] ([[percents]]%)", "angle": 15, "export": { "enabled": true } } ); }); </script>