jQuery UI Widgets › Forums › Chart › Charts in tabs not binding
Tagged: binding, chart, initTabContent, Integration, jqxChart, jqxTabs, tab, Tabs
This topic contains 2 replies, has 2 voices, and was last updated by nickgowdy 10 years ago.
-
Author
-
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.
Hello nickgowdy,
Widgets in jqxTabs should be initialized in the initTabContent callback function, as shown in the demo Integration with other widgets.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/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 -
AuthorPosts
You must be logged in to reply to this topic.