amcharts pie chart code not working

Question

I am new in javascript and ı wrote code for make pie chart with amcharts library. But code is not working. What is wrong? Can you help me. How can ı fix my code?

This is my library js

<html>
<title>Pie Chart Trying</title>
<meta charset="utf-8" />
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/pie.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>`enter code here`

<div id="chartdiv"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<script>
    $.get("http://localhost:8080/cinsiyet",


           function (data, status) {

               var turlerVeSayilar = { Memur: 0, işçi: 0, Sözleşmeli: 0, Geçici: 0, Firma: 0, Meclis: 0, Stajyer: 0, GeçiciMemur: 0, Diğer: 0 }
               var personelTurVeSayilar = [];
               $.each(data, function (index, item) {

                   switch (item.turu) {
                       case 'M':
                           turlerVeSayilar['Memur']++;
                           break;
                       case 'I':
                           turlerVeSayilar['İşçi']++;
                           break;
                       case 'S':
                           turlerVeSayilar['Sözleşmeli']++;
                           break;
                       case 'G':
                           turlerVeSayilar['Geçici']++;
                           break;
                       case 'F':
                           turlerVeSayilar['Firma']++;
                           break;
                       case 'L':
                           turlerVeSayilar['Meclis']++;
                           break;
                       case 'O':
                           turlerVeSayilar['Stajyer']++;
                           break;
                       case 'C':
                           turlerVeSayilar['GeçiciMemur']++;
                           break;
                       case 'D':
                           turlerVeSayilar['Diger']++;
                           break;
                   }
               });

               $.each(turlerVeSayilar, function (index, item) {
                   newitem = {}
                   newitem["tur"] = index; 
                   newitem["sayi"] = item
                   personelTurVeSayilar.push(newitem); 

                   //{tur: "memur", sayi: 3}
                   //{tur: "isci", sayi: 0}
                   //{tur: "sozlesmeli", sayi: 0}
                   //{tur: "gecici", sayi: 0}
                   //{tur: "firma", sayi: 2}
                   //{tur: "meclis", sayi: 0}
                   //{tur: "stajyer", sayi: 0}
                   //{tur: "geciciMemur", sayi: 0}
                   //{tur: "diger", sayi: 0}
               });

               var chart= AmCharts.makeChart("chartdiv",
                   {
                       "type": "pie",
                       "theme": "light",
                       //"categoryField": "tur",
                       //"rotate": true,

                       "valueField": "sayi",
                       "titleField": "tur",
                       "outlineAlpha": 0.4,
                       "depth3D": 15,
                       "balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
                       "angle": 30,
                       "export": {
                           "enabled": true,
                           "startDuration": 1,
                           "labelRadius": 15,
                           "colors": [
                               "#FF0F00",
                               "#FF6600",
                               "#FF9E01",
                               "#FCD202",
                               "#4876ff",
                               "#B0DE09",
                               "#04D215",
                               "#0D8ECF",
                               "#0D52D1",
                               "#2A0CD0",
                               "#8A0CCF",
                               "#CD0D74",
                               "#754DEB",
                               "#DDDDDD",
                               "#999999",
                               "#333333",
                               "#000000",
                               "#57032A",
                               "#CA9726",
                               "#990000",
                               "#4B0C25",


                           ],
                           "legend": {
                               "enabled": true,
                               "align": "center",
                               "markerType": "circle",
                               "balloon": {},
                               /*"titles": [
                                   {
                                       "id": "Title-1",
                                       "size": 15,
                                       "text": "Toplam Personel Sayısının Personel Türüne Göre Dağılımı"
                                   }
                               ], */

                               "dataProvider": personelTurVeSayilar,
                               "export": {
                                   "enabled": true
                               }
                           }
                       }
                   })
           })

</script>
</body>
</html>

xorspark xorspark · Accepted Answer · 2018-03-12T10:57:06

Similar to my last answer about your dataLoader section, this time your export section is nesting too many properties and it's also duplicated. Don't nest incorrect properties inside of the export section - colors, startDuration, labelRadius legend all don't belong inside of export. In addition to this you put your dataProvider, balloon and titles and another export section in the wrong place; they are not legend properties and need to be moved to the top of the object.

Here's the fixed code:

var chart = AmCharts.makeChart("chartdiv", {
  "type": "pie",
  "theme": "light",
  "valueField": "sayi",
  "titleField": "tur",
  "outlineAlpha": 0.4,
  "depth3D": 15,
  "balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
  "angle": 30,
  "startDuration": 1,
  "labelRadius": 15,
  "colors": [
    "#FF0F00",
    "#FF6600",
    "#FF9E01",
    "#FCD202",
    "#4876ff",
    "#B0DE09",
    "#04D215",
    "#0D8ECF",
    "#0D52D1",
    "#2A0CD0",
    "#8A0CCF",
    "#CD0D74",
    "#754DEB",
    "#DDDDDD",
    "#999999",
    "#333333",
    "#000000",
    "#57032A",
    "#CA9726",
    "#990000",
    "#4B0C25",
  ],
  "legend": {
    "enabled": true,
    "align": "center",
    "markerType": "circle",
  },
  "balloon": {},
  "dataProvider": personelTurVeSayilar,

  "titles": [{
    "id": "Title-1",
    "size": 15,
    "text": "Toplam Personel Sayısının Personel Türüne Göre Dağılımı"
  }],
  "export": {
    "enabled": true
  }
})

Carefully compare this against your code to see what was changed. I also recommend looking at the demo code on the AmCharts website as well.

Here's a working demo using your code:

var personelTurVeSayilar = [{
    tur: "memur",
    sayi: 3
  },
  {
    tur: "isci",
    sayi: 0
  },
  {
    tur: "sozlesmeli",
    sayi: 0
  },
  {
    tur: "gecici",
    sayi: 0
  },
  {
    tur: "firma",
    sayi: 2
  },
  {
    tur: "meclis",
    sayi: 0
  },
  {
    tur: "stajyer",
    sayi: 0
  },
  {
    tur: "geciciMemur",
    sayi: 0
  },
  {
    tur: "diger",
    sayi: 0
  }
];

var chart = AmCharts.makeChart("chartdiv", {
  "type": "pie",
  "theme": "light",
  "valueField": "sayi",
  "titleField": "tur",
  "outlineAlpha": 0.4,
  "depth3D": 15,
  "balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
  "angle": 30,
  "startDuration": 1,
  "labelRadius": 15,
  "colors": [
    "#FF0F00",
    "#FF6600",
    "#FF9E01",
    "#FCD202",
    "#4876ff",
    "#B0DE09",
    "#04D215",
    "#0D8ECF",
    "#0D52D1",
    "#2A0CD0",
    "#8A0CCF",
    "#CD0D74",
    "#754DEB",
    "#DDDDDD",
    "#999999",
    "#333333",
    "#000000",
    "#57032A",
    "#CA9726",
    "#990000",
    "#4B0C25",
  ],
  "legend": {
    "enabled": true,
    "align": "center",
    "markerType": "circle",
  },
  "balloon": {},
  "dataProvider": personelTurVeSayilar,

  "titles": [{
    "id": "Title-1",
    "size": 15,
    "text": "Toplam Personel Sayısının Personel Türüne Göre Dağılımı"
  }],
  "export": {
    "enabled": true
  }
})

<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/pie.js"></script>
<script src="//www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="//www.amcharts.com/lib/3/plugins/export/export.css">
<div id="chartdiv" style="width: 100%; height: 400px"></div>

amcharts pie chart code not working

1 Answers