jQuery UI Widgets Forums Chart Charts in tabs not binding

This topic contains 2 replies, has 2 voices, and was last updated by  nickgowdy 10 years ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • Charts in tabs not binding #62387

    nickgowdy
    Participant

    Hello,

    I am creating a widget which is a popup that has 3 tabs. Each tab contains one chart and at the moment, charts in tab 2 and 3 don’t work. Only the chart in tab 1 binds correctly.

    <script type="text/javascript">
        function initPies() {
            $("#jqxwindow-pie").jqxWindow({ width: 515, height: 560, autoOpen: false, draggable: true });
            $('#jqxTabs-pie').jqxTabs({ width: 500, height: '100%', position: 'top' });
    
            $('#settings div').css('margin-top', '10px');
    
            $('#animation').on('change', function (event) {
                var checked = event.args.checked;
                $('#jqxTabs-pie').jqxTabs({ selectionTracker: checked });
            });
    
            $('#contentAnimation').on('change', function (event) {
                var checked = event.args.checked;
                if (checked) {
                    $('#jqxTabs-pie').jqxTabs({ animationType: 'fade' });
                }
                else {
                    $('#jqxTabs-pie').jqxTabs({ animationType: 'none' });
                }
            });
        }
    
        function createPie(data, type) {
          
            var source =
            {
                datatype: "json",
                datafields: [
                       { name: 'SectionCount' },
                       { name: 'AllocatedTo' }
                ],
                localdata: data
            };
    
            var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
            // prepare jqxChart settings
    
            var settings = {
                title: "Enquiry Section's SLA Status",
                description: type,
                enableAnimations: true,
                showLegend: true,
                legendPosition: { left: 520, top: 140, width: 100, height: 100 },
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
                source: dataAdapter,
                colorScheme: 'scheme02',
                seriesGroups:
                    [
                        {
                            type: 'pie',
                            showLabels: true,
                            series:
                                [
                                    {
                                        dataField: 'SectionCount',
                                        displayText: 'AllocatedTo',
                                        labelRadius: 100,
                                        initialAngle: 15,
                                        radius: 130,
                                        innerRadius: 50,
                                        centerOffset: 0
                                    }
                                ]
                        }
                    ]
            };
    
            console.log(settings);
    
            if (type == 'overdue') {
                console.log(type);
                $('#chartContainer-pie-overdue').jqxChart(settings);
            }
            else if (type == 'approaching') {
                console.log(type);
                $('#chartContainer-pie-approaching').jqxChart(settings);
            } else {
                console.log(type);
                $('#chartContainer-pie-within').jqxChart(settings);
            }
        }
    
        function getPieData() {
            getData('@Url.Action("AjaxPieDataOverdue", "KPIs")').done(function (data) {
                createPie(data, 'overdue');
            });
            getData('@Url.Action("AjaxPieDataApproaching", "KPIs")').done(function (data) {
                createPie(data, 'approaching');
            });
            getData('@Url.Action("AjaxPieDataWithin", "KPIs")').done(function (data) {
                createPie(data, 'within');
            });
        };
    
        function getData(url) {
            return $.ajax({
                type: "GET",
                url: url,
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                },
                error: function (data) {
                }
            });
        };
    
        function displayPie() {
            getPieData();
            $('#jqxwindow-pie').jqxWindow('open');
        }
    </script>
    
    <img src="@Url.Content("~/AMTImages/PieChart.png")" onclick="displayPie()" />
    
    <div id='jqxWidget' style="overflow: hidden;">
        <div id='jqxwindow-pie' caption="Pie Chart">
            <div id='jqxWidget' style="overflow: hidden;">
                <div id='jqxTabs-pie'>
                    <ul>
                        <li>Overdue</li>
                        <li>Approaching</li>
                        <li>Within</li>
                    </ul>
                    <div id='chartContainer-pie-overdue' style="overflow: hidden;">
                    </div>
                    <div id='chartContainer-pie-approaching' style="overflow: hidden;">
                    </div>
                    <div id='chartContainer-pie-within' style="overflow: hidden;">
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script type="text/javascript" defer="defer">
        @Html.Raw(ViewBag.StartupScript)
    </script>

    This is my JSON from the server, I can see it in my log on the browser:

    XHR finished loading: GET "http://localhost:60541/KPIs/AjaxPieDataOverdue". jquery-2.1.1.js:8623send jquery-2.1.1.js:8623jQuery.extend.ajax jquery-2.1.1.js:8152getData (index):830getPieData (index):677displayPie (index):701onclick (index):706
    [
      {
        "AllocatedTo": "Beatrice Henricot",
        "SectionCount": 1
      },
      {
        "AllocatedTo": "Botany",
        "SectionCount": 14
      },
      {
        "AllocatedTo": "Deepthi Rao",
        "SectionCount": 1
      },
      {
        "AllocatedTo": "Entomology",
        "SectionCount": 7
      },
      {
        "AllocatedTo": "Horticulture",
        "SectionCount": 27
      },
      {
        "AllocatedTo": "Jenny Bowden",
        "SectionCount": 3
      },
      {
        "AllocatedTo": "Lenka Cooke",
        "SectionCount": 1
      },
      {
        "AllocatedTo": "Pathology",
        "SectionCount": 17
      }
    ] 
    XHR finished loading: GET "http://localhost:60541/KPIs/AjaxPieDataApproaching". jquery-2.1.1.js:8623
    [
      {
        "AllocatedTo": "Horticulture",
        "SectionCount": 1
      }
    ] 
    XHR finished loading: GET "http://localhost:60541/KPIs/AjaxPieDataWithin". jquery-2.1.1.js:8623send jquery-2.1.1.js:8623jQuery.extend.ajax jquery-2.1.1.js:8152getData (index):830getPieData (index):683displayPie (index):701onclick (index):706
    [] 

    As you can see AjaxPieDataWithin returns empty json because there is no data. AjaxPieDataApproaching returns data and should bind.

    Charts in tabs not binding #62445

    Dimitar
    Participant

    Hello nickgowdy,

    Widgets in jqxTabs should be initialized in the initTabContent callback function, as shown in the demo Integration with other widgets.

    Best Regards,
    Dimitar

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

    Charts in tabs not binding #62457

    nickgowdy
    Participant

    Hello Dimitar,

    Thanks, that example helped me fix my code. Using initTabContent and getting JSON for that 1 graph makes a big difference.

    Kind regards,
    Nick

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

You must be logged in to reply to this topic.