jQWidgets Forums

jQuery UI Widgets Forums Navigation Tabs Multiple Widgets in Tabs IE8

This topic contains 6 replies, has 2 voices, and was last updated by  Peter Stoev 12 years, 6 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • Multiple Widgets in Tabs IE8 #10812

    dgindy
    Member

    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?

    Multiple Widgets in Tabs IE8 #10818

    dgindy
    Member

    Those I did find out this only seems to be an issue when rendering the bar/column graph.

    Multiple Widgets in Tabs IE8 #10819

    Peter Stoev
    Keymaster

    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 Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Multiple Widgets in Tabs IE8 #10980

    Peter Stoev
    Keymaster

    Hi 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 Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Multiple Widgets in Tabs IE8 #10983

    dgindy
    Member

    Here 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>
    Multiple Widgets in Tabs IE8 #10984

    dgindy
    Member

    Could this issue be caused by the fact I’m pulling data from a file?

    Multiple Widgets in Tabs IE8 #10987

    Peter Stoev
    Keymaster

    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 Stoev

    jQWidgets Team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.