jQWidgets Forums
jQuery UI Widgets › Forums › Navigation › Tabs › Multiple Widgets in Tabs IE8
Tagged: IE 8 Tabs charts
This topic contains 6 replies, has 2 voices, and was last updated by Peter Stoev 12 years, 6 months ago.
-
Author
-
I’m running into an issue when trying to display multiple charts on there own individual tabs. The first chart will load but any charts after that are executing but displaying blank. Any ideas?
Those I did find out this only seems to be an issue when rendering the bar/column graph.
Hi dgindy,
Charts due to the specific of SVG rendering require a visible DIV tag. Using jqxTabs with other widgets is demonstrated in this sample: integration.htm. The idea is to initialize the widgets in each tab when it is visible.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comHi dgindy,
Could you send us sample data for testing your scenario? I am afraid that without data, we won’t be able to run it and debug it locally. We need to change ‘line’ to ‘column’, right?
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comHere is an exmaple. It only seems to fail in IE 8 so far
<!DOCTYPE html><html lang="en"><head><link rel="stylesheet" href="/jqwidgets/styles/jqx.base.css"/> <link rel="stylesheet" href="/jqwidgets/styles/jqx.classic.css" /> <script type="text/javascript" src="/scripts/gettheme.js"></script> <script type="text/javascript" src="/scripts/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="/jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="/jqwidgets/jqxscrollview.js"></script> <script type="text/javascript" src="/jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="/jqwidgets/jqxchart.js"></script> <script type="text/javascript" src="/jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="/jqwidgets/jqxtabs.js"></script><script type="text/javascript"> var Counter = 1; var myInterval; var source;var dataAdapter;$(function () { var theme = getTheme(); var initChart = function () { var sampleData = [ { Month: 'Jan', Requests: 443, Precentage: 18}, { Month: 'Feb', Requests: 665, Precentage: 17.22}, { Month: 'Mar', Requests: 234, Precentage: 4.47}, { Month: 'Apr', Requests: 566, Precentage: 3.38}, { Month: 'May', Requests: 465, Precentage: 2.74}]; // prepare jqxChart settings var settings = { title: "Member Requests via Website", description: "", enableAnimations: true, showLegend: true, padding: { left: 10, top: 5, right: 10, bottom: 5 }, titlePadding: { left: 90, top: 0, right: 0, bottom: 10 }, source: sampleData, categoryAxis: { text: 'Category Axis', textRotationAngle: 0, dataField: 'Month', showTickMarks: true, valuesOnTicks: false, tickMarksInterval: 1, tickMarksColor: '#888888', unitInterval: 1, gridLinesInterval: 1, gridLinesColor: '#888888', axisSize: 'auto' }, colorScheme: 'scheme05', seriesGroups: [ { type: 'line', showLabels: true, symbolType: 'circle', valueAxis: { unitInterval: 100, minValue: 0, maxValue: 1000, description: 'Requests per month', axisSize: 'auto', tickMarksColor: '#888888' }, series: [ { dataField: 'Requests', displayText: 'Member Requests via Website'} ] } ] }; // setup the chart $('#jqxChart').jqxChart(settings); } var initResovledPercent = function () { var sampleData = [ { Month: 'Jan', Requests: 443, Precentage: 18}, { Month: 'Feb', Requests: 665, Precentage: 17.22}, { Month: 'Mar', Requests: 234, Precentage: 4.47}, { Month: 'Apr', Requests: 566, Precentage: 3.38}, { Month: 'May', Requests: 465, Precentage: 2.74}]; // prepare jqxChart settings var settings = { title: "% Resoved within 4 Hr Service Level", description: "", enableAnimations: true, showLegend: true, padding: { left: 10, top: 5, right: 10, bottom: 5 }, titlePadding: { left: 90, top: 0, right: 0, bottom: 10 }, source: sampleData, categoryAxis: { text: 'Category Axis', textRotationAngle: 0, dataField: 'Month', showTickMarks: true, valuesOnTicks: false, tickMarksInterval: 1, tickMarksColor: '#888888', unitInterval: 1, gridLinesInterval: 1, gridLinesColor: '#888888', axisSize: 'auto' }, colorScheme: 'scheme05', seriesGroups: [ { type: 'column', showLabels: true, symbolType: 'circle', valueAxis: { unitInterval: 10, minValue: 0, maxValue: 100, description: 'Requests per month', axisSize: 'auto', tickMarksColor: '#888888' }, series: [ { dataField: 'Precentage', displayText: '% Resoved within Service Level'} ] } ] }; // setup the chart $('#jqxRequestResolved').jqxChart(settings); } //$('#jqxChart1').jqxChart(settings); var initWidgets = function (tab) { switch (tab) { case 0: break; case 1: initChart(); break; case 2: initResovledPercent(); break; } } $('#jqxTabs').jqxTabs({ width: 600, height: 375, position: 'bottom', theme: theme,initTabContent: initWidgets }); myInterval=setInterval(function () { var length = $('#jqxTabs').jqxTabs('length'); $('#jqxTabs').jqxTabs('select', (Counter % length)); Counter++; },4000); $('#jqxTabs').on('tabclick', function (event) { clearInterval(myInterval); }); }); $('#jqxScrollView').bind('pageChanged',function PC (event) { var page = event.args.currentPage; alert(page); } ); </script> <style type="text/css"> .photo { width: 600px; height: 450px; background-color: #000; background-position: center; background-repeat: no-repeat; } </style></head><body class="default"> <div id='jqxWidget'> <div id='jqxTabs'> <ul> <li style="margin-left: 30px;">EPIP</li> <li>Request via Website</li> <li>% Resolved in 4 hours</li> </ul> <div> <div class="ChangeLeft"> <div style="top:20%; height: 285px; width:15px;background-image: url('images/icon-right.png');background-repeat:no-repeat;position:absolute; display:none" ></div> </div> <img src="http://rcunet/MediaHandler.ashx?id=0001D500.png" style="float:right; vertical-align:middle;width: 490px; height: 285px;border: 0px solid;" /> <div style="color: #000000" >Progress as of September Month End <br> <br>October Month End Results will be Updated on or Before November 18th</div> <div class="ChangeRight"> <div style="top:20%; height: 285px; width:15px;background-image: url('images/icon-right.png');background-repeat:no-repeat;position:absolute; display:none" ></div> </div> </div> <div > <div id='jqxChart' style="width:475px; height:285px;float:right;overflow:hidden;"></div> <div style="color: #000000;overflow:hidden;" >Number of Member requests for contact handled by MSC.</div> </div> <div> <div id='jqxRequestResolved' style="width:450px; height:285px;float:right;overflow:hidden;"></div> <div style="color: #000000;overflow:hidden;" >Percentage of Requests for Contact from Members handled by MSC in 4 hours or less.</div> </div> </div> </div></body></html>
Could this issue be caused by the fact I’m pulling data from a file?
Hi dgindy,
The issue that I experience with IE8 is that the vertical text is rendered incorrectly as horizontal text. That’s an issue with the Chart’s VML rendering. By removing the overflow: hidden, the Chart borders will be drawn correctly as well.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.