jQuery UI Widgets Forums Chart Loading bar on pie chart

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 8 years, 6 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Loading bar on pie chart #78673

    rahisarm
    Participant

    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>
    • This topic was modified 8 years, 6 months ago by  rahisarm.
    Loading bar on pie chart #78704

    Dimitar
    Participant

    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/

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.