how to show mutipal dynamic highcharts based on json data

Question

I want to use json data to construct mutipal pie charts. And put the pie chart inside class container, so for example:

data.data[0].usedPercentage=0, 
data.data[1].usedPercentage=20,
data.data[2].usedPercentage=0,

the output pie chart should display like 0%, 20%, 0% , but now they display the same all in 0%, could anybody give some clues about that? Thanks a lot

$.ajax({
                type: "GET",
                url: 'http://XXX.XXX.XXX.XX',
                dataType:'json',
                contentType:"application/json",
                success:function(data){
                  console.log(data);

                  var used =  new Array();
                  for (var i = 0; i < data.data.length; i++) {
                    used[i]=data.data[i].usedPercentage;
                    pieIndex(used[i]);
                    projectList +="<div class='container'>pie</div>"

                                function pieIndex(used){                            

                                  $(function () {
                                         // Using classes to select multiple containers
                                        var $containers = $(".container");
                                        // You just set the configuration object once
                                        var chartConfig = {
                                            chart: {
                                                plotBackgroundColor: null,
                                                plotBorderWidth: null,
                                                plotShadow: false,
                                                type: 'pie'
                                            },
                                            title: {
                                                text: ''
                                            },
                                            tooltip: {
                                                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                                            },
                                            plotOptions: {
                                                pie: {
                                                    allowPointSelect: true,
                                                    cursor: 'pointer',
                                                    dataLabels: {
                                                        enabled: false
                                                    },
                                                    showInLegend: true
                                                }
                                            },
                                            series: [{
                                                name: 'precentage',
                                                colorByPoint: true,
                                                data: [{
                                                    name: 'Unused',
                                                    y: 100-Number(used),
                                                    color: '#eeeeee',
                                                    sliced: true,
                                                    selected: true
                                                }, {
                                                    name: 'Used',
                                                    y: Number(used),
                                                    color: '#f34s12',
                                                    selected: true

                                                }]
                                            }]
                                        };

                                        $containers.each(function() {
                                          $(this).highcharts(chartConfig);
                                        });

                                    });
                                }



                },
                error:function(){
                        alert("connection error");
                }
        }); 





});

Answer 1

Each chart need a unique id on the container. Looks like you are overwriting those containers with the last chart. Try using a different id on each container div. For example:

projectList +="<div id='pie-chart-container-" + i + "' class='container'>pie</div>"