jQuery UI Widgets Forums Gauges and Maps Gauges Gauge in tabs?

This topic contains 3 replies, has 3 voices, and was last updated by  milen 8 years, 9 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Gauge in tabs? #5241

    ChrisJ
    Member

    I have an application with a tab style layout. In my main application, if I try and put a gauge on a blank tab, the application hangs when loading in Firefox.

    I’ve made a simple example – this doesn’t do quite the same thing, but it still doesn’t work. If the gauge is in the second tab, it renders incorrectly – if it’s in the first tab, then it’s fine. I’ve also seen different behaviour if I have two gauges – one in each tab.

    Any thoughts would be appreciated.

    Chris

    var currentTab;

    $(document).ready(function () {
    var theme = '';
    $("#tabs").jqxTabs({ theme: theme, height: '100%', width: 400, selectionTracker: true });
    $('#splitter').jqxSplitter({enableCollapseAnimation:true, height: '100%', width: '100%', theme: theme, panels: [{ size: 200 }, { size: 200}] });
    $('#splitter2').jqxSplitter({enableCollapseAnimation:true, height: '100%', width: '100%', theme: theme, panels: [{ size: 200 }, { size: 200}] });

    var majorTicks = { size: '10%', interval: 10 },
    minorTicks = { size: '5%', interval: 2.5, style: { 'stroke-width': 1, stroke: '#aaaaaa'} },
    labels = { interval: 20 };
    $('#gauge').jqxLinearGauge({
    orientation: 'vertical',
    labels: labels,
    ticksMajor: majorTicks,
    ticksMinor: minorTicks,
    max: 60,
    value: -60,
    pointer: { size: '6%' },
    colorScheme: 'scheme05',
    ranges: [
    { startValue: -10, endValue: 10, style: { fill: '#FFF157', stroke: '#FFF157'} },
    { startValue: 10, endValue: 35, style: { fill: '#FFA200', stroke: '#FFA200'} },
    { startValue: 35, endValue: 60, style: { fill: '#FF4800', stroke: '#FF4800'}}]
    });
    $('#gauge').jqxLinearGauge('value', 50);

    $('#gauge2').jqxLinearGauge({
    orientation: 'vertical',
    labels: labels,
    ticksMajor: majorTicks,
    ticksMinor: minorTicks,
    max: 60,
    value: -60,
    pointer: { size: '6%' },
    colorScheme: 'scheme05',
    ranges: [
    { startValue: -10, endValue: 10, style: { fill: '#FFF157', stroke: '#FFF157'} },
    { startValue: 10, endValue: 35, style: { fill: '#FFA200', stroke: '#FFA200'} },
    { startValue: 35, endValue: 60, style: { fill: '#FF4800', stroke: '#FF4800'}}]
    });
    $('#gauge2').jqxLinearGauge('value', 50);
    });

    html, body
    {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    }

    Tab 1
    Tab 2

    Content 1.1

    Gauge in tabs? #5242

    Peter Stoev
    Keymaster

    Hi Chris,

    I confirm the rendering issue.

    As a workaround you can use this:

    In order to integrate jqxTabs with jqxGauge, do the following – add IFrames inside the Tabs content panels and set the Iframe’s src to point to a page with Gauge(s).

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Gauge in tabs? #5625

    ChrisJ
    Member

    As a follow up to this, the gauges work “ok” under IE (there’s still the rendering issues mentioned earlier, but it does work). However, under FF, the code crashes with an error. The following is reported by firebug

    Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMSVGLocatable.getBBox]
    http://192.168.2.232/dm2/jqwidgets/jqxchart.js
    Line 7

    Given it’s minimised, it’s impossible to work out quite where the issue lies, but I thought I’d mention it anyway.

    Chris

    Gauge in tabs? #6033

    milen
    Participant

    Hi Chris,

    You can take a look at jQWidgets ver. 2.3. We’ve implemented a new way of loading widgets within jqxTabs. You can take a look at an online sample here: tabs-integration.htm.

    Best Regards,
    Milen Ivanov

    jQWidgets Team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.