Highchart динамическая круговая диаграмма

Question

У меня есть круговая диаграмма в старших диаграммах, которая должна идти в цикле со структурой json, но когда я использую ее, получаю только 2 значения name1 и name2, а также данные второй диаграммы не приходят сюда, у меня есть другие 3 диаграммы с одинаковыми именами chart1 и chart2, Мне нужно отобразить из тех же данных с loop.can кто-нибудь, пожалуйста, помогите, вот код ниже

HTML

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/modules/export-data.js"></script>
    <div id="chart1"
                                    style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto">
                                </div>
<div id="chart2"
                                    style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto">
                                </div>

Javascript

$.getJSON('http://localhost/highcharts/json-data/chart3.json', function (data) {

        // Make codes uppercase to match the map data
        $.each(data["data"], function (index, value) {

            //this.code = this.code.toUpperCase();
            var data = {
                "id" : value["name"],
                "displayName" : value["displayName"] ,
                "data" : value["data"]
            }
            console.log(data)
            pieChart(data)
        });

function pieChart(data) {       
    var chart = Highcharts.chart(data.id, {
        chart: {
            height: 380,
             width: 380,
            type: 'pie',
            backgroundColor: '#EDEDED',

        },
         credits: {
          enabled: false
        },
        plotOptions: {
          pie: {
            shadow: false,
            borderWidth: 0
          }
        },
        title: {
            text: data.displayName
        },
        'tooltip': {
                'enabled': false
            },
         legend: {
          align: 'right',
          layout: 'horizontal',
          verticalAlign: 'bottom',
          x: -21,
          y: 0,

        },
        series: [{
            name: 'Brands',
            showInLegend: true,
            colorByPoint: true,
            data: data.data,
             dataLabels: {
                    distance: -30,
                    formatter: function() {
              return '' + this.point.y + '%';
            }
                },

        }]
    });
    chart.render();
}
});

chart3.json

{
    "data": [{
            "name": "chart1",
            "displayName": "test1",
            "data": [{
                    "name": "name1",
                    "y": 6
                },
                {
                    "name": "name2",
                    "y": 12
                },
                {
                    "name": "name3",
                    "y": 18
                },
                {
                    "name": "name4",
                    "y": 10
                }
            ]
        },
        {
            "name": "chart2",
            "displayName": "test2",
            "data": [{
                    "name": "name1",
                    "y": 1981
                },
                {
                    "name": "name2",
                    "y": 12
                },
                {
                    "name": "name2",
                    "y": 12
                }
            ]
        }
    ]
}