Loading bar on pie chart

[rahisarmParticipant]

Hi team..
I need to show a loading bar when pie chart shows and hide the loading bar when the pie chart loads completely
Below is my code i have implemented

<script type="text/javascript">
        $(document).ready(function () {
            // prepare chart data as an array
  //var chartOffset = $('#saleschart1').offset();
  //$("#loadingImage").css({ "display": "block", "left": (chartOffset.left + $("#saleschart1").width() / 2 - 16), "top": (chartOffset.top + $("#saleschart1").height() / 2 - 16) });
  
            var data  =<%=com.dashboard.analysis.salesinvoice.ClsSalesInvoiceDAO.getChart(grpby1,  fromdate,  todate,  branch,id)%>;
 var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'amount' },
                    { name: 'description' }
                ],
                localdata: data
            };
            var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true,loadComplete: function () {
                $("#loadingImage").css("display", "none");
            },loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
            // prepare jqxChart settings
            var settings = {
                title: "Sales Analysis",
                description: "",
                enableAnimations: true,
                showLegend: true,
                showBorderLine: true,
                legendLayout: { left: 450, top: 50, width: 330, height: 400, flow: 'vertical' },
                padding: { left: 5, top: 5, right: 275, bottom: 0 },
                titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
                source: dataAdapter,
                colorScheme: 'scheme02',
                seriesGroups:
                    [
                        {
                            type: 'pie',
                            showLabels: true,
                            series:
                                [
                                    { 
                                        dataField: 'amount',
                                        displayText: 'description',
                                        labelRadius: 120,
                                        initialAngle: 15,
                                        radius: 170,
                                        centerOffset: 0,
                                       
                                        formatFunction: function (value, itemIdx, serieIndex, groupIndex) {
                                            if (isNaN(value))
                                                return value;
                                            return value;
                                        }
                                    }
                                ]
                        }
                    ]
            };
            
            	
            
            // setup the chart
            $('#saleschart1').jqxChart(settings);
            
        });
    </script>
     <img id="loadingImage" src="../../../../icons/31load.gif" style="position: absolute;display:block;" />
<div id='saleschart1'  style="width: 700px; height: 400px;"></div>

[DimitarParticipant]

Hi rahisarm,

Your approach seems correct – showing the loading image initially and hiding it in loadComplete. Please clarify if you experience any issues and if there are any errors thrown in your browser’s console.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts