Home/ Questions/Q 8343681
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T06:08:24+00:00

I am displaying a pie chart using high charts as shown below. The problem

  • 0

I am displaying a pie chart using high charts as shown below.

The problem is that the chart is not diplayed if I am not using an alert between the code when it parses data from XML and fills the array as the following example:

<html>
<head>
    <script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/modules/exporting.js"></script> 
    <script src="parseData.js" ></script>

    <script>

    var cntItem=0;
    var cntCategory=0;
    var categoryGroup;
    var itemGroup;
    var catdata=[];
    parseData(function (totalCategories,totalItems,items,categories) {

        cntItem=totalItems;
        cntCategory=totalCategories;
        categoryGroup=categories;
        itemGroup=items;        
    }); 
    alert('asfas');
    var numerator=100;
    var denominator=cntCategory;
    var remainder = (100/13);
    var cnt=0;
            var itemdata = [
                      ['aloogobi', 42.0],
                      ['pannermakhani', 26.8],
                      {
                          name: 'Chrome',
                          y: 14.8,
                          sliced: true,
                          selected: true
                      },
                      ['mattuerpaneer', 6.5],
                      ['Jaipuri', 8.2],
                      ['Kolapuri', 0.7]
                  ]; 

                for(var i=0;i<categoryGroup.length;i++){
                    var temp=[categoryGroup[i][1],7.5];
                    catdata.push(temp);                 
                }  

     $(document).ready(function () {    

            RenderPieChart('container', catdata);     


            function RenderPieChart(elementId, dataList) {
                new Highcharts.Chart({
                    chart: {
                        renderTo: elementId,
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false
                    }, title: {
                        text: 'Browser market shares at a specific website, 2010'
                    },
                    tooltip: {
                        formatter: function () {
                            return '<b>' + this.point.name + '</b>: ' + this.percentage + ' %';
                        }
                    },
                    plotOptions:{
                        series: {
                            cursor: 'pointer',
                                point: {
                                    events: {
                                        click: function() {
                                            ++cnt;
                                            if(cnt=='1'){
                                                RenderPieChart('container', catdata);
                                                alert(catdata[this.x][0]+" - "+catdata[this.x][1]);                                             
                                            }
                                            if(cnt=='2'){
                                                RenderPieChart('container',itemdata);   
                                                alert(itemdata[this.x][0]+" - "+itemdata[this.x][1]);                                               
                                            }   
                                        }
                                    }
                                }
                        }
                    },
                    series: [{
                        type: 'pie',
                        name: 'Browser share',
                        data: dataList
                    }]
                });
            };
        });

    </script>
</head>
<body>
    <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
    <input type="button" id="categoryPieChart" value="Category Chart" />
    <input type="button" id="itemPiechat" value="Item Chart" />
</body>
</html>

Here parsedData is a callback from the ajax function that parses XML and returns the array; now before I call and load data in the “Renderpiechart()” function to draw the pie chart, I put an alert and it displays the chart, but if I remove the alert, then the chart will not be displayed. I thing catdata name array is not filled yet, so the chart is not displayed.

This is my parsed data js file:

<script src="js/jquery1-7-2.min.js" type="text/javascript" ></script>
var categories=[];
var items=[];
var totalCategories;
var totalItems;

function parseData(callback){   
        var cnt=0;
            $.ajax({
                type:"GET",
                url:"test.xml",
                success:function(xml){                                      
                    totalCategories = $(xml).find('totalCategories').text();
                    totalItems = $(xml).find('totalItems').text();
                    $(xml).find('category').each(function(){
                        var tempcategory= new Array();                      
                        var catogoryId = $(this).find('cat_id').text();
                        var catogoryName = $(this).find('cat_name').text();
                        tempcategory[0]=catogoryId;
                        tempcategory[1]=catogoryName;
                        categories[cnt]=tempcategory;
                        cnt++;                      
                    });                     
                    cnt=0;
                    $(xml).find('items').each(function(){
                        var tempitem=new Array();
                        var catId = $(this).find('category_id').text();
                        var itemId = (this).find('item_id').text();
                        var itemName = (this).find('item_name').text();

                        var itemtype = $(this).find('type').text();
                        tempitem[0]=catId;
                        tempitem[1]=itemId;
                                            tempitem[2]=itemname;
                        items[cnt]=tempitem;
                        cnt++;                  
                    });                     
                  callback.call(null,totalCategories,totalItems,items,categories);
                },
                error: function(){
                    alert("An error occurred while processing XML file.");
                }               
            }); 
    }
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Setting a callback for parseData does not mean the script hangs until it comes back. So what’s happening in your script is that you are calling parseData, which in turn, performs an ajax request, but in the meantime, the script goes on and calls RenderPieChart but the chart data is not yet populated.

    That’s why, if you put an alert you will see the data, since the alert is blocking the script and so parseData has enough time to complete.

    I seggest you put the call to parseData under the document.ready() and then call RenderPieChart in the callback of the ajax:

    function parseData(callback){   
        var cnt=0;
            $.ajax({
                type:"GET",
                url:"test.xml",
                success:function(xml){                                      
                   ....                  
                  callback.call(null,totalCategories,totalItems,items,categories);
                  RenderPieChart('container', catdata);   
                },
                    ...          
            }); 
    }
    • 0